3

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

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

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

我只是想知道两件事：

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

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

谢谢你们！

于 2012 年 9 月 17 日 14.14 编辑（+1 GTM 时间）如果有人感兴趣，那应该是我们用来解决问题的想法代码：

$(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 类是： .animation { width: 300px; 高度：300px：-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 可以如何改进它？

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

4

1 回答 1

1

从您的评论中：

比如说，我想将用户的滚动组合成一个过渡效果。因此，即一旦用户滚动了 750 像素，我希望一个对象以淡入淡出过渡出现。如何将滚动因子与动画联系起来？

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

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