Question

我正在寻找一种将CSS3过渡链接到滚动事件的方法。我正在寻找与http://nizoapp.com/类似的功能，当你到达页面上的某个滚动点时，某些元素会移动。我知道你必须用jQuery调用scroll事件（使用offset和scroll），但我很好奇是否有一种方法可以将CSS3用于动画部分，或者如果需要在jQuery中完成。无论哪种方式，我都希望得到一些关于如何让这个开始工作的帮助。谢谢你的帮助。

Answer 1

一个好的起点可能是the jQuery Waypoints plugin。只要滚动到元素，就可以轻松执行函数，还可以根据当前视图中的内容应用类。然后，您可以使用它们来触发您所追求的CSS动画。

更新 - 我刚刚遇到the Scrollorama jQuery插件。作者确实声明它没有经过彻底的测试，但它的设计目的正是你所追求的，并且看起来确实是一个很好的起点。

Answer 2

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

Answer 3

我正在使用scrollTop（）方法。

这将使用我的css动画属性

添加或删除一个类

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

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

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

将CSS3动画/变换与滚动事件链接

3 个答案: