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

问题描述

我要寻找一种方式来CSS3过渡链接到一个滚动事件。我在寻找类似的功能 http://nizoapp.com/ ，在那里，当你到了一定滚动点上的某些元素会动议这一页。我知道你会打电话与jQuery scroll事件（使用偏移和滚动），但我很好奇，如果有一种方法可以再使用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的航点插件。它使每当你滚动到一个元素很容易地执行功能，并且还可以应用基于当前什么是鉴于班。然后，您可以使用这些触发CSS动画，你后。

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.

更新 - 我刚刚碰到的Scrollorama 的jQuery插件。笔者确实状态，它不是经过全面的测试，但它的设计做precisely你是什么之后，肯定看起来像一个良好的起点。

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屋！