滾動視差問題 - 波西跳

我正在基於此網站：http://inner.geek.nz/javascript/parallax/滾動視差問題 - 波西跳

一切正常，除了我得到一個跳下（不論如何PX在calcParallax設置（XX，X，波西））滾動上的。這個數字應該是圖片結束的地方而不是它開始的地方 - 它應該開始scrollTop或0.不知道我在做什麼錯誤，我幾乎從上面的鏈接沒有#cloud對象或相關腳本。

這是我有：

<script type="text/javascript"> 
function calcParallax(tileheight, speedratio, scrollposition) { 
return ((tileheight) - (Math.floor(scrollposition/speedratio) % (tileheight+1))); 
} 

window.onload = function() { 

    window.onscroll = function() { 
    var posX = (document.documentElement.scrollLeft) ? document.documentElement.scrollLeft : window.pageXOffset; 
    var posY = (document.documentElement.scrollTop) ? document.documentElement.scrollTop : window.pageYOffset; 

    var ground = document.getElementById('ground'); 
    var groundparallax = calcParallax(53, 8, posY); 
    ground.style.backgroundPosition = "0 " + groundparallax + "px "; 

    document.getElementById('javascriptcode').onscroll = function() { 
    var posX = (this.scrollLeft) ? this.scrollLeft : this.pageXOffset; 
    var j = calcParallax(53, 16, posX); 
    console.log('scroll js: '+ j); 
    document.getElementById('javascriptcode').style.backgroundPosition = j + "px 0"; 
    } 
} 

</script>

任何幫助，將不勝感激

羅布

來源

2011-02-13 Rob

我與該腳本也有同樣的問題。不能弄清楚如何解決它，但我把它放入JSFiddle。 Theres實際上是2次跳轉，正好在第一個雲端的開始和結束處：http://jsfiddle.net/LTcsQ/ – 2011-02-14 06:41:22

用這個例子來代替。它使用了一個看起來更穩定的不同jQuery，並且不像內部極客的腳本那樣跳躍。

http://www.stevefenton.co.uk/cmsfiles/assets/File/backgroundparallax.html

來源

2011-02-19 08:47:22

我對類似的東西放在一起demo試圖儘量減少滾動事件......腳本我發現它在Firefox和Chrome神經質，奇怪的是光滑如絲的IE瀏覽器。

即使是這個使用Mootools和CSS轉換組合的game website也有點跳動。

CSS

/* Tiled background image */ 
body { 
margin: 0; 
padding: 0; 
/* Use height of header image for top position */ 
background: #000 url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bgtile.jpg) left 1080px repeat-y; 
} 
/* Top background image (1920x1080) */ 
#wrapper { 
position: relative; 
top: 0; 
left: 0; 
height: 100%; 
width: 100%; 
background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bg1.jpg) center top repeat-x; 
z-index: 100; 
} 
/* Page Title image */ 
#header { 
height: 350px; 
background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/title.png) center 40px no-repeat; 
} 
/* Content Block with 55% opacity background image */ 
.block { 
width: 600px; 
height: 500px; 
margin: 20px auto; 
border: #333 1px solid; 
padding: 20px; 
background: url(http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/bg-black-55.png); 
} 
.block h3 { 
font-family: 'Arial Black', Gadget, sans-serif; 
font-size: 130%; 
}

HTML

<body> <!-- contains repeated background image --> 
<div id="wrapper"> <!-- contains top image --> 

<div id="header"></div> <!-- contains the page title image --> 

<div class="block"> <!-- contains 55% opacity background image --> 
    <h3>Block 1</h3> 
    <div class="content">Content 1.</div> 
</div> 

<div class="block"> 
    <h3>Block 2</h3> 
    <div class="content">Content 2.</div> 
</div> 

<div class="block"> 
    <h3>Block 3</h3> 
    <div class="content">Content 3.</div> 
</div> 

<div class="block"> 
    <h3>Block 4</h3> 
    <div class="content">Content 4.</div> 
</div> 

<div class="block"> 
    <h3>Block 5</h3> 
    <div class="content">Content 5.</div> 
</div> 

</div> 
</body>

腳本

$(document).ready(function(){ 
    // defaults 
    var st, win = $(window)[0], 
    body = $('body')[0], 
    doc = (jQuery.support.boxModel) ? document.documentElement : document.body, 
    wrap = $('#wrapper')[0], 

    // Set top background image height here 
    imgH = 1080; // top image height 

    // vertical parallax scroll 
    $(win).scroll(function(){ 
    st = (win.pageYOffset || doc.scrollTop); 
    if (st < imgH) { wrap.style.backgroundPosition = 'center ' + (st/4) + 'px'; } // limit moving top image only when in view 
    body.style.backgroundPosition = 'left ' + (imgH + st/4) + 'px'; 
    }); 

});

來源

2011-04-03 20:11:58 Mottie

更改53每個元素的確切高度。

我無法弄清楚這個腳本的唯一情況是，當我將它改變爲向左滾動功能時，它會稍微垂直跳躍。

var element = document.getElementById('element'); 
    var elementparallax = calcParallax(7000, .5, posX); 
    element.style.backgroundPosition = " 0" + elementparallax + "px"; 
    };

P.S.您可以通過將posY更改爲posX並將in =「0_」+ elementparalax更改爲=「_0」來將垂直滾動更改爲水平

來源

2012-11-07 20:10:06

滾動視差問題 - 波西跳

回答

相關問題