JavaScriptでスクロールアニメーションを実現する

こんにちは。KOUKIです。

本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。

実装するもの

今回は、スクロールアニメーションを学習しました。今回も結構面白いです。

demoは、「こちら」で確認できます。

環境構築

最初に、簡単な環境構築をお願いします。

必要なファイルは、以下の通りです。

開発

ページの作成

最初にページを作成しましょう。

このHTMLをブラウザ上で表示すると以下のようになります。

スタイルの追加

次にスタイルを記述しましょう。

ここまで実装すると以下のようになります。

JavaScriptの実装

実装方法

スクロールアニメーションの実現において、先ほど設定したCSSの「show」クラスがです。

showクラスをboxクラスを付与した要素につけることで、Boxが表示されます。

また、「translateX」関数についても触れておきましょう。この関数は要素を「X軸方向に再配置」する機能を持っているようです。

公式サイトより

現在は、「400%」を設定して画面外にBoxを表示していますが、showクラスにはtransform: translateX(0);が設定されているので要素が元の位置に戻ります。

また、これだけだと「同じ方向からのみBoxが現れる」状況になってしまうため、次の設定で偶数のBoxは「逆方向から現れる」ようにしています。

要素を取得する

JavaScriptで制御すべき要素が1つあります。最初にこれを取得しましょう。

スクロールイベントを登録する

次にスクロールイベントを登録しましょう。

これでページがスクロールしたらcheckBoxes関数が実行されるようになりました。

要素の表示

次の処理でページをスクロールした時に要素を取得できるようにします。

ちょっと難しいかもしれません。

getBoundingClientRectについて最初に触れます。

この関数は、要素の寸法と、そのビューポートに対する位置を返します。ビューポートとは、表示している画面のことです。

公式サイトより

box.getBoundingClientRect().topにて、BoxのTopの位置を取得しているんですね。スクロールしていくとこのTopの値は増大していきます。

続いて、window.innerHeightですが、これは現在表示しているビューポートの高さを表しています。

オレンジの線を引っ張ったところを表している

要素の出現は、その範囲より少し狭いはずなので、いくらか幅を狭めるために計算処理(/5*4)を入れています。

Boxの高さがページビューの高さより小さい(スクロールなしでページに収まる範囲)なら表示する必要があるため、 if(boxTop < triggerBottom) で条件分岐しています。

おわりに

今回も結構面白かったですね。

このプログラムなら色々なものに応用できそうです。一通り学習を終えたらオリジナルアプリを作ってみますね^^

それでは、また!

JavaScriptまとめ

JavaScript ソースコード

コメントを残す