こんにちは。KOUKIです。
本記事は、Udemyの「50 Projects In 50 Days – HTML, CSS & JavaScript」で学習したことを載せています。
実装するもの
今回は、Vertical Sliderを実装します。
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 |
<!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.15.1/css/all.min.css" /> <link rel="stylesheet" href="style.css" /> <title>Vertical Slider</title> </head> <body> <div class="slider-container"> <div class="left-slide"> <div style="background-color: #FD3555"> <h1>Nature flower</h1> <p>all in pink</p> </div> <div style="background-color: #2A86BA"> <h1>Bluuue Sky</h1> <p>with it's mountains</p> </div> <div style="background-color: #252E33"> <h1>Lonely castle</h1> <p>in the wilderness</p> </div> <div style="background-color: #FFB866"> <h1>Flying eagle</h1> <p>in the sunset</p> </div> </div> <div class="right-slide"> <div style="background-image: url('https://images.unsplash.com/photo-1508768787810-6adc1f613514?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e27f6661df21ed17ab5355b28af8df4e&auto=format&fit=crop&w=1350&q=80')"></div> <div style="background-image: url('https://images.unsplash.com/photo-1519981593452-666cf05569a9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=90ed8055f06493290dad8da9584a13f7&auto=format&fit=crop&w=715&q=80')"></div> <div style="background-image: url('https://images.unsplash.com/photo-1486899430790-61dbf6f6d98b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8ecdee5d1b3ed78ff16053b0227874a2&auto=format&fit=crop&w=1002&q=80')"></div> <div style="background-image: url('https://images.unsplash.com/photo-1510942201312-84e7962f6dbb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=da4ca7a78004349f1b63f257e50e4360&auto=format&fit=crop&w=1050&q=80')"></div> </div> <div class="action-buttons"> <button class="down-button"> <i class="fas fa-arrow-down"></i> </button> <button class="up-button"> <i class="fas fa-arrow-up"></i> </button> </div> </div> <script src="script.js"></script> </body> </html> |
このHTMLをブラウザ上で表示すると以下のようになります。
スタイル(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 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 |
@import url('https://fonts.googleapis.com/css?family=Open+Sans'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Open Sans', sans-serif; height: 100vh; } .slider-container { position: relative; overflow: hidden; width: 100vw; height: 100vh; } .left-slide { height: 100%; width: 35%; position: absolute; top: 0; left: 0; transition: transform 0.5s ease-in-out; } .left-slide > div { height: 100%; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; } .left-slide h1 { font-size: 40px; margin-bottom: 10px; margin-top: -30px; } .right-slide { height: 100%; position: absolute; top: 0; left: 35%; width: 65%; transition: transform 0.5s ease-in-out; } .right-slide > div { background-repeat: no-repeat; background-size: cover; background-position: center center; height: 100%; width: 100%; } button { background-color: #fff; border: none; color: #aaa; cursor: pointer; font-size: 16px; padding: 15px; } button:hover { color: #222; } button:focus { outline: none; } .slider-container .action-buttons button { position: absolute; left: 35%; top: 50%; z-index: 100; } .slider-container .action-buttons .down-button { transform: translateX(-100%); border-top-left-radius: 5px; border-bottom-left-radius: 5px; } .slider-container .action-buttons .up-button { transform: translateY(-100%); border-top-right-radius: 5px; border-bottom-right-radius: 5px; } |
ここまで実装すると以下のようになります。
JavaScriptの実装
要素を取得する
画面操作に必要な要素を取得します。
|
1 2 3 4 5 6 7 |
// 要素の取得 const sliderContainer = document.querySelector('.slider-container') const slideRight = document.querySelector('.right-slide') const slideLeft = document.querySelector('.left-slide') const upButton = document.querySelector('.up-button') const downButton = document.querySelector('.down-button') const slidesLength = slideRight.querySelectorAll('div').length |
top位置の定義
左側のスライダーのtop位置を定義しましょう。
|
1 2 3 4 5 |
// 現在アクティブになっているスライダーのインデックス let activeSlideIndex = 0 // 左スライダーのtop位置を変更 slideLeft.style.top = `-${(slidesLength - 1) * 100}vh` |
clickイベントの登録
次は、clickイベントを登録します。
|
1 2 3 |
// クリックイベントの登録 upButton.addEventListener('click', () => changeSlide('up')) downButton.addEventListener('click', () => changeSlide('down')) |
これで、UP/DOWNボタンをクリックした時に、clickイベントが発火するようになりました。
changeSlide関数は、これから実装します。
スライド処理の実装
最後にスライド処理を実装しましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const changeSlide = (direction) => { // スライドの高さを取得 const sliderHeight = sliderContainer.clientHeight if(direction === 'up') { // 次のスライドに飛ばす activeSlideIndex++ if(activeSlideIndex > slidesLength - 1) { activeSlideIndex = 0 } } else if(direction === 'down') { // 前のスライドに戻す activeSlideIndex-- if(activeSlideIndex < 0) { activeSlideIndex = slidesLength - 1 } } // translateYでY軸方向に移動させる slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)` slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)` } |
スライドの実装は、CSSのtranslateY関数で実現しています。
現在のスライドの高さを取得して、その高さをスライドのインデックス分乗算した値を渡すことでスライドを切り替えています。
スライドの高さって何？と思われる方は、以下の動画が理解のヒントになるかもしれません。
応用: setIntervalを活用
講義にはなかったのですが、setIntervalを使って2秒おきにスライドさせてみましょう。
|
1 2 |
// 2秒ごとに実行 setInterval(() => {changeSlide("up")}, 2000) |
かっこいいですね！
おわりに
今日も面白い講義でしたね^^
こんなかっこいいWebページを自分でも作成できるようになりたいです。
それでは、また！
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 |
// 要素の取得 const sliderContainer = document.querySelector('.slider-container') const slideRight = document.querySelector('.right-slide') const slideLeft = document.querySelector('.left-slide') const upButton = document.querySelector('.up-button') const downButton = document.querySelector('.down-button') const slidesLength = slideRight.querySelectorAll('div').length // 現在アクティブになっているスライダーのインデックス let activeSlideIndex = 0 // 左スライダーのtop位置を変更 slideLeft.style.top = `-${(slidesLength - 1) * 100}vh` // クリックイベントの登録 upButton.addEventListener('click', () => changeSlide('up')) downButton.addEventListener('click', () => changeSlide('down')) const changeSlide = (direction) => { // スライドの高さを取得 const sliderHeight = sliderContainer.clientHeight if(direction === 'up') { // 次のスライドに飛ばす activeSlideIndex++ if(activeSlideIndex > slidesLength - 1) { activeSlideIndex = 0 } } else if(direction === 'down') { // 前のスライドに戻す activeSlideIndex-- if(activeSlideIndex < 0) { activeSlideIndex = slidesLength - 1 } } // translateYでY軸方向に移動させる slideRight.style.transform = `translateY(-${activeSlideIndex * sliderHeight}px)` slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px)` } // 2秒ごとに実行 setInterval(() => {changeSlide("up")}, 2000) |
![[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]](https://hbb.afl.rakuten.co.jp/hgb/190f24cd.7532be9b.190f24ce.766b3442/?me_id=1213310&item_id=18177978&pc=https%3A%2F%2Fthumbnail.image.rakuten.co.jp%2F%400_mall%2Fbook%2Fcabinet%2F4111%2F9784774184111.jpg%3F_ex%3D240x240&s=240x240&t=picttext "[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]")
にほんブログ村
コメントを残す
コメントを投稿するにはログインしてください。