Clever Geek Handbook

サイト上のスライドの効果。 バージョン2、補足および改訂

しばらく前に、「サイトでのスライドの効果。 自分の自転車で熊手を介して。」

この記事は、主に実用的な部分とコード例の欠如に関する多くのコメントを集めました。

ライブサンプルを備えた改訂記事に注目します。



いずれかのサイトで作業中に、スライドの効果を実現する必要に直面しました。

つまり、ページの垂直スクロールでは、ページ全体を移動するのではなく、個々のシートの積み重ね可能なスタックとして移動する必要があります。



最初に考えたのは、ライブラリを使用してページに視差効果を追加することでした。その効果はインターネット上で非常に多く見つかります。 ただし、強力な普遍的なソリューションは必要ありませんでした。サードパーティのソリューションの確認、選択、およびセットアップに費やす時間は、問題の解決策を単独で超えることは間違いありません。 はい、そしてあなた自身のコーンを集めて基本を学ぶことへの渇望は、最終的にあなた自身の自転車を支持するスケールを上回りました。



従来、Firefox + firebugで開発を行っていました。



基本的に、タスクは、ブラウザーウィンドウ内でドキュメントをスクロールするときにサイトブロックの座標を変更することに要約されました。



jQueryを使用して、ドキュメントのonscrollイベントにバインドし、ウィンドウ内のドキュメントの位置に応じてブロックの位置の変更をそこに登録します。



レーキ1 ：スクロールプロセス中にドキュメント全体の高さに影響するDOMを操作すると、コンテンツの再構築と再描画によりブレーキがかかり、最も不愉快なことは、スクロール領域のサイズ変更とスクロールバーの再初期化によるスクロール中のジャンプです。



これを避けるため、ドキュメント階層の最初のレベルにある要素を移動しないことにしました。

各スライドは最終的にdiv（.slide_wrapper）になり、ページ上のサイズと位置は変更されず、その中にスライドのコンテンツを含むブロックラッパー（.slide）がありました。



このメカニズムを実装するために、クラス（javascriptの意味）aldparallaxを作成しました。

オブジェクトを作成するとき、移動に関係する要素のセット（.slide_wrapper）とコールバック関数へのリンクを持つ配列を定義するパラメーターがコンストラクターに渡されます。

作成されると、aldparallaxオブジェクトは、ウィンドウオブジェクトのスクロールイベントとサイズ変更イベントにアタッチされます。

イベントが発生すると、スライドごとにデータの配列が準備され（ドキュメントの現在の表示領域の座標、ドキュメント内のスライドの位置、スライドの表示領域の座標）、コールバックが呼び出されます。コールバックでは、スライド内の要素を移動するアルゴリズムが配置されます。

関数内で、コンテナ内のスライドの位置をスクロールに向かってシフトします（topプロパティをposition：relativeに変更することにより）。これにより、目的の効果が得られます。



例1： jsfiddle.net/88WvX



この例では、スクリプトは任意の数のスライドで動作し（htmlに追加するだけ）、スライドがウィンドウの上部に到達したときにのみ重なり始め、同時にスライドがウィンドウのサイズより大きく、その「貼り付き」が発生する状況を正しく処理しますウィンドウに表示される前に、下部が次のスライドの後ろに消えます。



問題は解決されたように見えますが、 Rake No. 2-このソリューションをChromeで実行すると、不快な気持ちになります。 単にウィンドウの上部に残るスライドは、不快にひきつり始めます。

実際、Firefoxとは異なり、Chromeはページをスクロールするときに最初に新しい位置を描画し、次にonScrollを呼び出します。ここでブロックの座標を変更すると、ページが再び描画されます。



記事を書いているとき、最新のChromeアップデートで状況が修正されたことが判明しましたが、このような問題を解決するアプローチとコールバック関数を使用する利点を示す点から役立つため、解決策を示します。



固定位置の必要な.slide要素を設定することで状況を修正しました（位置：固定;）。 このような要素は、スクロール時に画面の位置を変更しません。

ウィンドウに関連する.wrapperオフセットを計算するためだけに残り、親要素とジャークは消えません。 onParallaxEvent関数を調整します。



例2. jsfiddle.net/PWm7v



レーキ番号3 ：一部のモバイルブラウザでは、スクロールが完全に停止するまでonScrollイベントが生成されないため、「アニメーション」の途方もない遅延が発生します。

解決策は、タイマーによって座標再カウントを呼び出すか、requestAnimationFrameを使用することです。 この修正は、独立した仕事のために読者に任せます。



結果のソリューションにはいくつかの重要な利点があります。スクリプトを無効にすると、ページは完全に正確に見えます-スライド効果のみが無効になります。

さまざまなスライドにさまざまなコールバック関数を使用すると、さまざまな効果を実現し、サイトコンテンツ内の個々のブロックでさえも多様化できます。



次の例は、作業プロジェクトの1つの簡単な例です。

habra効果を防ぐために、コードは少し単純化され、jsfiddleに配置されました。



例3： jsfiddle.net/2Lhvb


More articles:


All Articles