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

Posted 2023-03-06

【中文标题】结合用户滚动+动画css3/Javascript

【英文标题】：Combining users' scroll + animation css3/Javascript

【发布时间】：2012-09-09 07:50:18

【问题描述】：

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

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

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

我只是想知道两件事：

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

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

谢谢你们！

编辑于 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 可以如何改进？

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

【问题讨论】：

嗯 +1，横向滚动就是这样一个例子：tympanus.net/codrops/2011/12/05/… 查看源代码。写的很好。

我不清楚你在寻求什么帮助。您是在问如何跟踪滚动条的位置吗？一旦你有了滚动条的位置，你想如何应用那个动画？有数百万种可能的动画，因此如何将滚动位置应用于动画完全取决于您到底要做什么。

@Ashwinkumar 谢谢！我看到那里发生了什么事！我稍后会尝试一下！干杯! :)

@jfriend00 比如说我想把用户的滚动组合成一个过渡效果。因此，即一旦用户滚动了 750 像素，我希望一个对象以淡入淡出过渡出现。如何将滚动因子与动画联系起来？我认为一旦在那里我可以自己找到如何添加不同的动画:) >>inb4 如果您不想编写代码并可以指出我，我对 JS 有点菜鸟 >>inb4一个很好的参考，那也很酷:)干杯

【参考方案1】：

来自您的评论：

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

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

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

【讨论】：

所以如果我写类似： $(document).ready(function() $('section[data-type="example"]').scroll(function() if ( scrollTop() > '750px') $(".animation").toggleClass("animated"); ); CSS .animation width: 300px; height: 300px: -webkit-transition: width 2s ease, height 2s 缓动；-moz-transition：宽 2s 缓动，高度 2s 缓动；-o-transition：宽 2s 缓动，高度 2s 缓动；-ms-transition：宽 2s 缓动，高度 2s 缓动；过渡：宽 2s 缓动，高度 2s ease; .animated width: 400px; height: 400px; 那应该会变魔术吧？

对不起，我是个菜鸟，我知道 :D 我也不能在今晚之前尝试代码，等不及大声笑

@JohnFunk - 请不要在 cmets 中放入多行代码。这是完全不可读的。如果您必须添加更多代码，请将其添加到问题的末尾（您可以在其中适当地格式化）并发布指向它的评论。除了.scrollTop() 是一个 jQuery 方法，而不是一个普通函数之外，您的代码看起来像一般的想法。

很抱歉，真的...这是我第一次在这里发帖，感谢您指出正确的行为而不是粗鲁，我真的很感激 :) 有没有我可以调用的 JS 函数而不是.scrollTop()?

@JohnFunk - 我不知道你到底想做什么，但也许你想要的是：if $(this).scrollTop() > 750)。请参阅here in the jQuery doc 了解更多信息。