问题标签 [superscrollorama]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
315 浏览

jquery - SuperScrollorama,TweenMax 持续时间是多少?

我正在尝试使用 SuperScrollorama 来实现一个具有视差的小型站点。
我有几个问题,但我会从这个开始:durationTweenMax 函数中的属性是用来做什么的?

我知道这个属性是用来设置动画时长的(在TweenMax库中),但是在SuperScrollorama中是如何使用的呢?当 scrollDuration 大于 0 时,
我找不到明显的差异。

0 投票
0 回答
421 浏览

javascript - 在 Superscrollorama 中使用滚动条滚动问题

我正在开发一个非常动画的网站,该网站广泛使用 superscrollorama 的 pin 功能来暂停滚动,同时仍然根据滚动位置为某些元素设置动画。

问题是稳定性和优化之一。当然,客户希望网站超级稳定且无故障,即使在用鼠标抓住滚动条并上下晃动时也是如此。幸运的是,这是让问题抬起头来的唯一方法,但它们确实很丑。

当使用滚动条上下翻动页面时,某些元素会“丢失”或“错位”。我怀疑他们的位置没有被适当地重置。当固定的元素被取消固定时,屏幕会变白,直到下一个部分被固定。您可以看到这一点,尤其是在上下翻动页面时,停在页面顶部。尝试从那里向下滚动。甚至一些动画在最初的办公场景之后也只是在场景中进行了部分渲染。我尝试将每个受影响的 img 和 divs 位置重置为 unpin 时的绝对位置,但无济于事。我还强制在每个影响 img 和 div 上设置一个初始固定位置,但仍然存在问题。

是不是发生的太多了,浏览器/计算机无法足够快地渲染所有内容,丢弃未执行的 JavaScript 并使动画仅部分完成?

我是 Web 开发领域的新手,尤其是前端的东西。非常感谢任何帮助。

编辑:
我最终废弃了所有的 Superscrollorama 代码并改用 Skrollr。现在没有任何故障发生 + 使用 Skrollr 可以更轻松地使网站响应。甚至可以在一定程度上在手机/平板电脑上工作。

网址:TalentVisor

0 投票
1 回答
459 浏览

superscrollorama - 滚动视差不起作用

我正在研究具有视差效果的 Wordpress 主题。仔细观察,这个主题使用的是 scrollorama 脚本。( http://johnpolacek.github.io/scrollorama/ )

当我最初下载主题时,效果很好,但由于我不得不大量定制这个主题,效果不再有效。滚动时应该从 A 移动到 B 的图像现在只是停留在 A 并且不会移动。很明显,我所做的事情已经在工作中使用了扳手,但之前从未使用过 scrollorama,我不确定要寻找什么。

我专门查看了scrollorama部分的原始主题代码,一切都完美匹配,所以有没有人有任何可能导致问题的想法?

会不会只是兼容性问题?除了scrollorama,我唯一使用的是添加图像滑块http://www.menucool.com/responsive-slider.aspx

这应该是用于 scrollorama 的所有代码:

HTML

CSS

0 投票
1 回答
2245 浏览

jquery - SuperScrollOrama 和 TweenMax 淡入淡出滚动

当您向下滚动页面时,我试图淡入和淡出一系列彩色 DIV。

我对 div 的设置很简单:

这是我的 superscrollorama/tweenmax 脚本:

当您向下滚动页面时,一切都会淡入,但我希望一个框在下一个框淡入时淡出,我可能做错了,但我找不到很多文档。

这就是我正在做的事情: http: //emptywalrus.com/scroll/

0 投票
1 回答
1952 浏览

html - 我如何使用scrollorama

我已经尝试了所有方法,但我似乎无法让 scrollorama 使用它,我不知道为什么。控制台中有错误提示“未捕获的 ReferenceError:未定义scrollorama”

JavaScript:

现场演示:

http://matthunzinger.com/

太感谢了!

0 投票
1 回答
779 浏览

javascript - 如何使用 scrollorama 插件在特定时期固定父 div

我正在使用“ scrollorama ”插件来实现视差站点

我想在特定时期固定动画元素的父 div,然后取消固定父 div 并为下一段代码设置动画......

请查看此链接以了解我的意思

在这个站点中,我想在站点徽标“原型”向上移动到其固定位置时延迟动画的第一部分,然后第一个 li 孩子开始进入场景,所以我想阻止 li 开始向上移动并且下一段进入现场

我知道这个动作被称为“ pin ”,但我不知道如何使用它......

0 投票
1 回答
203 浏览

javascript - 动态绑定/取消绑定 SuperScrollorama 补间

我正在尝试动态绑定/取消绑定 SuperScrollorama 补间。在取消绑定时,我还需要将补间元素重置为其默认样式。就我而言,我需要根据浏览器宽度进行绑定/取消绑定。我以为我可以做这样的事情:

当然,这不是特别优雅,也不起作用。

0 投票
1 回答
600 浏览

javascript - superscrollorama 和 greensock 动画不起作用

我正在使用 superscrollorama 在网站上工作,但它不起作用。所以我决定做一个练习,但这个简单的代码仍然不起作用。我已经在上面的文件中包含了所有内容,你只需要使用 greensock 的 TweenMax.min.js 和 jquery.superscrollorama.js 来检查文件。我真的很沮丧,知道,我知道只有微小的错误,但任何人都可以帮我弄清楚。提前致谢。

0 投票
1 回答
2431 浏览

jquery - 覆盖 ScrollMagic 中的全局场景选项

我正在尝试使用 ScrollMagic 构建一个站点,但我遇到了一个问题:我将 reverse 选项定义为全局错误,我似乎无法在特定场景中覆盖此选项。

我有几个场景,只需要一两个场景就有反向动画。全局设置 reverse 选项并为特定场景设置反向动画会容易得多。

这是我的代码:

. . .

动画不会向后播放,因此在场景中设置的 reverse: true 属性似乎不会接管全局设置。

有可能做到这一点吗?希望你能帮我!谢谢!

0 投票
0 回答
94 浏览

jquery - 尝试学习 Scrollorama

周末我尝试学习scrollorama,过去我尝试学习和使用很多jquery插件,从来没有遇到过任何问题。然而,这个真的让我很困惑。

我搜索了 stackoverflow 和其他有关 superscrollorama 教程的网站,但是没有一个指定具体的方法。

为此,我在这里做了一个小提琴。

http://jsfiddle.net/4o46jdj7/1/

这是我想要做的。红色的 div 应该固定,然后 #text-1 应该向上滚动并淡出,在它淡出后,底部的文本应该向上滚动,一旦完成,它应该取消固定并移动到页脚。

这是我正在使用的代码