将 CSS3 动画/变换与滚动事件联系起来

Posted 2023-03-06

【中文标题】将 CSS3 动画/变换与滚动事件联系起来

【英文标题】：Linking CSS3 Animations/Transforms with Scroll Event

【发布时间】：2011-12-31 10:07:58

【问题描述】：

我正在寻找一种将 CSS3 转换链接到滚动事件的方法。我正在寻找与http://nizoapp.com/ 类似的功能，当您到达页面上的某个滚动点时，某些元素会移动。我知道您必须使用 jQuery 调用滚动事件（使用偏移量和滚动），但我很好奇是否有一种方法可以将 CSS3 用于动画部分，或者是否需要在 jQuery 中完成。无论哪种方式，我都希望得到一些帮助，帮助他们快速开始让它发挥作用。感谢您的帮助。

【参考方案1】：

我正在使用 scrollTop() 方法。

这将使用我的 css 动画属性添加或删除一个类

$(window).scroll(function (event) 
    var y = $(this).scrollTop();

    if (y <= 300) 
        $('#my-div').addClass('animate');
    
    else
    
        $('#my-div').removeClass('animate');                
    
);

在 html 中：

<div id="my-div">
    <p>Lorem ipsum dolor sit amet</p>
</div>

在css中：

#my-div 
    width:200px;
    height:200px;
    background-color:red;

#my-div.animate 
    transition: rotate(30deg);

【参考方案2】：

一个好的起点可能是the jQuery Waypoints plugin。每当您滚动到某个元素时，它都可以轻松执行功能，并且还可以根据当前视图应用类。然后，您可以使用它们来触发您所追求的 CSS 动画。

更新 - 我刚刚遇到the Scrollorama jQuery 插件。作者确实声明它没有经过彻底的测试，但它的设计目的正是为了满足您的需求，而且看起来绝对是一个很好的起点。

【讨论】：

没问题 - 我发现自己经常链接到它，因为它对很多不同的事情都有帮助。

好主意！不久前我遇到了 Waypoints，但忘记了它。这可能会很好。谢谢！

【参考方案3】：

无法将特定 CSS 链接到滚动位置。您将需要包含一些 javascript 胶水来实现该效果。我最喜欢的方法是绑定到窗口onscroll 事件并将您的动画代码放在那里。