CSS を使用してシームレスなスクロール画像カルーセル効果を作成する方法

CSS を使用してシームレスなスクロール画像カルーセル効果を作成する方法

インターネットの発展と人々の美しさの追求により、画像カルーセルは Web の一部になりました。デザイン 最も一般的な要素の 1 つ。シームレスなスクロール画像カルーセル効果はユーザーの注意を引き付け、ページの対話性と視覚効果を高めることができます。この記事では、CSS を使用してシームレスなスクロール画像カルーセル効果を実現する方法と、具体的なコード例を紹介します。

まず、いくつかの基本的な HTML 構造を準備する必要があります。複数の画像を含むコンテナを使用し、CSS を使用して画像を水平に配置できます。例:

<div class="slider">
  <img  src="/static/imghwm/default1.png"  data-src="image1.jpg"  class="lazy" alt="CSS を使用してシームレスなスクロール画像カルーセル効果を作成する方法" >
  <img  src="/static/imghwm/default1.png"  data-src="image2.jpg"  class="lazy" alt="CSS を使用してシームレスなスクロール画像カルーセル効果を作成する方法" >
  <img  src="/static/imghwm/default1.png"  data-src="image3.jpg"  class="lazy" alt="CSS を使用してシームレスなスクロール画像カルーセル効果を作成する方法" >
</div>

次に、CSS を使用してコンテナのスタイルを設定し、シームレスなスクロールを実現する必要があります。 display: flex 属性を使用して画像を一列に配置し、overflow: hidden 属性を使用してコンテナの外側の部分を非表示にすることができます。例:

.slider {
  display: flex;
  overflow: hidden;
}

次に、CSS アニメーションとトランジション効果を使用して画像のスクロールを実現できます。 @keyframes ルールを定義し、transform 属性を使用して画像の位置を制御できます。例:

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

.slider img {
  animation: slide 10s infinite;
}

上記のコードでは、translateX(-100%) は画像を左に 100% オフセットして、画像のスクロール効果を実現します。 10s はアニメーションの継続時間が 10 秒であることを示し、infinite はアニメーションのループ再生を示します。

次に、シームレスなスクロールを実現するには、最後の画像をコピーしてコンテナの先頭に配置する必要があります。この効果は、::before 疑似要素を使用することで実現できます。例:

.slider::before {
  content: "";
  flex-shrink: 0;
  width: 100%;
  background-image: url(image3.jpg);
  animation: slide 10s infinite;
}

上記のコードでは、content: "" を使用して空の疑似要素を作成し、background-image を使用してその背景画像を設定します。最後の画像の属性。 flex-shrink: 0 および width: 100% を設定すると、疑似要素をコンテナの一部として扱い、他の画像と同じ幅にすることができます。

最後に、カルーセル効果を美しくするためにいくつかの CSS スタイルを追加することもできます。たとえば、hover 疑似クラスを使用してアニメーションを一時停止し、cursor: pointer 属性を使用してハンド カーソルをコンテナに追加できます。例:

.slider:hover img {
  animation-play-state: paused;
}

.slider {
  cursor: pointer;
}

上記のコードでは、ユーザーがカルーセル コンテナー上にマウスを置くと、アニメーションが一時停止し、マウス ポインターがハンド カーソルに変わり、クリックして操作できることをユーザーに思い出させます。 。

要約すると、CSS を使用して、シームレスなスクロール画像カルーセル効果を実現できます。 display: flex プロパティを使用して画像を行に配置し、overflow: hidden プロパティを使用してコンテナの外側の部分を非表示にします。次に、@keyframes ルールと transform 属性を使用して、画像のスクロールを制御できます。さらに、最後の画像をコピーし、::before 疑似要素を介してコンテナの先頭に配置することで、シームレスなスクロールを実現できます。最後に、他の CSS スタイルを使用してカルーセル効果を美しくし、ユーザー エクスペリエンスを向上させることができます。

上記のコンテンツがお役に立ち、エレガントでシームレスなスクロール画像カルーセル効果の実現に役立つことを願っています。ご質問がございましたら、お気軽にお問い合わせください。

以上がCSS を使用してシームレスなスクロール画像カルーセル効果を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。