问题标签 [skrollr]

我有两列我想用触发器分别制作动画。据我了解：Skrollr 只允许在页面上进行一次实例化。有谁知道是否可以有多个可以关闭和打开的实例？

我在这里开始了一个工作示例：

• 当单击“激活！”时，灰色列将激活 Skrollr 实例。按钮。（“销毁！”按钮将删除它的实例。）
• 我想将 Skrollr 动画隔离到灰色列，但正如您在此示例中看到的那样，黄色/橙色列也被激活。

所以我正在使用Prinzhorn skrollr创建一个网站，其中包含文本和图像随着页面的滚动或滑动而滚动。一切正常，但我想我发现了一个性能错误。skrollr 的工作方式是使用带有数字作为名称的数据属性，而数字是动画应该发生的点。数据属性的值是 css 规则。

我必须使用display:none一些隐藏或可见的代码块，具体取决于屏幕大小。这是 b/c 数据属性中的数字有时对于移动屏幕来说太大并且动画发生在错误的时间。

无论如何，问题是隐藏的代码块中的 css 正在计算，即使该块设置为display:none.

在下面的代码中，您可以看到移动导航块在桌面宽度下在 Chrome 的开发工具中重新计算的不透明度。

关于如何防止这种情况的任何想法？就像我说的那样，一切看起来和工作都很好，但我注意到移动设备有一些轻微的滞后，我打赌它是 b/c 设备必须进行两次相同的计算。

如何在 Skrollr 中运行一次动画，然后将其杀死？

我试过了：

• 该beforerender方法会杀死所有动画
• 寻找设置单个 Skrollr 实例的方法，但它是一个单例
• 删除或重命名对象的attributes
• null化对象的className
• 切换 CSS 类

每次，看起来这些值都缓存在 Skrollr 中，并且不管我如何努力都会触发。我在这里想念什么？

我目前正在制作一个使用 Skrollr 的网站，但有一件事我无法完成。我希望我的网站在底部加载。有一个带有正常滚动的注册表单，只有在您单击提交按钮后，才能浏览网站内容并查看 Skrollr 效果。使用 skrollr 执行此操作的最佳方法是什么？

我正在使用 Skrollr.js 为图像序列设置动画。我从http://moto.oakley.com站点如何处理图像序列中获得灵感，并构建了一些脚本来帮助我自动将一系列图像写入 DOM。然后，我使用 Skrollr在关键滚动位置更改display:none;为。display:block我的脚本在调度完整事件之前预加载所有图像，然后我初始化 Skrollr 并允许交互。

所以，基本上我有一个<div>包含一堆这些的容器：

现在，这在 Chrome 和 FireFox 中运行良好（自然），但 Internet Explorer 11 在第一次滚动页面时似乎在渲染图像时出现问题。换句话说，当我第一次加载页面并滚动时，图像会像没有预加载一样闪烁到位，但随后的滚动动画非常好。就像 IE11 没有将图像渲染到内存中一样，所以在第一次显示任何图像时，屏幕的绘制速度会有延迟。

我不认为 Skrollr 是问题所在。也许我应该使用一些神奇的 CSS 设置。

有没有人有任何制作图像序列的技巧，所以即使在 Internet Explorer 中，它们每次看起来都非常流畅？！？

谢谢！

我正在使用 skrollr.js ... http://roy-coy.in

我希望我的网站滚动到

roy-coy.in/index.php#scene-01

如果我没有错

这个 url 应该把我带到 id="scene-01"....的元素，但它不是。相反，它会将我带到主页

即，到顶部...

这是html代码：

我已经删除了无用的内容以便于调试......

然而这里是完整的 index.php 文件

https://www.dropbox.com/s/mchuzi2em2cumoa/index%20-%20Copy.php

我正在这个网站上工作http://andreas-berg.dk/wordpress/ - 在所有六边形的部分内，我已经在背景图像上设置了视差效果。就在这里：https ://www.dropbox.com/s/swi9zab8nn5l1hj/Screenshot%202014-04-14%2010.12.22.png

如果您的浏览器窗口已最大化，则什么也没有，但是一旦您调整窗口大小（仅 1 个像素），背景图像就会被向下推。知道是什么导致这种情况发生吗？如果我调整它的大小，刷新浏览器，它工作正常，但是做浏览器调整大小而不是用户友好的所有事情都是愚蠢的。

我正在寻找一种使用 Skrollr 插件设置相对于文档高度（而不是视口高度）的百分比的方法。这是因为我想制作一个滚动动画，当您使窗口变长或变小时，整个页面都会缩放。

我试过使用“data-0p-start”和“data-100p-start”，但这表现得像相对符号而不是绝对符号。

还有另一种方法可以实现这一目标吗？

我目前正在尝试使用 Twitter Bootstrap 框架并使用 Skrollr 插件来实现出色的视差效果。但是在平板电脑和智能手机上查看我的网站时，我遇到了滚动问题。我注意到有一小段 javascript 代码导致网站无法在移动设备上滚动。

当我删除这段小代码时，网站突然变得可滚动，但导致不同的视差板消失。有没有人也有这个问题，你有这个问题的解决方案。

解决方案：（tnx 的评论和帮助）

我正在尝试了解您如何使用 Skrollr 进行小的过渡和移动。

我想转换一个元素，然后将其移动到页面顶部。

HTML：

CSS：

JS：

如果我使用 transform-origin: 0 0，效果很好（顶部不变），但如果我使用默认值（transform-origin: 50% 50%），元素的顶部位置会发生变化，我需要使用顶部：-XX % 将元素放置在 0% 位置。

我认为解决方案是调用：

在我的代码中，正如我在代码（或 s.refresh()）中评论的那样，但它不起作用，我的元素只在顶部附近移动一些像素。

我需要在其他地方或以不同的方式调用 refresh() 吗？

谢谢！

编辑：

示例 1 - 将一个元素移到顶部（没问题）

http://cokeperez.com/stack1.html

示例 2 - 缩放元素并移动到顶部（元素不移动到顶部）

http://cokeperez.com/stack2.html

示例 3 - 缩放元素并移动到顶部调整值（不完美但有效）

（与stack3.html相同的链接，我不能发布超过2个链接）