こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、CSSでRipple Effectのスタイリングをつけましょう。
demoは「こちら」で確認できます。
ワークスペース
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
JavaScript版
HTML&JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!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>Button Ripple Effect</title> </head> <body> <button class="ripple">Click Me</button> <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 24 25 26 27 |
// 要素を取得する const buttons = document.querySelectorAll('.ripple') // 取得したbutton要素分ループ buttons.forEach(button => { button.addEventListener('click', function(e) { // クリック位置の座標を取得 const x = e.clientX const y = e.clientY // buttonのView上の位置を取得 const buttonTop = e.target.offsetTop const buttonLeft = e.target.offsetLeft // エフェクト発生場所計算 const xInside = x - buttonLeft const yInside = y - buttonTop // Ripple Effectを作る const circle = document.createElement('span') circle.classList.add('circle') circle.style.top = yInside + 'px' circle.style.left = xInside + 'px' this.appendChild(circle) }) }) |
スタイリング
cssでスタイリングをしていきます。なお、項目に出てくるbodyやbuttonは、HTMLの要素です。
全体の設定
|
1 2 3 4 5 6 7 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックスの大きさを算出 */ box-sizing: border-box; } |
bodyの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
body { background-color: #000; font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点に配置 */ align-items: center; /* flex横軸中央に配置 */ justify-content: center; /* ビューポートに対して高さ100% */ height: 100vh; /* スクロールを非表示 */ overflow: hidden; margin: 0; } |
buttonの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
button { background-color: purple; color: #fff; border: 1px purple solid; font-size: 14px; /* 全て大文字 */ text-transform: uppercase; /* 文字間のスペース */ letter-spacing: 2px; /* 上下 | 左右 */ padding: 20px 30px; margin: 10px 0; overflow: hidden; /* アイテムの位置の基軸位置 */ position: relative; } /* ボタンを押下した時 */ button:focus { /* 青線枠を出さないようにする */ outline: none; } |
circleの設定
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
button .circle { /* relativeからみて絶対値 */ position: absolute; background-color: #fff; width: 100px; height: 100px; border-radius: 50%; /* translate 要素の移動方向を指定 scale -> circleの大きさを制御 */ transform: translate(-50%, -50%) scale(0); /* アニメーション設定 */ animation: scale 0.5s ease-out; } @keyframes scale { to { /* circleを広げて... */ transform: translate(-50%, -50%) scale(3); /* 消す */ opacity: 0; } } |
これで、デモのようにRipple Effectがつきます。
おわりに
@keyframesとtranslate、あとはscaleの使い方がキーですね。
プロパティ値を変えてみて、慣れていってください!
それでは、また！
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 68 69 70 71 72 73 |
/* フォント */ @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"); * { /* ボックスの大きさを算出 */ box-sizing: border-box; } body { background-color: #000; font-family: "Roboto", sans-serif; /* flexアイテムにする */ display: flex; /* flexアイテムを積み重ねるように配置 */ flex-direction: column; /* flex重点に配置 */ align-items: center; /* flex横軸中央に配置 */ justify-content: center; /* ビューポートに対して高さ100% */ height: 100vh; /* スクロールを非表示 */ overflow: hidden; margin: 0; } button { background-color: purple; color: #fff; border: 1px purple solid; font-size: 14px; /* 全て大文字 */ text-transform: uppercase; /* 文字間のスペース */ letter-spacing: 2px; /* 上下 | 左右 */ padding: 20px 30px; margin: 10px 0; overflow: hidden; /* アイテムの位置の基軸位置 */ position: relative; } /* ボタンを押下した時 */ button:focus { /* 青線枠を出さないようにする */ outline: none; } button .circle { /* relativeからみて絶対値 */ position: absolute; background-color: #fff; width: 100px; height: 100px; border-radius: 50%; /* translate 要素の移動方向を指定 scale -> circleの大きさを制御 */ transform: translate(-50%, -50%) scale(0); /* アニメーション設定 */ animation: scale 0.5s ease-out; } @keyframes scale { to { /* circleを広げて... */ transform: translate(-50%, -50%) scale(3); /* 消す */ opacity: 0; } } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。