Tag: skrollr

Skrollr.js插件不在Parallaxing内部Bootstrap Carousel – 提供小提琴: 我对Parallax和平滑滚动的SKrollr.js插件有问题。一切正常，除了Bootstrap旋转木马，并且我确定任何旋转木马。它显然是一个显示：当插件在加载时设置自己并且无法看到任何.item类时没有问题。但我无法弄清楚如何让Skrollr在渲染时看到所有幻灯片/ .item类。我甚至试过这种东西。我的Skrollr标记不是代码总是适用于我的问题。 Skrollr Markup data-10p-top-bottom=”background-position-y: 100%;” data-bottom-top=”background-position-y: 0%;” CSS .displaying { display: block !important; } JS var sk = skrollr.init({ forceHeight: false, beforerender: function(data) { $(“.item”).addClass(‘displaying’); }, render: function(data) { $(“.item”).removeClass(‘displaying’); } }); 编辑我在这里为它制作了一个JSFiddle，或者你可以在这里看到全屏调试对不起，我是模糊和一般的，因为我知道我的HTML是坚实的。检查小提琴。滑块function很好，它的Skrollr无法在运行时看到隐藏的幻灯片，这是问题所在。我只需要一个更好的解决方案来解决这个问题

如何进行水平视差滚动: 我正在使用最新版本的Bootstrap，JQuery和Skrollr。我希望有一个静态背景和一些场景，当您通过视差滚动滚动时。我可以在你滚动时制作场景，但我正在寻找一种方法来显示你没有向下移动页面。我想制作一个像这个图像的场景：注意它是如何向右 – 左移动但从未出现过你实际上是在向下滚动页面。这是我能解释的最好的。似乎无法找到任何好的教程来实现这一目标。任何朝着正确方向的帮助都会很出色。

使用skrollr相对于元素，而不是窗口: 所以我在网页设计方面总是新手，但我决定开始为自己展示一个展示网站： http ： //www.anikmusic.com 让我描述一下我的问题的主旨是什么：以前，我遇到了固定定位元素在移动浏览器中跳跃和搞怪的问题，因此我决定创建一个网站，正如您所看到的，它不使用任何固定定位的元素，而是使用绝对定位的标题和适合浏览器的主体，并缩放到它的高度和宽度。身体充当准iframe，是内容的窗口。实际上，正是这个包含了其中的所有真实内容，并且正是你在寻找时实际滚动的div，.content在现场。所有部分，家庭，生物，歌曲等都在内容div中。如果你看一下内容div中的代码，你会发现“歌曲”，“分数”和“艺术”部分都有这个叫做“媒体内容 – 颜色 – 底层”的东西。它应该看起来像这样：嗯，这是其中之一。还有另外两个，它们一个位于另一个之下，因此当您滚动时，衬垫会平滑地将颜色从红色变为绿色再变为蓝色，然后在您开始滚动到艺术部分后消失。现在，乐谱部分下面的衬垫被卡在红色，艺术品下面的那个被卡在绿色，而歌曲下的那个被卡在0不透明度。现在这是问题所在。通常情况下，这可以正常工作，但是对于新的布局，内容实际上在body内部的div内部，Skrollr似乎无法分辨元素何时进入视图，何时处于视图中我认为，Skrollr使用窗口作为参考框架，但我希望它使用带有class =“content”的div作为其参考框架。我尝试将id=”skrollr-body”到上述div中，但无济于事。关于我接下来应该做什么的任何指示或提示？

问题：使用Skrollr进行水平滚动效果: 我想创建一个由skrollr控制的水平动画。向下滚动，我的页面元素必须从容器的左侧移动到右侧。假设我的元素具有相同的宽度，我将滚动数据从100％设置为0％并且它可以工作。但是，如果我的图像有不同的宽度呢？此外，我想保留不透明度动画，以创建这种淡入淡出效果。这是HTML代码：而CSS： #container { background-color:black; width:500px; height:300px; overflow:hidden; } div { position:fixed; } .bg { width:500px; height:300px; } 这是小提琴演示

暂停滚动到下一个’滑动’直到所有动画完成: 我正在为Skrollr滑块创建一个“有限的”可视化构建器。它允许用户构建由页面上相互位于一起的幻灯片（html section标记）组成的滑块，每个幻灯片包含许多应用了Skrollr数据属性/动画（关键帧？）的html元素。有没有办法暂停幻灯片（前进到下一张幻灯片），直到所有内部元素都完成了动画？我知道pausing.html的例子，它展示了我需要的东西，但这些“幻灯片”已修复，可能pausing.html我的用户带来问题。滑块将被放入WordPress网站主题，大多数元素都没有修复。因为幻灯片内容是如此动态和不可预测，很难知道锁定滚动多长时间？希望有可能做到这一点？我的困境的例子： https://stackoverflow.com/questions/32238511/pause-scrolling-to-next-slide-till-all-animations-are-complete/…. Some regular WordPress page content (Navbar, Header maybe posts, etc.) // Pause this slides scrolling till all child elements have completed their animations // Slide child elements will ALWAYS have relative animations (data-100-top=”http://sofzh.miximages.com/jquery/..” NOT data-100=”http://sofzh.miximages.com/jquery/..”) Some awesomeness https://stackoverflow.com/questions/32238511/pause-scrolling-to-next-slide-till-all-animations-are-complete/… lots of other elements https://stackoverflow.com/questions/32238511/pause-scrolling-to-next-slide-till-all-animations-are-complete/… https://stackoverflow.com/questions/32238511/pause-scrolling-to-next-slide-till-all-animations-are-complete/… https://stackoverflow.com/questions/32238511/pause-scrolling-to-next-slide-till-all-animations-are-complete/…. […]

禁用移动设备的Skrollr（<767px）: 首先要感谢@prinzhorn这样一个令人惊叹且function强大的图书馆。我的问题：我已经在我的网站标题中实现了Skrollr视差背景，但我想在移动设备上观看时禁用此function，尤其是iphone等。（最大宽度：767px）。我想知道最好的方法是什么？如果destroy（）函数能够做到这一点，或者我应该使用另一种技术？另外，如果destroy（）是答案，我怎么能正确实现呢？非常感谢和示例或演示非常感谢。

滚动音频: 我正在使用skrollr插件做一个网站，我几乎完成了图片和滚动本身，所以我现在尝试添加音频，但我似乎无法使音频开始和停止我想要它来。这是我目前正在使用的脚本： $(window).scroll(function() { var height = $(document).height() – $(window).height(); var scroll = $(window).scrollTop(); var audioElm = $(‘#soundTour’).get(0); audioElm.play(); audioElm.volume = 1 – $(window).scrollTop()/height; console.log(audioElm.volume); }); 这使得我的音频在网站加载后立即启动并在整个网站的范围内逐渐淡出，所以当你滚动到底部时，它完全是静音的。我试过在脚本中弄乱“高度”变量，但无济于事。声音总是大大降低，但仍然在背景中微弱地播放。有没有办法让它在某个滚动点闭嘴？例如，让音频播放在$（窗口）.scrollTop（）= 500并停在$（窗口）.scrollTop（）= 3000？