0

「視差」スクロール効果を持つ多くの Web サイトがあります。でも、下にスクロールしながらいろいろな画像が飛び込んでくるシンプルなものから始めたいと思います。

簡単な例:

図

ユーザーがスクロールしているときに画像が実際に飛び込みます（スクロール時に表示されたときに飛び込みます）が、画像がユーザーに表示されているときに画像が直接飛び込んでも問題ありません（表示時に飛び込みます）

これはどのように達成できますか？利用可能なデモ、ライブラリ、チュートリアルなどはありますか? これに特定の名前はありますか？

4

5 に答える 5

1

利用可能な優れた視差ツールがたくさんあります。チュートリアルをお探しの場合は、私の会社と私がhttp://potentpages.com/parallax-tutorials/にリストを掲載しています。

視差ウェブサイトを作成するために使用される主な方法のいくつかは次のとおりです。

  • Javascript (ライブラリなし)
  • jQuery (および、Stellar.js のような jQuery の上にあるライブラリ)
  • Skrollr.js
  • ジャララックス
  • CSS (JavaScript なし)

私の会社は、 http://potentpages.com/parallax-scroll-tutorial/で、javascript (追加のライブラリは必要ありません) を使用して視差チュートリアルを作成する方法に関する迅速で簡単なチュートリアルも作成しました。

これが役立つことを願っています。

于 2013-12-14T02:32:32.287 に答える
0

ページ スクロール用のイベント リスナーを追加し、これらのオブジェクトのいずれかが表示されたら、それらをアニメーション化します。これは、次のように jQuery で実装できます。

$(window).scroll(function(){
    var scrollTop = $(this).scrollTop();
    $('.flyIns').each(function(i, element){
        if($(element).offset().top < scrollTop + 400){
            $(element).animate({left:'50px'}, 300);
        }
    });
});
于 2013-07-16T13:55:36.893 に答える
0

このチュートリアルを見てみましょう: http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

私はあなたの問題に lazyload を使用することを好むので、ビューポートに到達したときに画像が読み込まれます。

于 2013-07-16T13:51:25.090 に答える