Question

我想尝试做的是当滚动条达到某个位置时，通过CSS3动画一些HTML。

我浏览了 jQuery 插件，创建了许多有趣的东西，例如视差或谐波卷轴，而我发现的最接近的是流行的 lazy load ，这会延迟加载滚动页面时的图像。我想做的就是这样，但是使用动画 div 或 img 或 a 。

我希望有人能指导我一些能帮助我的好插件。

提前致谢。

Answer 1

您需要将jQuery scrollTop()函数与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";   
     }
});

some_div_element的css样式属性可以用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);";

在滚动位置上动画HTML元素

3 个答案: