CSSでカスタマイズする縦方向のパララックス風スライダー【コピペで簡単自作】

swiper.jsやslick.jsなどスライダー系プラグインは沢山ありますが、どうも望み通りのスライダーにカスタマイズ出来なかったので、、CSSメインでカスタマイズできるスライダーを作りました。ポイントは、下から上のvertical(縦)方向にスライドして、画像がスルスルと滑らかにパララックス風に動くことです。プラグインを使わずに自作でスライダーを作りたい方は参考にどうぞ!

自作した縦スライダーのデモ

今回の自作スライダーのデモです。トップのキービジュアルとかに使えそうな。ページネーションもどきが表示されますが、これはクリックしても変わりません。パララックスって少し今更感がありますが、気にしません〜!一応レスポンシブにもなっていて、CSSのメディアクエリで背景を切り替える形にしてます。

デモ

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コード

CSSコードの解説

113行目の.slider__slide.activeで指定されているアニメーションで表示スピードやeasingなど自由に調整できます。144〜175行目のslide-in, img-in, slide-out, img-outという名前のアニメーションが、このスライダーのメインとなる部分ですね。transform: translateY(50%); のパーセンテージを調整すると、背景画像が動く範囲を調整できます。あとはアニメーションにopacityとか入れればフェードイン&フェードアウトにもできるし、zoomとか入れてもかっこいいと思います!

Javascriptコード

Javascriptコードの解説

Javascriptのコードもそんなに難しくないですね。slider__slideに順番に”active”と”inactive”のクラスを付与する関数(rotate)を、setTimeoutで5秒ごとに回してるだけという単純なもの!なるほど〜と思いました。

参考にさせていただいたサイト

今回のスライダーは下記ので紹介されているコードをベースに、スライダーを縦方向にしたりページネーションをつけたりと手を加えてみました。ありがとうございました!

まとめ

背景画像がスルスルと動きながら縦にスライドするスライダーの自作コードでした。これを作っていて思ったのですが、画像が動く時のスルスル感は、transformだけ使うと綺麗にできますね。変にbackground-positionとか、position: absoluteで画像を動かそうとするとカクカクしちゃいました。スクロールの背景パララックス作るときもtransform使うのがいいのかな。