【徹底解説】5歳でも分かる、スクロールアニメーションの作り方(jQuery編)

ABOUTこの記事をかいた人

フロントエンドエンジニア。

こんにちは。今回はスクロールアニメーションの作り方を徹底的に解説していきます。

この記事は僕が書いている5歳でも分かるシリーズの1つです。こちらにスライドショーやタブメニューなどの作り方も載っていますのでぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

「htmlはデータの構造」「cssはその見せ方を作るもの」「jsはクラスの付け替えによってその2つを操作するもの」と言う切り分け方を前提に、jQueryのaddClass/removeClass/toggleClassを用いた方法で実装します。

作るものの確認

今回作るのは、このようにスクロールに合わせて各セクションがふわっと表示されるようなアニメーションです。

コードは以下のものになりますので、何か困ったことが起きたらここのコードと見比べてみてください。(コピペでも使えます)

index.html
style.css

実装

準備

コードを書き始める前に、ディレクトリ構成の確認とリセットCSSの導入です。

├── index.html
├── resources
   └── styles
       ├── destyle.css
       └── style.css

上記の形でファイルを配置しましょう。stylesはルートディレクトリ直下でも良いですが、実際にはresourcesの中にimagesフォルダなどと一緒に入っている形が多いのでそのようにしました。

destyle.cssというのがリセットCSSで、詳細な説明は省きますが各種タグに初期で当たっている様々な余計なスタイルを打ち消してくれるものです。

今回はこちら(https://github.com/nicolas-cusan/destyle.css/blob/master/destyle.css)のものを利用します。こちらのコードをそのままコピーしてdestyle.cssとして上記の場所に配置します。

destyle.css

見た目を作る

まずは見た目からです。

ファーストビューは1画面分で、下にコンテンツが並んでいる形です。

コンテンツは初期状態では非表示なので、その指定をします。

動きをつける

それでは、スクロールに合わせてコンテンツが表示されるようにしていきます。

まずはjQueryで付け替える用のクラスを用意しましょう。非表示になっているコンテンツを表示状態にしたいので、visibilityプロパティをvisibleに設定します。

続いて、jQueryでクラスの付け替えをしていきます。まずはjQueryを読み込みます。そして、その次の行からクラス付け替えのコードを実装します。

さて、「スクロールに合わせて」をどう表現するかを考えましょう。

直感的には「スクロールしていった時に、対象の要素が画面内に入る」ことが条件になりそうです。少し言い換えると、「対象の要素が画面内に入るくらいの量、スクロールした時」になります。

スクロールの量はwindow.scrollYというプロパティで取得することができます。では「対象の要素が画面内に入るくらいの量」がどのくらいなのか、ですね。

HTMLの要素は、実はそれぞれ色々な情報を持っています。その中に位置の情報があり、offsetTopとoffsetLeftという値で表現されます。基準点からどのくらい離れているかを示しており、基本的にはページの左上端が基準になります。

つまり、要素の縦方向の位置(offsetTop)以上にスクロールされたらクラスの付け替えをしてあげれば良さそうですね。

さて、ここで次の画像を見てください。

ScrollYとoffsetTopを単純に比較してしまうと、要素を最上部までスクロールしないとScrollY > offsetTopになりません。そこで画面の高さ分(window.innerHeight)を計算に入れてあげる必要があります。

これで条件式が書けそうですね。

したがって、各コンテンツ(.Section)に対して「scrollY + windowHeight > offsetTopが満たされた時、クラスを付け替える」という処理を書けば良いことになります。

sectionsに対して、eachメソッドを用いることで.Section1つ1つに対して設定を行うことが可能になります。

これでスクロールに合わせて要素を出現させることができるようになりました。

しかし、今の状態では要素が画面内に入った瞬間に表示されているのであまり効果がないですね(実際に試してみてください)。そこで数値を少しずらしましょう。offsetTopに、少しだけ高さを足します。

これで最低限の動きができました。

アニメーションさせる

最後にアニメーションをつけましょう。各セクションを下からふわっと動くようにします。そのために、最初の位置を下げておいてスクロール時に上に上がるような指定をします。

transkateYで初期位置を下げています。また、opacityの指定でふわっと出現させます。

最後の調整

最後に、細かい調整を行います。

ここまでのコードの状態で、一定以上スクロールしてからリロードするとアニメーションが動かない時があります。画像では点滅しているように見えてしまっていますが、リロードを繰り返しています。

これを防ぐために、画面読み込み時にもスクロールアニメーションの処理が動くようにする必要があります。

これで完成です!

まとめ

ということで、スクロールアニメーションの解説でした。

他にもいろんなパーツの解説をしていますので、ぜひご覧ください。

5歳でも分かる、JavaScriptをどこまで学べば良いかの学習ロードマップ

2021年10月20日

【徹底解説】5歳でも分かる、スムーススクロールの作り方(jQuery編)

2021年10月20日

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください