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

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

来源

2011-11-17 Andrew

一个好的起点可能是the jQuery Waypoints plugin。当你滚动到一个元素时，它可以很容易地执行一个函数，并且还可以根据当前正在查看的内容来应用类。然后，您可以使用这些触发您之后的CSS动画。

UPDATE - 我刚刚碰到the Scrollorama jQuery插件。作者说，它没有经过彻底的测试，但它的目的是做你正在做的事情，绝对看起来是一个很好的起点。

来源

2011-11-17 14:47:02 CherryFlavourPez

这是一个伟大的插件，感谢链接到它。 –

没问题 - 我发现自己连接到它很多，因为它对一堆不同的东西真的有帮助。 – CherryFlavourPez

好主意！前段时间我遇到了Waypoints，但忘记了它。这可能很好。谢谢！ – Andrew

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

来源

2011-11-17 15:32:03

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

来源

2013-08-28 13:58:28 rafawhs

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

回答

相关问题