I created an animation which scrolls down a piece of text inside a div
and then I thought that would be interesting if the animation direction ( up or down ) change dynamically based on scroll direction ( if you scroll down, the piece of text scrolls down too, if you scroll up, the piece of text changes direction and scrolls up too ). The problem is that I don't know how to change the keyframe CSS propriety with jQuery. any solutions?
@keyframes spam {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 100%);
}
}
and jQuery to get the direction:
$(window).bind('mousewheel', function(event) {
if (event.originalEvent.wheelDelta >= 0) {
// don't change anything
} else {
// change the keyframe 100% propriety from transform: translate(0, 100%) to transform: translate(0, -100%);
}
});
The only solution that I see right now is to duplicate the text, give it another animation that scrolls up the text and hide/show these 2 different text animations based on scroll direction. Sorry for my bad English.