jQueryを使わずにCSSのみで背景画像をX軸にスライドさせる方法

WEBサイトでよく見かけるコンテンツのひとつ、スライドショー。
今回は、複数の画像をスライドさせる方法ではなく、背景画像をX軸内で無限ループさせるスライドショーをCSSのみで実装する方法です。

jQueryを使わずCSSアニメーションを使っているので、
CSS animationsをサポートしているブラウザでないと動作しませんのでご注意ください。

最終的な結果は下のようになります。

See the Pen CSS Sliding Background by chiharu shoji (@kenyo_c) on CodePen.

HTMLの設定

HTMLの設定をしていきます。構造としてはこんな感じ。

HTML
<div class="wrap">
  <div class="sliding"></div>
</div>

ビューポートの幅にフィットする外枠のdiv.wrapを一つ作成します。
そして、背景画像を配置するためのdiv.slidingdiv.wrapの中に作成します。

CSSの設定

次にCSSの設定をしていきます。

SCSS
.wrap {
  overflow: hidden;
}

.sliding {
  height: 500px;
  width: 3384px;
}

div.wrapの幅からはみ出てしまうものを見えないようにするために、overflow: hidden;を設定します。
div.slidingには、画像の高さと幅(2倍にした数値)を指定しておきます。

背景画像を作成

画像の大きさは任意ですのでお好きな大きさのものを作成し、background-imageとして読み込みます。
X軸でリピートさせたいのでrepeat-xも指定しておきます。
今回の例では高さ500px、幅1692pxで作成しています。

SCSS
.sliding {
  background: url("画像のパス") repeat-x;
  height: 500px;
  width: 3384px;
}

スライド効果

スライド効果を定義していきます。
画像が左から右に無限ループするような動きをCSSアニメーションで指定します。

SCSS
@keyframes .slide {
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}

アニメーションの開始時にdiv.wrapの左端に画像を配置するため
transformプロパティを使用します。

今回はtransform関数の一つ、要素の表示位置を移動させるプロパティ:translate3d( )を使用しています。
transform関数には以下のようなものがあります。

説明
translate(X,Y) X方向とY方向の距離で2D移動を指定します。
Y方向の距離は省略することができ、その場合はY方向の距離は0となります。
translateX(X方向の距離) X方向の距離で移動を指定します。
translateY(Y方向の距離) Y方向の距離で移動を指定します。
translateZ(Z方向の距離) Z方向の距離で移動を指定します。
translateZ( )関数にはパーセンテージ値を指定することができません。
もし、パーセンテージで値を指定しても0と同じになります。
translate3d(X方向の距離, Y方向の距離, Z方向の距離) X方向とY方向とZ方向の距離で3D移動を指定します。
Y方向とZ方向の距離は省略することができますが、この場合のY方向とZ方向の距離は0となります。

そして最後に、アニメーションの実行時間、進行速度の割合、繰り返し回数を定義します。

SCSS
.sliding {
 ※以下のプロパティを追加
  animation: slide 60s linear infinite;
}

まとめる

全てをまとめると以下のようになります。
HTML/CSSも記述が少なくお手軽なスライドショーの完成です。

HTML
<div class="wrap">
  <div class="sliding"></div>
</div>
SCSS
.wrap {
  overflow: hidden;
}

.sliding {
  background: url("画像のパス") repeat-x;
  height: 500px;
  width: 3384px;
  animation: slide 60s linear infinite;
}

@keyframes slide{
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}

See the Pen CSS Sliding Background by chiharu shoji (@kenyo_c) on CodePen.

参考URL

Comment Form

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です