[英]Parallax background effect with ScrollTo and Localscroll
我花了好几个小时试图解决这个问题。 我有一个像jsfiddle这样的网站 。
<div id="window">
<div id="section-wrapper">
<div id="one" class="section"><p>One</p>
</div>
<div id="two" class="section"><p>Two</p>
</div>
<div id="three" class="section"><p>Three</p>
</div>
<div id="four" class="section"><p>Four</p>
</div>
<div id="five" class="section"><p>Five</p>
</div>
<div id="six" class="section"><p>Six</p>
</div>
<div id="seven" class="section"><p>Seven</p>
</div>
<div id="eight" class="section"><p>Eight</p>
</div>
<div id="nine" class="section"><p>Nine</p>
</div>
</div>
我使用ScrollTo和localscroll来导航站点,我想知道如何实现对节包装器的视差效果并使背景移动变慢。 我在所有地方看到的视差插件和脚本都是基于滚动功能的,但是由于我不使用滚动来导航,所以我不知道如何添加效果。
有没有办法只处理实际的背景图像,即使用.animate和/或.css作为background-position属性,还是应该在节包装器后面放置一个元素? 我对jQuery和JavaScript相当陌生,但是如果有人可以指出正确的方向,我想我可以解决。 我只是不知道从哪里开始。
将此文件附加到您网站的标题https://github.com/markdalgleish/stellar.js/tree/master/src
启动脚本
<script type='text/javascript'>
<!--
(function($) {
$(document).ready(function() {
$.stellar({
horizontalScrolling: false,
verticalOffset: 40
});
});
})(jQuery);
// -->
</script>
现在您需要将下面的标签添加到环绕背景的div中
<div data-stellar-background-ratio="0.5">
您可以更新值0.5-它定义背景图像的速度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.