jquery - 在滚动位置上动画 HTML 元素

Question

我会尝试做的是在滚动条到达某个位置时通过 CSS3 为一些 HTML 设置动画。

我浏览了jQuery插件，发现了很多有趣的东西，比如视差或谐波滚动，我发现最接近的是流行的延迟加载，它会在滚动页面时延迟图像的加载。我想做的是类似的事情，但使用动画div或img或.

我希望有人可以指导我找到一些可以帮助我的好插件。

提前致谢。

Answer 1

您将希望scrollTop()在事件中使用 jQuery 函数scroll。也许是这样的：

$(window).scroll(function(){
     var top = $(this).scrollTop();
     if(top > 150){
         //do something after it scrolls down past 150px    
     }
});

希望这可以帮助 ：）

Answer 2

如果我了解您的需求，您正在寻找类似Transe的东西。它允许您根据当前的滚动偏移量对元素进行转换和动画处理。

这是一个超级简单的演示： http: //fiddle.jshell.net/ARTsinn/mqcTr/

https://github.com/yckart/jQuery.transe.js/

另一个解决方案是Scrollorama。

Answer 3

正如所评论的，您可能希望将滚动与实际的 CSS3 动画（以及，在下面，最终滚动时的 div 位置）结合起来，这在之前的答案中是缺乏的：

$(window).scroll(function(){
     var top = $(this).scrollTop();
     if(top > 150){
         document.getElementById("some_div_element").style.animationName = "some_animation_name";   
     }
});

一个 css 样式属性some_div_element可以用 sth else than 来初始化some_animation_name，因此一旦这个样式属性被滚动位置改变，动画就会被触发：

div.some_div_element {
   background-color:rgb(140, 20, 20);
   animation-name: undefined_bla;
}

...并与 的动画定义一起使用some_animation_name，例如：

@keyframes some_animation_name {
   from {background-color:rgb(140, 20, 20);}
   to {background-color:rgb(200, 20, 20);} 
}

然而，对于 div 元素，它通常不是滚动位置本身，而是元素到例如显示的页面顶部的距离，这对启动动画很重要：

window.onscroll = function() {dist_to_top_function()};
function dist_to_top_function() {
   var dist = document.getElementById("some_div_element").getBoundingClientRect().top;
   if(dist < 600){    // distance in px
         document.getElementById("some_div_element").style.animationName = "some_animation_name";          
   }        
}

js if 语句还可能包含对 div 样式的修改，以使其永久匹配动画的最终结果，例如，

...    
document.getElementById("some_div_element").style.backgroundColor= "rgb(200, 20, 20);";