2

window.onscroll と scrollTop を使用して視差効果を作成しようとしていますが、ビューポートがレンダリングされた後に onscroll を受け取っているように見えるレンダリングの問題が引き続き発生します。この例 (添付のコード) からわかるように、ボックスの動きは不安定で途切れ途切れです。

この動作は、すべての WebKit ベースのブラウザーと FireFox で同じです。

JavaScript

$(document).ready(function() {
  $('.box').each(function() {
    $(this).data('y', $(this).offset().top);
  });
});

$(window).scroll(function() {
  var scroll = $(this).scrollTop();

  $('.box').each(function() {
    var parallax = $(this).data('parallax');

    if (parallax) {
      var y = $(this).data('y');
      var offset = (scroll - y) * parallax;

      $(this).css('-webkit-transform', 'translateY(' + offset + 'px)');
    }
  });
});

マークアップ

<div class="red box">Lorem ipsum dolor sit amet.</div>
<div class="green box" data-parallax="0.4">Consectetur adipiscing elit.</div>
<div class="blue box" data-parallax="0.3">Nam consectetur dolor.</div>
4

1 に答える 1

2

ホイールを「再発明」するのではなく、既製のものを使用する価値があるかどうか疑問に思っていますか?

http://joelb.me/scrollpath/

于 2012-04-30T13:14:25.837 に答える