📜  当对象出现在屏幕上时,jquery滚动制作动画 - Javascript(1)

📅  最后修改于: 2023-12-03 15:09:50.991000             🧑  作者: Mango

当对象出现在屏幕上时,使用 jQuery 滚动制作动画

如果您想要为网站添加些许动画效果,可以使用 jQuery 的滚动事件制作动画。这里是一段代码示例:

$(window).scroll(function() {
    $('.my-object').each(function() {
        var imagePos = $(this).offset().top; // 获取对象距离页面顶部的距离
        var topOfWindow = $(window).scrollTop(); // 获取当前窗口滚动的距离
 
        if (imagePos < topOfWindow + 400) { // 当对象出现在屏幕上方 400 像素时触发
            $(this).addClass("slideRight"); // 给对象添加类名,触发动画效果
        }
    });
});

代码片段的解释:

  1. $(window).scroll 表示当窗口滚动时触发事件。

  2. .my-object 表示您想要添加动画效果的对象。

  3. $(this).offset().top 表示获取对象距离页面顶部的距离。

  4. $(window).scrollTop() 表示获取当前窗口滚动的距离。

  5. if (imagePos < topOfWindow + 400) 表示当对象距离页面顶部的距离小于当前窗口滚动的距离加上 400 像素时触发。

  6. $(this).addClass("slideRight") 表示给对象添加 slideRight 类名,触发动画效果。

您可以根据需要更改代码来实现不同的动画效果。