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.The other, stateful way:
Using the
<body>
class... :
.waking .tuna-glow {
opacity: 1;
transition-duration: 6s;
}