CSSで画像をスライドショーしながらパララックスする方法

CSSで画像をスライドショーしながらパララックスする方法 HTML/CSS

こんにちは、mickです。

CSSでスライドショーとパララックスの組み合わせを紹介します。

CSSで画像をスライドショーしながらパララックスする方法

CSSでスライドショーをしながらパララックする方法は、次のシンプルな組み合わせ。

  • CSSでスライドショーを実装する
  • CSSでパララックスを実装する

それぞれ、このブログで記事を書いています。
リンクを張っておきますので、ぜひ見てみてください。

プレビュー:CSSでスライドショーしながらパララックスする

スライドショーしながらパララックスのプレビューはこちら。
スライドショーの背景は、5秒ごとに4枚の画像が切り替わります。

パララックス

このように、CSSで書いたスライドショーとパララックスは組み合わせることができます。

HTMLコーディング

<div class="slide">
  <div class="bgImg srcImage1 parallax"></div>
  <div class="bgImg srcImage2 parallax"></div>
  <div class="bgImg srcImage3 parallax"></div>
  <div class="bgImg srcImage4 parallax"></div>
  <div class="parallaxString">パララックス</div>
</div>

それぞれのdivタグの表示と非表示のタイミングを合わせることで、擬似スライドショーが出来上がります。

さらに、それぞれの背景画像に対してパララックスの効果を加えることで、スライドショーでもパララックスの効果が得られるようにしています。

スライドショーを増やしたり減らしたりするいは、divタグの数を調整します。

CSSコーディング

/* 全体 */
.slide {
  position   : relative;
  max-width  : 100%;
  height     : 400px;
  margin     : auto;
  overflow   : hidden;
}

/* スライドショー背景の設定 */
.slide .bgImg {
  position   : absolute;
  top        : 0;
  left       : 0;
  bottom     : 0;
  right      : 0;
  opacity    : 0;
  background-size:cover;
  /* 4枚を5s毎で計20s */
  animation  : pseudoAnimation 20s infinite; /* infiniteで繰り返す */ 
}

/* 時間差で背景画像のアニメーションを開始 */
.slide .srcImage1 {
  background-image : url(wp-content/uploads/2020/09/yamasha_eternal_2_TP_V4.jpg);   /* 背景の画像を指定 */
}
.slide .srcImage2 {
  background-image : url(wp-content/uploads/2020/10/ray-hennessy-gdTxVSAE5sk-unsplash.jpg);   /* 背景の画像を指定 */
  animation-delay  : 5s;
}
.slide .srcImage3 {
  background-image : url(wp-content/uploads/2020/10/yuyakeaozora_TP_V4.jpg);   /* 背景の画像を指定 */
  animation-delay  : 10s;
}
.slide .srcImage4 {
  background-image : url(wp-content/uploads/2020/10/pierpaolo-lanfrancotti-NKUEACkOhbk-unsplash.jpg);   /* 背景の画像を指定 */
  animation-delay  : 15s;
}

/* 20sのうち最初の約5sだけ表示する */
@keyframes pseudoAnimation {
   0% { opacity: 0; }
   5% { opacity: 1; } /* 表示タイミングをずらしてフェードイン風に */
  25% { opacity: 1; }
  30% { opacity: 0; }
 100% { opacity: 0; }
}

/* パララックスをみるための文字 */
.slide .parallaxString{
  position   : absolute;
  padding    : 15px;
  font-size: 3rem;
  color      : #fff;
  background : rgba(0, 0, 0, 0.2);
  top        : 50%; /* absoluteにおける上下集中央寄せ */
  left       : 50%;
  transform  : translate(-50%,-50%);
  z-index    : 1;
}
.parallax {
/* パララックスをつくる部分 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

スライドショー部分のポイントは、.slide .srcImage1セレクタのanimationプロパティ。そして@keyframes。
さらに、.slide .srcImage2セレクタなどのanimation-delayプロパティ。

スライドショー部分に関する詳しい解説を「CSSを使ってスライドショーを実装する方法【プラグイン、JavaScript不要】」でしています。
ぜひ見てみてください。

パララックス効果のポイントは.parallaxセレクタです。
「background-attachment: fixed;」でパララックスの効果をつくりだしています。
「background-repeat: no-repeat;」で背景画像が並ばないようにします。背景画像が並ぶとパララックスの効果が弱まるからです。
「background-repeat: cover;」で背景画像が画面いっぱいに広がるようにします。
「background-position: center;」で背景画像が中央を基準に設置するようにします。

今回文字を重ねるのに、.slide .parallaxStringセレクタで「position : absolute;」を利用しています。
また、「z-index: 1;」でスライドショーよりも全面に文字が来るように指定しています。

まとめ。

CSSで画像をスライドショーしながらパララックスする方法を紹介しました。

CSSで画像をスライドショーすること。
CSSでパララックス効果をだすこと。

それぞれはシンプル。
だけど組み合わせると視覚効果としてはかなり大きくなります。

これに似た方法をJavaScriptで実装しているWebサイトを見たことがあります。
そういったWebサイトもこの方法に置き換えたらかなりパフォーマンスアップが期待できますね。

以上、みなさまの助けなれば幸いです。

初稿 2020/10/13

タイトルとURLをコピーしました