Question

我正在基于此的网站上工作：http://inner.geek.nz/javascript/parallax/

一切都很好，除了我跳下来（通过在calcParallax（xx，x，posY）中设置的px）滚动。这个数字应该是图像结束的地方而不是它开始的地方 - 它应该开始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>

非常感谢任何帮助

罗布

Answer 1

请改用此示例。它使用了一个看起来更稳定的不同jQuery，并且不像内部极客的脚本那样跳转。

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

Answer 2

我在尝试最小化滚动事件中的脚本时将demo放在类似的东西上...我发现它在Firefox和Chrome中很jump，而且在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';
  });

 });

Answer 3

将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”来将垂直滚动更改为水平

滚动视差问题 - 跳跃

3 个答案: