こんにちは。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版
開発
ページの作成
最初にページの作成をしましょう。index.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 |
<!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>Expanding Cards</title> </head> <body> <div class="container"> <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> <h3>Explore The World</h3> </div> <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> <h3>Wild Forest</h3> </div> <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')"> <h3>Sunny Beach</h3> </div> <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')"> <h3>City on Winter</h3> </div> <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> <h3>Mountains - Clouds</h3> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
画像は、「imgIX」というサイトから取ってきているようです。
他にもQiita記事で紹介されている「lorempixel 」というサイトも面白そうですね。
スタイルの追加
次にスタイルをstyle.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 |
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); * { box-sizing: border-box; } body { font-family: 'Muli', sans-serif; display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; } .container { display: flex; width: 90vw; } .panel { background-size: cover; background-position: center; background-repeat: no-repeat; height: 80vh; border-radius: 50px; color: #fff; cursor: pointer; flex: 0.5; margin: 10px; position: relative; -webkit-transition: all 700ms ease-in; } .panel h3 { font-size: 24px; position: absolute; bottom: 20px; left: 20px; margin: 0; opacity: 0; } .panel.active { flex: 5; } .panel.active h3 { opacity: 1; transition: opacity 0.3s ease-in 0.4s; } @media (max-width: 480px) { .container { width: 100vw; } .panel:nth-of-type(4), .panel:nth-of-type(5) { display: none; } } |
ここまで実装すると以下のようになります。
スタイルって難しいですよね。JavaScriptより難しいかも^^;
JavaScriptの学習なのでコピペでOKです。また、Bootstrapを使えば、もっと楽できると思います。
JavaScriptの実装
さて、いよいよJavaScriptを実装しましょう。
要素を拡大・縮小するには、activeクラスを操作すればOKです。
|
1 |
<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')"> |
このactiveクラスを付け替えることで、要素を広げたり縮めたりすることができます。
要素を広げる
まずは、要素を広げる処理をscripts.jsに書きましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// panelクラスを取得 const panels = document.querySelectorAll('.panel') // 配列で要素を取得できるのでループで回す panels.forEach((panel) => { // 取得した要素に対してclickイベントを付与する panel.addEventListener('click', () =>{ // クリックした要素に対して、activeクラスを付与する // これで要素が広がる panel.classList.add('active') }) }) |
querySelectorAllでは、HTMLに定義したpanelクラスが付いている全ての要素を取得します。そして、forEachで要素を回し、addEventListenerにてclickイベントを各要素に付与しています。
clickイベントでは、クリックした要素に対してactiveクラスを追加しているので、クリックすることで、要素が広がります。
要素を縮小する
次は、要素を縮小してみましょう。activeクラスを削除することでそれを可能にします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const panels = document.querySelectorAll('.panel') panels.forEach(panel => { panel.addEventListener('click', () =>{ // activeクラスを削除する removeActiveClasses() panel.classList.add('active') }) }) function removeActiveClasses() { panels.forEach(panel => { // activeクラスを削除する(ある場合) panel.classList.remove('active') }) } |
実は、activeクラスを削除することはとても簡単です。querySelectorAllで取得した要素にはclassListパラメータがあり、そのパラメータはremoveメソッドを持っています。このremoveメソッドに削除したいクラス(ここではactive)を指定することで、クラスを削除できます。
おわりに
実際の現場でも要素の拡大・縮小処理を実装することはよくあります。その場合もcssと組み合わせて行われますので、このサンプルはとても有用だと思います。
cssの勉強にもなりますしね＾＾
それでは、また！
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。