如何在滚动特定像素后触发css动画

how to trigger a css animation after certain pixels of scroll

本文关键字：css 动画 像素 滚动      更新时间：2023-09-26

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

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

实现这一目标的最佳方式是什么？仅使用CSS还是需要使用javascript？

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

您也可以检查这个pout：

https://github.com/Prinzhorn/skrollr

skrollr可以做的不仅仅是你想做的，但它很容易处理，可以处理你的设计等等。

相关文章：