问题标签 [skrollr]

我正在使用Skrollr.js库在页面上进行一些视差滚动。该库使用数据集来指定一些开始和结束 css 代码（基于您的滚动位置）示例：

我需要动态创建一些元素并设置它们的数据集，例如，如果元素看起来像这样：

这可以正常工作：

但是因为我使用的是使用整数作为名称（ data-0 ）的库，所以我被卡住了......我试过这个：

和...

没有运气......还有其他想法吗？

我正在努力将 Skrollr 应用到客户的网站中。我正在使用这样的相对位置：

但是，当我第一次加载页面时，动画似乎不起作用。但在我调整屏幕大小后（例如，在 Firefox 中打开“响应式设计视图”，或打开/关闭 Firebug），动画似乎工作正常。

此问题出现在 Firefox (Mac) 和 Google Chrome (Windows) 中。在 Chrome (Mac) 中，这个问题消失了。

请帮忙看看这个工作演示。我整天都在尝试解决这个问题:( http://goo.gl/scFwV

我正在玩skrollr 插件，但无法实现我想要的，所以寻求帮助。我已经能够实现简单的效果，例如<div id="intro-left" data-0="opacity: 0" data-180="opacity: 1">（意味着一旦用户向下滚动 180，我的名为 intro-left 的 DIV 就会变得可见）

问题是我不喜欢使用滚动距离，因为这只有在所有人都具有相同的屏幕分辨率时才有意义，对吧？

我想做的是告诉 skrollr：“一旦 DIV 位置在屏幕上可见，将 DIV 从不透明度 0 更改为不透明度 1”（换句话说，“一旦用户到达某个点，将 DIV 从不透明度 0 更改为不透明度 1在页面上向下滚动）

这可以通过 skrollr 实现吗？如何实现？

非常感谢

我硬编码了一个 Skrollr 演示页面，效果很好。对数据标签进行硬编码很乏味，所以我开始动态创建 img div。但现在我无法让它工作！我需要另一双眼睛来查看我的代码。我确定我忽略了一些简单的事情。

理想情况下，当您向下滚动时，图像应该会显示为动画（通过切换它们的可见性），但 div 应该保持在页面上的固定位置。
http://moto.oakley.com
有一个很好的 Skrollr 实例。

这是 JS 运行之前的 img div 示例

然后我有一个带有 for 循环的 JS 函数，该循环附加到 img div 并将数据标签递增 20。我认为我对数据的使用不太正确。

一旦 JS 运行，div 看起来像这样，但有 75 个图像。

这是我的完整代码测试链接
http://retropunk.com/files/bps-skrollr/

感谢您的任何提示
-P

我试图让 DIV 在向下滚动时与视口保持一致，我使用了与演示相同的代码。但还是不行。我还在我的网站上使用引导程序，以及 SCROLL-O-RAMA（这有点不必要）。这是我的代码：

我正在用 skrollr 建立一个页面，效果很好！我让它在 Chrome、Firefox 和 IE 中以应有的方式工作。但是，在 Mac 版本 10.7.5 上的 Safari 6.0.5 中，滚动时元素的动画效果非常不稳定。基本上，当我向下滚动时，它不会为关键帧设置动画。相反，它只是根据我滚动的位置跳到某个关键帧。我无法弄清楚为什么它只会在 Safari 中这样做。很抱歉，由于保密协议，我无法发布指向该网站的链接。对此的任何帮助或建议将不胜感激。

我想创建一个具有简单视差滚动效果的网站，其中元素以不同的速度滚动。我尝试使用 Skrollr 库，但我无法让它做我想做的事。我可以使用什么 Javascript 库或技术来轻松定义元素的相对滚动速度？

例子：

我尝试使用本教程：http ://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/ ，但我不能很好地遵循它。我需要一些非常简单的东西，因为我是 Javascript 新手。

所以我在网页设计方面完全是个新手，但我决定开始为自己制作一个展示网站：http ://www.anikmusic.com

让我描述一下我的问题的要点是什么：

• 以前，我在移动浏览器中遇到固定定位元素跳跃和做古怪事情的问题，所以我决定创建一个网站，如您所见，不使用任何固定定位元素，而是使用绝对定位的标题和适合浏览器的主体，并缩放到其高度和宽度。

• 正文充当准 iframe，是内容的窗口。确实，它<div class="content" id="skrollr-body">里面包含了所有真实的内容，当您查看该站点时，您实际上正在滚动浏览的正是这个 div、.content。所有的部分，家庭，生物，歌曲等都在内容 div 中。

• 如果您查看内容 div 中的代码，您会发现“歌曲”、“乐谱”和“艺术”部分有一个称为“媒体内容颜色底衬”的东西。它应该看起来像这样：

  <div class="media-content-color-underlay skrollable skrollable-before" data-bottom-top="background-color:hsla(4,55%,48%,0.0);" data-top="background-color:hsla(4,55%,48%,0.7);" data-top-bottom="background-color:hsla(144,48%,44%,0.7);" style="width: 700px; background-color: rgba(190, 64, 55, 0);"></div>

• 嗯，这就是其中之一。还有另外两个，它们一个位于另一个之下，因此当您滚动时，底层会平滑地从红色变为绿色，再变为蓝色，然后在您开始滚动经过艺术部分时消失。现在，乐谱部分下方的底层被卡在红色，艺术下方的一个被卡在绿色，歌曲下方的一个被卡在 0 不透明度。

• 现在问题来了。通常，这可以正常工作，但是对于花哨的新布局，内容实际上位于主体内的 div 内，Skrollr 似乎无法判断元素何时进入视图，何时进入视图，当它不在视线范围内时等。我相信 Skrollr 正在使用窗口作为其参考框架，但我希望它使用带有 class="content" 的 div 作为其参考框架。

• 我尝试添加id="skrollr-body"到上述 div 中，但无济于事。

关于我下一步应该做什么的任何指示或提示？

使用 RequireJS 使用 skrollr 和 skrollrMenu 时出现错误。这是我的 main.js 文件：

当我加载页面Uncaught TypeError: Cannot call method 'relativeToAbsolute' of undefined时，在 skrollr.menu 文件中出现错误：

然后是 的输出console.log(s)。这是否意味着skrollr.menu.init之前正在运行console.log(s)？

我正在尝试使用 skrollr 解决移动浏览器中 CSS 固定背景图像的问题。我已经用一个背景图像和 skrollr 构建了我的文档架构的精简版本，在这里：http ://lkoren.github.io/2013/10/16/skrollrTest.html

文件结构为

在我的 2013 Nexus7 skrollr 上，对 Opera 和 Chrome 没有影响。在 FireFox 中，它往往会导致大量的卡住和卡顿。

在桌面 FireFox 和 Chrome 中它工作正常。我通过设置验证了它实际上在做某事

并获得视差效果。