こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、かっこいいスライド画面を作成します。
※CSSの力もかなり借りてますが、本記事はJavaScriptを中心に解説しています
demoは「こちら」で確認できます。
環境構築
簡単な環境構築をお願いします。
必要なファイルは、以下の通りです。
|
1 2 3 4 5 6 |
$ tree . ├── index.html ├── script.js └── style.css |
CSS版
ページ(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 49 50 51 52 53 54 55 56 57 58 59 60 61 |
<!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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PKOgIY59xJ8Co8+NE6FZ+LOAZKjy+KY8iq0G4B3CyeY6wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous" /> <link rel="stylesheet" href="style.css" /> <title>Background Slider</title> </head> <body> <div class="slider-container"> <div class="slide active" style=" background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'); " ></div> <div class="slide" style=" background-image: url('https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1934&q=80'); " ></div> <div class="slide" style=" background-image: url('https://images.unsplash.com/photo-1495467033336-2effd8753d51?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'); " ></div> <div class="slide" style=" background-image: url('https://images.unsplash.com/photo-1522735338363-cc7313be0ae0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80'); " ></div> <div class="slide" style=" background-image: url('https://images.unsplash.com/photo-1559087867-ce4c91325525?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80'); " ></div> <button class="arrow left-arrow" id="left"> <i class="fas fa-arrow-left"></i> </button> <button class="arrow right-arrow" id="right"> <i class="fas fa-arrow-right"></i> </button> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
画像は、「imgix」というサービスで取得していますが、現在は見えていません。また、矢印ボタンには「Font Awesome」を使っています。
スタイル(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 74 75 76 77 78 79 |
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); * { box-sizing: border-box; } body { font-family: 'Roboto', sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; margin: 0; background-position: center center; background-size: cover; transition: 0.4s; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.7); z-index: -1; } .slider-container { box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); height: 70vh; width: 70vw; position: relative; overflow: hidden; } .slide { opacity: 0; height: 100vh; width: 100vw; background-position: center center; background-size: cover; position: absolute; top: -15vh; left: -15vw; transition: 0.4s ease; z-index: 1; } .slide.active { opacity: 1; } .arrow { position: fixed; background-color: transparent; color: #fff; padding: 20px; font-size: 30px; border: 2px solid orange; top: 50%; transform: translateY(-50%); cursor: pointer; } .arrow:focus { outline: 0; } .left-arrow { left: calc(15vw - 65px); } .right-arrow { right: calc(15vw - 65px); } |
ここまで実装すると以下のようになります。
画像が表示されましたね。slideクラスが付与されているHTML要素に「active」クラスを付与することで画像が表示されるようになります。JavaScriptでこのクラスを操作するわけですね。
JavaScriptの実装
準備が完了したので、JavaScriptを実装していきましょう。
スライドは、HTMLのBodyタグに画像を差し込むことによって実現します。
要素を取得する
画面操作に必要な要素を取得します。
|
1 2 3 4 5 |
// 要素を取得する const body = document.body const slides = document.querySelectorAll('.slide') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') |
「document.body」はHTMLのBodyタグの情報を取得しています。
Bodyに画像をセットする
次にBodyタグに画像をセットする処理を書きます。
|
1 2 3 4 5 6 7 8 9 10 11 |
// アクティブになっているバックグランド // 配列形式なので0から始まる // この数値を変えることで、切り替えを行う let activeSlide = 0 setBgToBody() // Bodyに画像をセット function setBgToBody() { body.style.backgroundImage = slides[activeSlide].style.backgroundImage } |
これで、activeSlideが変更されたらバックグラウンドが切り替わるようになりました(CSS実装時の画像だと背景が黒だったのが画像表示される)。
アクティブスライドをセットする
次は、アクティブにするスライドを設定する処理を書きます。
|
1 2 3 4 5 6 7 8 9 10 |
// スライドをアクティブにする function setActiveSlide() { slides.forEach(slide => { // activeクラスを除去 slide.classList.remove('active') }) // activeクラスを付与 slides[activeSlide].classList.add('active') } |
クリックイベントを登録する
最後にクリックイベントを登録しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
let activeSlide = 0 // クリックイベントを登録 rightBtn.addEventListener('click', () => { activeSlide++ if(activeSlide > slides.length - 1) { activeSlide = 0 } setBgToBody() setActiveSlide() }) leftBtn.addEventListener('click', () => { activeSlide-- if(activeSlide < 0) { activeSlide = slides.length - 1 } setBgToBody() setActiveSlide() }) |
これで完成です。
おわりに
めちゃくちゃかっこいいスライドができましたね。実務で使う機会がないことが残念です。。
それでは、また！
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 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
// 要素を取得する const body = document.body const slides = document.querySelectorAll('.slide') const leftBtn = document.getElementById('left') const rightBtn = document.getElementById('right') // アクティブになっているバックグランド // 配列形式なので0から始まる // この数値を変えることで、切り替えを行う let activeSlide = 0 // クリックイベントを登録 rightBtn.addEventListener('click', () => { activeSlide++ if(activeSlide > slides.length - 1) { activeSlide = 0 } setBgToBody() setActiveSlide() }) leftBtn.addEventListener('click', () => { activeSlide-- if(activeSlide < 0) { activeSlide = slides.length - 1 } setBgToBody() setActiveSlide() }) setBgToBody() // Bodyに画像をセット function setBgToBody() { body.style.backgroundImage = slides[activeSlide].style.backgroundImage } // スライドをアクティブにする function setActiveSlide() { slides.forEach(slide => { // activeクラスを除去 slide.classList.remove('active') }) // activeクラスを付与 slides[activeSlide].classList.add('active') } |
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。