[英]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.