Jquery 使用滚动事件链接CSS3动画/变换

我正在寻找一种将CSS3转换链接到滚动事件的方法。我正在寻找类似的功能，当您到达页面上的某个滚动点时，某些元素会移动。我知道您必须使用jQuery调用scroll事件（使用offset和scroll），但我很好奇是否有方法在动画部分使用CSS3，或者是否需要在jQuery中完成。无论哪种方式，我都希望得到一些帮助，帮助我快速启动这项工作。谢谢你的帮助。

一个好的起点可能是。无论何时滚动到某个元素，都可以轻松地执行函数，还可以基于当前视图应用类。然后，您可以使用它们来触发您所追求的CSS动画

---

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

无法将特定CSS链接到滚动位置。你需要加入一些javascript胶水来达到这个效果。我最喜欢的方法是绑定到window

onscroll

事件并将动画代码放在那里。

我使用的是scrollTop（）方法

这将添加或删除具有我的css动画属性的类

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

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

---

没问题-我发现自己经常链接到它，因为它对很多不同的事情都很有帮助。好主意！我前段时间遇到了航路点，但忘了。这可能很有效。谢谢

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

#my-div {
    width:200px;
    height:200px;
    background-color:red;
}
#my-div.animate {
    transition: rotate(30deg);
}