标签: skrollr
Skrollr init将<body>高度设置得太高
我使用Skrollr库为背景创建视差效果.但是,当调用skillor.init()时,体高太高并在页面下方创建额外的空间.
这个问题可以在这里看到:http: //codepen.io/designil/pen/Ggxde
HTML:
<div class="headrow">
<div class="container">
<div class="row">
<div class="col-md-3">
<h1 class="logo"><a href="#">21GUNS</a></h1>
</div>
<div class="col-md-9">
<div class="topmenu">
<p>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-pinterest"></i></a>
</p>
<ul class="list-unstyled">
<li>
<div class="dropdown">
<a data-toggle="dropdown" href="#">MENU 1</a>
<ul class="dropdown-menu" role="menu">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
<li role="presentation" class="divider"></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
</ul> …推荐指数
解决办法
查看次数
Angular2指令:如何检测DOM更改
我想将Skrollr实现为Angular2属性指令.
因此,格式可能是:
<body my-skrollr>
</body>
但是,为了实现这一点,我需要能够检测包含标记(在本例中为<body>)下面的子元素中DOM的更改,以便我可以调用skrollr.init().refresh() ; 并更新库以使用新内容.
是否有一种直截了当的做法,我不知道,或者我是否接近这个错误？
推荐指数
解决办法
查看次数
为什么skrollr阻止在ipad上滚动？
我正在尝试使用skrollr创建一个简单的视差动画:我的网站在Chrome/Mac上运行良好,但我在ipad上看到异常行为.
在ipad上(在IOS模拟器上测试),
- 页面的主体根本不滚动(或者可以在动画div下面的背景中滚动？)
- 动画背景位置(折纸图案)在
data-start/中定义的边界内向相反方向滚动(向下)data-top-bottom
在桌面上,效果我可以,如果我劈模拟的效果div#hero要position: fixed;在Chrome浏览器开发工具.
- 该skrollr例子如预期在IOS模拟器.
- 我
<div id="skrollr-body"></div>刚刚结束</body>标签
有什么建议？
推荐指数
解决办法
查看次数
禁用移动设备的Skrollr(<767px)
首先要感谢@prinzhorn这样一个令人惊叹且功能强大的图书馆.我的问题:我已经在我网站的标题中实现了Skrollr视差背景,但我想在移动设备上查看时禁用此功能,尤其是iphone等.(最大宽度:767px).我想知道最好的方法是什么？如果destroy()函数能够做到这一点,或者我应该使用另一种技术？另外,如果destroy()是答案,我该怎样才能正确实现？非常感谢和示例或演示非常感谢.
推荐指数
解决办法
查看次数
Skrollr不在移动设备上工作
所以这似乎是一个常见的问题,但是没有一个答案给我带来任何快乐.我已经完全阅读了Skrollr文档,可以得出结论,我完全不知所措.
我的基本html标记:
<html>
<head>
<!-- Head Stuff -->
</head>
<body>
<div id="navbar">
<!-- This is a fixed position div -->
</div>
<div id="skrollr-body">
<!-- Rest of my site -->
</div>
<script src="skrollr.min.js"></script>
<script>
skrollr.init({
forceHeight: false
});
</script>
</body>
</html>
因此,您可以看到文档说明我的固定元素超出了我的其他内容.
我正在使用版本0.6.26(2014-06-08) - 从GitHub页面下载.
在iPad 2,iOS7 和谷歌Nexus 4,Android 4.4.4 上进行移动测试
提前感谢任何建议/帮助
推荐指数
解决办法
查看次数
暂停滚动到下一个'幻灯片',直到所有动画完成
我正在为Skrollr滑块创建一个"有限的"可视化构建器.它允许用户构建由section页面上彼此相邻的幻灯片(html 标签)组成的滑块,每个幻灯片包含许多应用了Skrollr数据属性/动画(关键帧？)的html元素.
有没有办法暂停幻灯片(前进到下一张幻灯片),直到所有内部元素都完成了动画？
我知道这个例子pausing.html可以证明我需要什么,但是这些"幻灯片"已修复,这可能会给我的用户带来问题.滑块将被放入WordPress网站主题,大多数元素都没有修复.
因为幻灯片内容是如此动态和不可预测,很难知道锁定滚动多长时间？希望有可能做到这一点？
我的困境的例子:
.... Some regular WordPress page content (Navbar, Header maybe posts, etc.)
<div id="skrollr-body">
// Pause this slides scrolling till all child elements have completed their animations
// Slide child elements will ALWAYS have relative animations (data-100-top="..." NOT data-100="...")
<section id="slide-1" class="slide">
<p data-center="opacity: 1;" data-top="opacity: 0;">Some awesomeness</p>
<img data--100-center="transform: translate(-100%,0);" data-top="transform: translate(0,0);" src="..."/>
... lots of other elements
</section>
<section id="slide-2" class="slide">
...
</section>
<section id="slide-3" class="slide">
...
</section>
</div> …推荐指数
解决办法
查看次数
如何在Mobile上修复Skrollr？
我已经遵循了移动浏览器支持的指导原则,将内容包装在body标签之后和之前.
Explination在这里:https://github.com/Prinzhorn/skrollr#what-you-need-in-order-to-support-mobile-browsers
该网站仍然不允许页面在iPad上滚动.我不知道为什么.任何代码调查都会非常感激.
推荐指数
解决办法
查看次数
data-anchor-target 究竟是做什么的？
我在玩 Skrollr 并且在大多数情况下它看起来非常直观，让我受益的一件事是 data-anchor-target 属性。大多数时候我不需要它，但是当我查看一些示例时，它通常包含在内，我对它的作用感到困惑。这是否只是意味着在那个目标上，那是 Skrollr 数据（pos）属性发挥作用的时候？
推荐指数
解决办法
查看次数
滚动音频
我正在使用skrollr插件做一个网站,我几乎完成了图片和滚动本身,所以我现在尝试添加音频,但我似乎无法让音频开始和停止我想要它来.这是我目前正在使用的脚本:
<script>
$(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);
});
</script>
这使得我的音频在网站加载后立即启动并在整个网站的范围内淡出,所以当你滚动到底部时,它完全是静音的.我试过在脚本中弄乱"高度"变量,但无济于事.声音总是大大降低,但仍然在背景中微弱地播放.有没有办法让它在某个滚动点闭嘴？例如,让音频播放在$(window).scrollTop()= 500并停在$(window).scrollTop()= 3000？
推荐指数
解决办法
查看次数
在React中动态设置属性键(例如data- {foo} ="bar")
如果您知道密钥,则在React中设置属性很简单,例如
data-500={this.props.YDistance}
但是如何动态设置密钥的一部分.例如
data-{this.props.YDistance}="valueHere"
var Test = React.createClass({
render: function() {
return (
<div data-{this.props.YDistance}="valueHere">
{this.props.children}
</div>
);
}
});
ReactDOM.render(
<Test YDistance="500">Hello World!</Test>,
document.getElementById('container')
);
有些库需要这种属性设置(例如skrollr等)
推荐指数
解决办法
查看次数