Exercise 6: Solution

With skrollr you can just set up data- attributes and not have to write any JS at all.

You need to add 0% with skrollr (add percentage sign to 0)

To make the cat fall upwards, she changes the data- attributes to a bottom value:

  <div class="tuna-falling" data-0="bottom: -20%" data-6124="bottom: 120%">
  ..
</div>

Then she plays around with overlaying three cat images and changing their opacities to add expressions.

One way:

  <img class="tuna-glow" src="..." data-0="opacity: 0" data-6124="opacity: 1" .. />

Now, the expression layer fades in with the scroll.

She then reduces data-6124 to data-4124 so that it happens lower in the page.

Using the <body> class... :

  .waking .tuna-glow {
  opacity: 1;
  transition-duration: 6s;
}

Abundancia