滚动某些像素后如何触发CSS动画

Question

我有一个页面，其中包含一个部分，其中有三幅图像从左到右进行动画处理，它们的时间线之间略有重叠。

我试图使动画在垂直滚动200px之后开始。

实现此目标的最佳方法是什么？ 仅CSS还是我需要使用javascript？

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

Answer 2

您也可以检查此p嘴：

https://github.com/Prinzhorn/skrollr

skrollr不仅可以实现您的想法，还可以做很多事情，但是它非常易于操作，可以照顾您的设计，甚至还有更多。