结合用户滚动+动画css3/Javascript

Question

到目前为止关于 SO 的第一篇文章 :)

我正在创建一个结合 css3 + javascript 的视差网站。

我遵循了this 教程，我不得不说它让我对这个主题有了相当的了解。

我只是想知道两件事：

1. 如何平移 X 轴上的运动？
2. 最重要的：如何将用户的滚动与动画结合起来？

我已经看到那里有很多插件，但我宁愿自己开发一个解决方案，而不会使代码过于繁琐和复杂。你能否指出一些好的资源，这将启发我了解这项技术？

谢谢你们！

编辑于 17/09/12 14.14（+1 GTM TIME） 万一有人感兴趣，那应该是我们可以用来解决问题的想法代码：

$(document).ready(function() { $('section[data-type="example"]').scroll(function() {

// If the user scroll as much as we need, in this instance 750px
if (scrollTop() > '750px') {
  // switch its class from ".animation" to ".animated" 
  $(".animation").toggleClass("animated"); 
}

}); });

CSS 类将是： 。动画 { 宽度：300px； 高度：300 像素： -webkit-transition：宽 2s 缓动，高 2s 缓动； -moz-transition：宽 2s 缓动，高 2s 缓动； -o-transition：宽 2s 缓动，高 2s 缓动； -ms-transition：宽 2s 缓动，高 2s 缓动；过渡：宽 2s 缓动，高 2s 缓动； }

.animated { 宽度：400px;高度：400px； }

如我们所见，在“.animation”中我们会找到初始大小和动画，在“.animated”中我们将打印我们想要实现的目标。

这要感谢@jfriend00 提供的提示。不幸的是，我还没有机会尝试它，所以请随时改进它。我在这里写它是因为似乎有人对这个主题感兴趣，并且之前我将它发布在评论中使其无法阅读:)

另外，Jfriend00 告诉 .scrollTop() 是一个 JQuery 方法，而不是一个普通的函数。您认为使用纯 JS 可以如何改进？

提前感谢我的语法错误和菜鸟；我不是英语母语，我对编程很陌生:)

Answer 1

来自您的评论：

假设例如，我想将用户的滚动组合到一个 过渡效应。所以，即一旦用户滚动了 750px，我想要 以淡入淡出过渡出现的对象。我如何链接 动画的滚动因子？

这是处理该特定示例的一种方法：

1. 您将为滚动事件注册一个事件侦听器。
2. 在滚动事件处理程序中，您将检查当前滚动位置并决定是否要采取行动（例如，scrollTop 大于 750 像素）。
3. 触发 CSS3 动画的最简单方法是向对象添加类名。如果该对象已为该新类分配了 CSS，并且该对象已配置为通过将类名称添加到对象而更改的任何属性上的 CSS 过渡，则添加该类时将启动 CSS3 动画。