こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、スクロールのスタイリングを実装します。
demoは、「こちら」で確認できます。
JavaScript版
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
HTML&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 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> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
// 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') } }) } |
ページは、以下のようになります。
スタイリング
CSSでスタイリングしていきましょう。
項目に出てくるbodyやboxは、HTMLの要素です。
全体の設定
最初は、全体に適用する設定からです。
|
1 2 3 4 5 6 7 8 9 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックス要素のサイズを算出 パディング(padding)とボーダー(border)を 幅(width)と高さ(height)に含める */ box-sizing: border-box; } |
body
bodyのスタイリングをします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { /* 背景色 */ background-color: #efedd6; /* フォント指定 */ font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを縦に重なるように配置 */ flex-direction: column; /* flexアイテムをページ横中央に配置 */ align-items: center; /* flexアイテムをフレックスコンテナ内の中央に寄せる */ justify-content: center; margin: 0; /* x軸方向のはみ出は非表示 */ overflow-x: hidden; } |
h1
h1のスタイリングをします。
|
1 2 3 |
h1 { margin: 10px; } |
box
box要素をスタイリングします。
|
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 |
.box { background-color: steelblue; color: #fff; display: flex; /* flexアイテムをクロス軸方向中央に配置 */ align-items: center; /* flexアイテムをフレックスコンテナ内の中央に寄せる */ justify-content: center; width: 400px; height: 200px; margin: 10px; /* 縁を丸く */ border-radius: 10px; /* ボックスの影 */ box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); /* x軸方向に要素を400%(右)移動する */ transform: translateX(400%); /* transformのアニメーション */ transition: transform 0.4s ease; } /* 偶数のbox要素に適用 */ .box:nth-of-type(even) { /* x軸方向に要素を-400%(左)移動する */ transform: translateX(-400%); } .box.show { /* 位置をニュートラルにする */ transform: translateX(0); } .box h2 { font-size: 45px; } |
showクラスは、JavaScriptで制御するクラスです。
これで、完成です。
おわりに
この講義では、「translateX(400%)」が面白いですね。boxの横幅(width)を400pxにしているので、400%にしているのでしょうね。
translateで要素を動かすことができ、今回は横軸方向にboxを動かしました。translateYを使うと縦方向に要素を動かすことができるので、ページ切り替え処理とか実装できそうですね^^
それでは、また!
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 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックス要素のサイズを算出 パディング(padding)とボーダー(border)を 幅(width)と高さ(height)に含める */ box-sizing: border-box; } body { /* 背景色 */ background-color: #efedd6; /* フォント指定 */ font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを縦に重なるように配置 */ flex-direction: column; /* flexアイテムをクロス軸方向中央に配置 */ align-items: center; /* flexアイテムをフレックスコンテナ内の中央に寄せる */ justify-content: center; margin: 0; /* x軸方向のはみ出は非表示 */ overflow-x: hidden; } h1 { margin: 10px; } .box { background-color: steelblue; color: #fff; display: flex; /* flexアイテムをクロス軸方向中央に配置 */ align-items: center; /* flexアイテムをフレックスコンテナ内の中央に寄せる */ justify-content: center; width: 400px; height: 200px; margin: 10px; /* 縁を丸く */ border-radius: 10px; /* ボックスの影 */ box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); /* x軸方向に要素を400%(右)移動する */ transform: translateX(400%); /* transformのアニメーション */ transition: transform 0.4s ease; } /* 偶数のbox要素に適用 */ .box:nth-of-type(even) { /* x軸方向に要素を-400%(左)移動する */ transform: translateX(-400%); } .box.show { /* 位置をニュートラルにする */ transform: translateX(0); } .box h2 { font-size: 45px; } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。