見出し画像

【CSS】無限ループで画像をスライドさせる｜translateX

eguweb

無限ループで画像をスライドさせるためには、一度スライドが終了したら最初の位置に戻す必要があります。これを実現するために、CSSのアニメーションを組み合わせる方法があります。以下にサンプルコードを示します。

目次

  1. HTML

  2. CSS

  3. translateX

  4. マウスホバーで画像を拡大する

  5. スクロール時に要素をフェードインさせる

  6. まとめ

HTML

<div class="container">
  <img src="image1.jpg" alt="画像1">
  <img src="image2.jpg" alt="画像2">
</div>


画像が表示されます。

CSS

.container {
  display: flex;
  width: 300%;
  animation: slide 10s linear infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

このコードは、要素を水平方向にスライドさせるためのアニメーションを定義しています。具体的には、transform: translateX(-100%); は、要素をその幅の100%分左に移動させることを意味します。

つまり、要素が画面内から完全に左に移動し、見えなくなった後に再び右端からスライドして表示されるという効果を作り出します。これにより、画像が無限に左から右にスライドし続けるように見えるのです。

translateX

translateX は、CSSの transform プロパティを使用して要素を水平方向に移動させる関数です。この関数は、指定した値だけ要素を水平方向に移動させます。

具体的には、transform: translateX(-100%); の場合、要素をその幅の100%分左に移動させます。マイナスの値を指定することで左方向に移動し、プラスの値を指定すれば右方向に移動します。

translateX は、要素を移動させるだけでなく、他の transform 関数と組み合わせて回転させたり、拡大縮小したりする際にも使用されます。

マウスホバーで画像を拡大する

この例では、クラスが image で指定された要素にマウスがホバーされた際に、その要素を1.2倍のサイズに拡大します。

.image {
  transition: transform 0.3s ease;
}

.image:hover {
  transform: scale(1.2);
}

スクロール時に要素をフェードインさせる

.fade-in {
  opacity: 0;
  transition: opacity 0.5s;
}

.fade-in.is-visible {
  opacity: 1;
}

この例では、クラスが fade-in で指定された要素が画面内に入った際に、不透明度を0から1に変化させることでフェードインさせます。JavaScriptを使用して、要素が画面内に入ったことを検出して is-visible クラスを追加することで実現できます。


サポートお願い致します！