← Back to the cows

Seasons

Four parallax bands, each built from layers that scroll at different speeds. There is no JavaScript setup on this page: every layer is a data-buttery attribute.

Scroll down ↓

Spring

Spring

Petals let go before the leaves arrive. The sky lags at half your scroll speed, the far hills a little less, the blossom trees almost keep up with the page, and the petals overtake everything.

<section class="band" id="spring">
  <div class="band__sky"
    data-buttery="from: top-bottom; to: bottom-top; elem: #spring"
    data-buttery-translate="0 -50vh | 0 50vh">…</div>
  <div data-buttery="…"
    data-buttery-translate="0 -30vh | 0 30vh">far hills</div>
  <div data-buttery="…"
    data-buttery-translate="0 -10vh | 0 10vh">trees</div>
  <div data-buttery="…"
    data-buttery-translate="-4vw 30vh | 4vw -50vh">petals</div>
</section>

Every layer measures the band (elem: #spring), which never moves, so the ranges stay accurate however far a layer travels.

Summer

Summer

Long light, short shadows. The further back a layer is, the more it lags behind the page. The near clouds go the other way: their range runs upwards, so they rush past faster than you scroll.

<div class="band__particles"
  data-buttery="from: top-bottom; to: bottom-top; elem: #summer"
  data-buttery-translate="0 40vh | 0 -60vh">…</div>

Autumn

Autumn

The petals are leaves now. Their layer has an -md override, so from the md breakpoint up they fall further and drift sideways more. Resize the window to see it switch.

<div class="band__particles"
  data-buttery="from: top-bottom; to: bottom-top; elem: #autumn"
  data-buttery-translate="-4vw 30vh | 4vw -50vh"
  data-buttery-translate-md="-12vw 50vh | 12vw -90vh">…</div>

Winter