链接CSS3动画/转换与滚动事件 [英] Linking CSS3 Animations/Transforms with Scroll Event

问题描述

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

I am looking for a way to link CSS3 transitions to a scroll event. I'm looking for similar functionality to http://nizoapp.com/, where certain elements would move when you get to a certain scroll point on the page. I know you would have to call the scroll event with jQuery (using offset and scroll), but I am curious if there is a way to then use CSS3 for the animation portion or if that needs to be done in jQuery. Either way, I'd love some help on how to get a jump start on getting this to work. Thanks for the help.

推荐答案

一个好的起点可以是 jQuery Waypoints插件。它使得当你滚动到一个元素时，很容易执行一个函数，也可以应用基于当前在视图中的类。

A good starting point could be the jQuery Waypoints plugin. It makes it easy to execute a function whenever you scroll to an element, and can also apply classes based on what's currently in view. You could then use those to trigger the CSS animations that you're after.

UPDATE - 我刚刚遇到了 Scrollorama jQuery插件。作者说，它没有经过彻底的测试，但它的设计是为了做你正在做的，而且绝对看起来像一个好的起点。

UPDATE - I've just come across the Scrollorama jQuery plugin. The author does state that it's not been thoroughly tested, but it's designed to do precisely what you are after, and definitely looks like a good starting point.

这篇关于链接CSS3动画/转换与滚动事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！