Скроллинг Проблемы Параллакса - PosY Jumping - PullRequest
Новая
       1

Скроллинг Проблемы Параллакса - PosY Jumping

1 голос
/ 13 февраля 2011

Я работаю над сайтом, основанным на этом: http://inner.geek.nz/javascript/parallax/

Все хорошо, за исключением того, что я прыгаю вниз (в зависимости от того, какое значение px установлено в calcParallax (xx, x, posY)) на свитке. Это число должно быть там, где изображение заканчивается не там, где оно начинается - оно должно начинаться с 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>

Любая помощь будет высоко ценится

Rob

Ответы [ 3 ]

1 голос
/ 19 февраля 2011

Используйте этот пример вместо. Он использует другой jQuery, который кажется более стабильным и не перемещается, как скрипт из внутреннего гика.

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

0 голосов
/ 08 ноября 2012

Измените свои 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 to = "_0"

0 голосов
/ 04 апреля 2011

Я собрал демо на что-то похожее, пытаясь свести к минимуму сценарии в событии прокрутки ... Я обнаружил, что в Firefox и Chrome он нервный и странно гладкий, как шелк в IE.

Даже этот игровой веб-сайт , который использует комбинацию переходов Mootools и CSS, немного нервничает.

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';
  });

 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...