こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、スクロールアニメーションを学習しました。今回も結構面白いです。
demoは、「こちら」で確認できます。
環境構築
最初に、簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
開発
ページの作成
最初にページを作成しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="style.css" /> <title>Scroll Animation</title> </head> <body> <h1>Scroll to see the animation</h1> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <div class="box"><h2>Content</h2></div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイルの追加
次にスタイルを記述しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { box-sizing: border-box; } body { background-color: #efedd6; font-family: "Roboto", sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; overflow-x: hidden; } h1 { margin: 10px; } .box { background-color: steelblue; color: #fff; display: flex; align-items: center; justify-content: center; width: 400px; height: 200px; margin: 10px; border-radius: 10px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); transform: translateX(400%); transition: transform 0.4s ease; } .box:nth-of-type(even) { transform: translateX(-400%); } .box.show { transform: translateX(0); } .box h2 { font-size: 45px; } |
ここまで実装すると以下のようになります。
JavaScriptの実装
実装方法
スクロールアニメーションの実現において、先ほど設定したCSSの「show」クラスが鍵です。
|
1 2 3 |
.box.show { transform: translateX(0); } |
showクラスをboxクラスを付与した要素につけることで、Boxが表示されます。
|
1 |
<div class="box show"><h2>Content</h2></div> |
また、「translateX」関数についても触れておきましょう。この関数は要素を「X軸方向に再配置」する機能を持っているようです。
現在は、「400%」を設定して画面外にBoxを表示していますが、showクラスにはtransform: translateX(0);
また、これだけだと「同じ方向からのみBoxが現れる」状況になってしまうため、次の設定で偶数のBoxは「逆方向から現れる」ようにしています。
|
1 2 3 |
.box:nth-of-type(even) { <<< even === 偶数 transform: translateX(-400%); } |
要素を取得する
JavaScriptで制御すべき要素が1つあります。最初にこれを取得しましょう。
|
1 2 |
// box要素を全て取得する const boxes = document.querySelectorAll('.box') |
スクロールイベントを登録する
次にスクロールイベントを登録しましょう。
|
1 2 3 4 5 6 7 |
// box要素を全て取得する const boxes = document.querySelectorAll('.box') // スクロールイベントを登録 window.addEventListener('scroll', checkBoxes) function checkBoxes() {} |
これでページがスクロールしたらcheckBoxes関数が実行されるようになりました。
要素の表示
次の処理でページをスクロールした時に要素を取得できるようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
function checkBoxes() { // 現在表示されているページの縦の長さを取得 // 要素はそれよりも狭い範囲で計算したいので、いくらかで割る const triggerBottom = window.innerHeight / 5 * 4 boxes.forEach(box => { // ボックス要素の天辺の位置を取得 const boxTop = box.getBoundingClientRect().top if(boxTop < triggerBottom) { box.classList.add('show') } else { box.classList.remove('show') } }) } |
ちょっと難しいかもしれません。
getBoundingClientRectについて最初に触れます。
この関数は、要素の寸法と、そのビューポートに対する位置を返します。ビューポートとは、表示している画面のことです。
box.getBoundingClientRect().top
続いて、window.innerHeight
要素の出現は、その範囲より少し狭いはずなので、いくらか幅を狭めるために計算処理(/5*4)を入れています。
Boxの高さがページビューの高さより小さい(スクロールなしでページに収まる範囲)なら表示する必要があるため、 if(boxTop < triggerBottom)
おわりに
今回も結構面白かったですね。
このプログラムなら色々なものに応用できそうです。一通り学習を終えたらオリジナルアプリを作ってみますね^^
それでは、また!
JavaScriptまとめ
JavaScript ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
// box要素を全て取得する const boxes = document.querySelectorAll('.box') // スクロールイベントを登録 window.addEventListener('scroll', checkBoxes) function checkBoxes() { // 現在表示されているページの縦の長さを取得 // 要素はそれよりも狭い範囲で計算したいので、いくらかで割る const triggerBottom = window.innerHeight / 5 * 4 console.log(triggerBottom) boxes.forEach(box => { // ボックス要素の天辺の位置を取得 const boxTop = box.getBoundingClientRect().top if(boxTop < triggerBottom) { box.classList.add('show') } else { box.classList.remove('show') } }) } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。