無限ループで画像をスライドさせるためには、一度スライドが終了したら最初の位置に戻す必要があります。これを実現するために、CSSのアニメーションを組み合わせる方法があります。以下にサンプルコードを示します。
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 クラスを追加することで実現できます。
translateX は、要素を水平方向に移動させるだけでなく、これらのような効果を実現するための基本的な仕組みとして幅広く活用されています。
translateX の応用としては、要素を水平方向に移動させるだけでなく、様々なアニメーション効果を実現することができます。例えば、マウスホバー時に画像を拡大する、スクロール時に要素をフェードインさせる、などの効果があります。
まとめ
今回の指定の場合は、一度画面から要素が消えてから再度表示され始めるので、少しぎこちない動きになりそうです。スムーズな無限ループを実現しようと思ったときは、もう少し工夫が必要かもしれません。
つづきは、また。
