swiper.jsやslick.jsなどスライダー系プラグインは沢山ありますが、どうも望み通りのスライダーにカスタマイズ出来なかったので、、CSSメインでカスタマイズできるスライダーを作りました。ポイントは、下から上のvertical(縦)方向にスライドして、画像がスルスルと滑らかにパララックス風に動くことです。プラグインを使わずに自作でスライダーを作りたい方は参考にどうぞ!
自作した縦スライダーのデモ
今回の自作スライダーのデモです。トップのキービジュアルとかに使えそうな。ページネーションもどきが表示されますが、これはクリックしても変わりません。パララックスって少し今更感がありますが、気にしません〜!一応レスポンシブにもなっていて、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 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Stylish Vertical Slider</title> <link rel="stylesheet" href="style.css"> </head> <body> <header>Header</header> <main> <div class="slider__wrap"> <div class="slider__text"><p>Any Texts</p></div> <div class="slider"> <div class="slider__slide active-default"><div class="slider__slide-img"></div></div> <div class="slider__slide"><div class="slider__slide-img"></div></div> <div class="slider__slide"><div class="slider__slide-img"></div></div> <div class="slider__pagination"> <span class="active"></span><span></span><span></span> </div> </div> </div> </main> <script src="js/jquery-3.3.1.min.js"></script> <script src="script.js"></script> </body> </html> |
HTMLの解説
そんなに解説する箇所もないですが、、
<div class=”slider__text”>の中にキャッチフレーズなどを入れる想定。スライダーに入れたい画像の数だけ、<div class=”slider__slide”><div class=”slider__slide-img”></div></div>を追加します。
最初に表示させておきたい画像の<div class=”slider__slide”>にはactive-defaultのクラスを入れます。
<div class=”slider__pagination”>の<span></span>も画像の数と同じ数にしてください。slider__slide-imgの背景画像のパスを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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 |
@charset "UTF-8"; /* Base settings ---------------------------------------------------------------- */ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; } body { width: 100%; background: #fff; color: #333; font-size: 16px; font-weight: normal; font-family: "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Osaka, "平成ゴシック", "メイリオ", "Meiryo", Helvetica, Arial, Verdana, "MS Pゴシック", "MS UI Gothic", sans-serif; line-height: 1.5; } img { max-width: 100%; vertical-align: middle; } .content-wrapper { width: 100%; margin-right: auto; margin-left: auto; } header { width: 100%; height: 70px; padding: 20px 30px; font-size: 18px; } /* Slider ---------------------------------------------------------------- */ .slider__wrap { position: relative; overflow: hidden; width: 100%; max-width: 100%; height: 420px; } .slider__text { position: absolute; top: 45%; left: 30%; color: #fff; font-size: 28px; font-weight: bold; text-align: center; z-index: 100; } .slider__pagination { position: absolute; bottom: 30px; left: 30px; padding: 0 8px 2px; border-radius: 25px; background-color: #fff; opacity: .9; z-index: 100; } .slider__pagination span { position: relative; display: inline-block; width: 8px; height: 8px; margin: 0 5px; border-radius: 50%; background-color: #777; } .slider__pagination span.active::after { content: ""; display: block; position: absolute; width: 12px; height: 12px; top: -2px; left: -2px; background-color: skyblue; border-radius: 50%; animation-name: fadein; animation-duration: 600ms; animation-fill-mode: forwards; z-index: -1; } .slider { backface-visibility: hidden; } .slider__slide { position: absolute; overflow: hidden; top: 100%; bottom: 0; left: 0; right: 0; padding: 0; margin: 0; width: 100%; height: 100%; z-index: 0; } .slider__slide-img { width: 100%; height: 100%; background-size: 100%; background-position: 50% 50%; background-repeat: no-repeat; } .slider__slide.active { top: 0; animation-duration: 600ms; animation-name: slide-in; animation-timing-function: ease-in-out; animation-fill-mode: forwards; z-index: 50; } .slider__slide.active > .slider__slide-img { animation-duration: 600ms; animation-name: img-in; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } .slider__slide.inactive { top: 0; animation-duration: 600ms; animation-name: slide-out; animation-timing-function: ease-in-out; animation-fill-mode: forwards; z-index: 0; } .slider__slide.inactive > .slider__slide-img { animation-duration: 600ms; animation-name: img-out; animation-timing-function: ease-in-out; animation-fill-mode: forwards; } .slider__slide.active-default { top: 0; } @keyframes slide-in { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes img-in { 0% { transform: translateY(-50%); } 100% { transform: translateY(0); } } @keyframes slide-out { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @keyframes img-out { 0% { transform: translateY(0); } 100% { transform: translateY(50%); } } @keyframes fadein { 0% { opacity: 0; } 100% { opacity: 1; } } .slider__slide:nth-child(1) .slider__slide-img { background-image: url("images/slide01-img.jpg"); } .slider__slide:nth-child(2) .slider__slide-img { background-image: url("images/slide02-img.jpg"); } .slider__slide:nth-child(3) .slider__slide-img { background-image: url("images/slide03-img.jpg"); } @media screen and (max-width: 640px) { .slider__wrap { height: 340px; } .slider__slide:nth-child(1) .slider__slide-img { background-image: url("images/slide01-img-sp.jpg"); } .slider__slide:nth-child(2) .slider__slide-img { background-image: url("images/slide02-img-sp.jpg"); } .slider__slide:nth-child(3) .slider__slide-img { background-image: url("images/slide03-img-sp.jpg"); } } |
CSSコードの解説
113行目の.slider__slide.activeで指定されているアニメーションで表示スピードやeasingなど自由に調整できます。144〜175行目のslide-in, img-in, slide-out, img-outという名前のアニメーションが、このスライダーのメインとなる部分ですね。transform: translateY(50%); のパーセンテージを調整すると、背景画像が動く範囲を調整できます。あとはアニメーションにopacityとか入れればフェードイン&フェードアウトにもできるし、zoomとか入れてもかっこいいと思います!
Javascriptコード
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
jQuery(function($){ $('.slider').each(function(){ var $slides = $(this).find('.slider__slide'); var $pagination = $(this).find('.slider__pagination > span'); var numSlides = $slides.length - 1; var i = 0; var rotate = function(){ $slides.removeClass('active inactive active-default'); $pagination.removeClass('active'); $slides.eq(i).addClass('inactive'); if(i == numSlides){ i = -1; } $slides.eq(++i).addClass('active'); $pagination.eq(i).addClass('active'); var timer = window.setTimeout(rotate, 5000); }; setTimeout(rotate, 5000); }); }); |
Javascriptコードの解説
Javascriptのコードもそんなに難しくないですね。slider__slideに順番に”active”と”inactive”のクラスを付与する関数(rotate)を、setTimeoutで5秒ごとに回してるだけという単純なもの!なるほど〜と思いました。
参考にさせていただいたサイト
今回のスライダーは下記ので紹介されているコードをベースに、スライダーを縦方向にしたりページネーションをつけたりと手を加えてみました。ありがとうございました!
まとめ
背景画像がスルスルと動きながら縦にスライドするスライダーの自作コードでした。これを作っていて思ったのですが、画像が動く時のスルスル感は、transformだけ使うと綺麗にできますね。変にbackground-positionとか、position: absoluteで画像を動かそうとするとカクカクしちゃいました。スクロールの背景パララックス作るときもtransform使うのがいいのかな。