如何在滚动某些像素后触发css动画答案

【问题标题】：how to trigger a css animation after certain pixels of scroll如何在滚动某些像素后触发css动画
【发布时间】：2014-11-20 19:37:53
【问题描述】：

我有一个页面，其中有三个图像从左到右动画，它们的时间线之间略有重叠。

我试图让动画在垂直滚动 200 像素后开始。

实现这一目标的最佳方法是什么？只有 CSS 还是我需要使用 javascript？

【问题讨论】：

你需要 js。 css 可以根据一些事件来做一些基本的动物，比如:hover，但是它不能检查你滚动了多远并根据它触发一些东西。
谢谢！你知道我可以使用的任何 jquery 或开源 js 吗？
可能需要 3-4 行 jquery 才能附加到滚动条上并进行比较。除了核心 jquery 之外，您不需要其他任何东西。
我对javascript不太熟悉。我去看看。

标签： javascript html css animation scroll

【解决方案1】：

用 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);
}

【讨论】：

当然。你提出了一个普遍的问题，这是一个普遍的解决方案。您需要在 $image 插槽中添加图像 id 并插入要更改的 css 属性。在不了解您的具体问题的情况下，这只是帮助您找到解决方案的一般框架。

【解决方案2】：

你也可以看看这个噘嘴：

https://github.com/Prinzhorn/skrollr

skrollr 可以做的不仅仅是您的想法，而且它很容易处理，并且可以照顾您的设计等等。

【讨论】：