構成のない見た目の良い視差

Question

テンプレートのセクションを設定する必要があります。視差を含むクライアント用に構築しています。つまり、私はいつもそのセクションがページ上でどこに終わるか知りません。これは問題を生み出します。私の視差のy軸はしばしばオフです。私が使用している現在の視差技法では、開始点と停止点を設定する必要があるためです。

リピート時にイメージを設定し、イメージ間の間隔を設定して、そのウィンドウに表示されないようにすることができます。つまり、background-repeat：spaceです。調節可能ではないようです。

私は現在、http://www.franckmaurin.com/blog/the-parallax-effect-with-jquery/を使用しています。視差画像をクライアントの手に渡したり、私のためにこれを行う別のJavaScript技法に残して見せてもらうための回避策を知っている人はいますか？

ありがとうございます。

$.fn.parallax = function(options){ 
    var $$ = $(this); 
    offset = $$.offset(); 
    var defaults = { 
     'start': 100, 
     'stop': offset.top + $$.height() + 800, 
     'coeff': 0.95 
    }; 
    var opts = $.extend(defaults, options); 
    console.log("Parallax Works!"); 
    return this.each(function(){ 
     $(window).bind('scroll', function() { 
     windowTop = $(window).scrollTop(); 
     if((windowTop >= opts.start) && (windowTop <= opts.stop)) { 
      newCoord = windowTop * opts.coeff; 
      $$.css({ 
      'background-position': '0 '+ newCoord + 'px' 
      }); 
     } 
     }); 
    }); 
    }; 
// //parllax bind 
if ($('.commit').length){ 
    $('.commit').parallax({ 'start': 51 , 'stop':offset.top + $$.height(), 'coeff':-0.65 }); 
} 

コードが表示されるまではあまり表示されませんが、このスクリプトはジョブを実行するのに十分堅牢ではない場合があります。

Answer 1

同様のケースでは、Parallax.JSなどのすぐに使用できるソリューションを使用することをお勧めします。画像入力を追加するだけでよく、広く設定することができます。

視差効果の場合、CSS3の組み込み機能であるbackground-attachment: fixed;であるため、JavaScriptは必要ありません。実際の例はthis w3 articleです。このようなケースでは、パフォーマンス上の理由からこのバージョンを使用することをお勧めします。CSSはGPUによって強化されていますが、間違って記述されていればJavaScriptは強化されません。あなたの提供されたリンクでは、効果は遅く詰まり、私のコンピュータは問題ではないと私は信じています。

一般に、アニメーションやそのような効果には常にCSSを使用し、視差にはこの1つのコマンドを使用する必要があります。