如何在滚动的某些像素之后触发css动画

我有一个页面，其中有三个图像从左到右进行动画，其时间线之间有轻微重叠。如何在滚动的某些像素之后触发css动画

我想让动画在200px垂直滚动后开始。

达到此目的的最佳方法是什么？只有CSS还是我需要使用JavaScript？

来源

2014-09-25 Ken Ryan

你需要js。 css可以根据一些事件来做一些基本的动物，比如'：hover'，但是它不能检查你滚动了多少，并根据它来触发某些东西。 – 2014-09-25 21:42:45

谢谢！你知道我可以使用任何jQuery或开源js吗？ – 2014-09-25 21:46:13

它可能需要3-4行jQuery来附加到滚动甚至比较的东西。你不需要核心jquery以外的任何东西。 – 2014-09-25 21:46:49

尝试像这样使用jQuery ..

/// you probably want to set this dynamically 
    var change1 = 200; 
    $(document).scroll(function() { 

     // you might need to throttle the listener 
     if (Math.random() < 0.15) { 

      if($(this).scrollTop() > change1) { 
       updateCSS(var); 
    }}}) 


function updateCSS(var) { 
    $image1.css({attribute: x); 
    $image2.css({attribute: y); 
    $image3.css({attribute: z); 
}

来源

2014-09-25 21:56:25

我是否需要使用来自我的最终信息编辑任何代码？ – 2014-09-25 22:13:43

当然。你提出了一个普遍的问题，这是一个通用的解决方案。您需要将图像ID添加到$ image插槽中，然后插入要更改的CSS属性。在不了解更多关于您的具体问题的情况下，这只是让您走向解决方案的一般框架。 – 2014-09-25 22:15:12

.css上的文档如果您需要它们：http://api.jquery.com/css/#css2 – 2014-09-25 22:39:45

你可能会检查这个噘嘴太：

https://github.com/Prinzhorn/skrollr

skrollr可以做很多事情比你心目中正是多，但它很容易处理，并可以照顾你的设计等等。

来源

2014-09-25 22:35:09 bamabacho

不错的示例：http://prinzhorn.github.io/skrollr/examples/anchors.html – 2014-09-25 22:47:40

如何在滚动的某些像素之后触发css动画

回答

相关问题