JavaScriptを使用したアニメーションスクロールスライダーの作成

この記事では、JavaScriptを使用してアニメーションスライダーを作成した実際的な経験を共有したいと思います。

スライダーのアイデアは、かなりコンパクトなサイズであり、スライダーに含まれるデータを表示する便利な方法を提供しながら、かなりの量の情報を含めることができるということです。

ごく最近、レイアウト作業をしながら、見出しを左右に滑らかにスクロールしてニュースフィードブロックを作成する必要がありました（対応するボタンを押して）。 この問題を解決するために、スクロールアニメーションを実装するかなり単純なスクリプトを作成しました。

理由はわかりませんが、スライダーに関するトピックは私にとって非常に興味深いものだったので、空き時間にはこの方向で働き続けました。 その結果、一連のテストの後、スクロールアニメーションのソフトウェア実装が大幅に改善されました。

私の仕事の結果は、スライダー（または複数のスライダー）が配置されているページに接続する小さなスクリプトです。

スライダーが機能するために必要なのは、スライドがコンストラクターに配置されているブロックの識別子を渡すことで対応するオブジェクトを作成し、スクロールを開始するコントロールをイベントハンドラーに登録して、作成されたオブジェクトの対応するメソッドを呼び出すことです。

実際には次のようになります。

実例はこのアドレスで入手できます 。 アーカイブにはバージョンもあります 。

スライダーの構造とスタイルの要件については、この記事の後半で詳しく説明します。 これらは単純ですが、スクロールアニメーションメカニズムが適切に機能するためには実装が必要です。

構造とスタイル

基礎として、スライダーが次のように見える上記の例を取り上げます。


スライダーの内部構造を明らかにし（ sample-sliderブロックのオーバーフロープロパティとスライドリストをvisibleに設定することにより ）、構造とスタイルの要件を定義します。


したがって、スライドは、順序付きリストまたは順序なしリストの要素の形式で提示し、左から右に水平方向に次々に配置する必要があります。

リストの最初の要素は特別です。 ユーザーには表示されませんが、この要素の幅を操作することにより、スライドをスクロールするためのアニメーションが実現されます。


リストはスライダーブロックに埋め込まれます。 そのサイズは、少なくとも1つのスライド、もう1つの表示されたスライド、およびリストの最初の非表示要素が1つの水平線（リストのクライアント領域）に配置されるように選択する必要があります。 したがって、私の例では、3つの要素がスライダーに表示され、5つがネストされたリストに表示されます（4つのスライドと最初の特別な要素）。


リスト自体を左側に移動して、左側の最初の要素と右側の少なくとも1つのスライドを完全に非表示にする必要があります。

これは、スクロール中に出力スライドが徐々に消え、入力スライドが徐々に表示されるようにするためです。

最後の、しかし非常に重要な要件は、スライドリストの最初の要素のスタイルに関するものです。 左右に内側の余白とフレームを含めるべきではなく、この要素の幅がゼロになったときに最初のスライドが完全に左に移動し、2番目のスライドが最初のスライドの代わりになるように、サイズを選択する必要があります。

ソフトウェアインターフェース

Sliderオブジェクトのコンストラクターを検討してください。 必須の引数として、スライド付きリストが添付されているブロックの識別子を取ります。

必須に加えて、コンストラクターは、スクロールの滑らかさと速度を決定する2つの引数（ shiftおよびdelay）をさらに取ることができます。

その結果、コンストラクター関数の形式は次のとおりです。

以下は、スライダーオブジェクトが作成されない場合です（代わりに、コンストラクターは空のオブジェクトを返します）。

• 存在しない要素の識別子が指定されています。
• 指定された識別子のブロックにリストの子が含まれていないか、その数が3以下です（スライドの最小数は2で、最初の特別なリスト要素です）。
• リストの最初の要素の幅はゼロ、または設定されたオフセット（ shiftDelay ）以下です。

オプションのコンストラクタパラメータについては、誤った値が転送される場合、デフォルト設定が使用されます。

以下は、 Sliderオブジェクトメソッドのリストです（アルファベット順）。

方法	説明
getIdentifier	このオブジェクトが関連付けられているHTML要素（スライダー）の識別子を返します。
getMaxShiftDelay	スクロールアニメーションサイクルの新しいステージの開始までの最大時間遅延（ミリ秒単位）を返します。
getMaxShiftOffset	スクロールアニメーションサイクルの1ステップでの最大スライドオフセットのサイズ（ピクセル単位）を返します。
getMinShiftDelay	スクロールアニメーションサイクルの新しいステージの開始までの最小時間遅延（ミリ秒単位）を返します。
getMinShiftOffset	スクロールアニメーションサイクルの1ステップでの最小スライドオフセットのサイズ（ピクセル単位）を返します。
getMoverWidth	リスト内の最初のアイテムの現在の幅（ピクセル単位）を返します。 主に、スライドをスクロールするためのプロトタイプで説明されている関数によって使用されます。
getShiftDelay	スクロールアニメーションサイクルの新しいステージの開始までの設定時間遅延（ミリ秒単位）を返します。 主に、スライドをスクロールするためのプロトタイプで説明されている関数によって使用されます。
getShiftOffset	スクロールアニメーションサイクルの1ステップで設定されたスライドオフセットのサイズ（ピクセル単位）を返します。 主に、スライドをスクロールするためのプロトタイプで説明されている関数によって使用されます。
スライド左	新しいスライドが左側に表示されるようにスライドを回転します（つまり、実際には、新しいコンテンツが左側に表示されるようにスライドが右にシフトされます）。
slideRight	新しいスライドが右側に表示されるようにスライドを切り替えます（つまり、実際には、新しいコンテンツが右側に表示されるようにスライドが左にシフトされます）。

スライドアニメーションの滑らかさと速度を決定するデフォルト値（ offsetとdelay ）を変更する必要がある場合は、オブジェクトのコンストラクターに適切なパラメーターを渡す必要があることに注意してください。

試験結果

上記のスライダーの実装は、次のブラウザー（ Windows 7 RTMオペレーティングシステム）で正常にテストされました。

• Mozilla Firefox 3.5.2
• Google Chrome 2.0.172.39
• Opera 9.64
• Microsoft Internet Explorer 8.0.7600.16385 （ IE7およびIE8モード）

さらに、この例は、 Microsoft Internet Explorer 6.0.2900.5512 （ Windows XP Professional SP3 ）およびWindows Mobile 6.1 Professionalの Opera 8.65.2779 （ デスクトップに設定された表示モード）で動作します 。

謝辞

以下の人々（ FuN_ViT 、 Parkim ）に感謝します。8日以下のInternet-Explorerブラウザの例をタイプセットすることで問題を解決してくれました。