2 different animation based on scroll direction

问题: 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 dynamic...

问题:

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.


回答1:

Dynamically changing css properties of a keyframe animation is not a very good idea even if it was theoretically easy since you never know what else in the future might use the same keyframe unsuspectingly.

What you should be doing is assigning your animations to css classes, so something like

.animate-spam {
    animation-name:spam;
    animation-duration:1s;
    animation-fill-mode: forwards;
}

for your current animation, and then another keyframe and class for the other scroll direction. Then your solution is as easy as adding and removing classes.

Since you mentioned you were using jQuery, you could also just use the built in .animate() function which is probably easier for a simple application like this.

  • 发表于 2019-02-16 18:25
  • 阅读 ( 177 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除