ホームページ >ウェブフロントエンド >jsチュートリアル >HTML、CSS、jQuery: アニメーションのスライディングウィンドウを作成する

HTML、CSS、jQuery: アニメーションのスライディングウィンドウを作成する

WBOYオリジナル: 2023-10-24 11:18:221125ブラウズ

HTML、CSS、jQuery: アニメーション効果のあるスライディングウィンドウを作成する

現在、Web デザインではユーザーエクスペリエンスとアニメーション効果にますます注目が集まっています。コードを使用すると、クールなスライディングウィンドウ効果を作成できます。この記事では、HTML、CSS、jQuery を使用してアニメーション効果のあるスライディングウィンドウを作成する方法を紹介し、具体的なコード例を示します。

まず、HTML 構造を作成し、必要な CSS スタイルをそれに追加する必要があります。以下は HTML 構造の例です。

<!DOCTYPE html>
<html>
<head>
  <title>滑动窗口</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="slider-container">
    <div class="slider">
      <div class="slide">
        <img src="image1.jpg" alt="Image 1">
      </div>
      <div class="slide">
        <img src="image2.jpg" alt="Image 2">
      </div>
      <div class="slide">
        <img src="image3.jpg" alt="Image 3">
      </div>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

次に、HTML 構造に従って、対応する CSS スタイルを追加します。以下は CSS スタイルの例です。

.slider-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.slider {
  display: flex;
  width: 300%;
  animation: slide 15s infinite;
}

.slide {
  flex: 1;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

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

上記のコードでは、スライディングウィンドウのコンテンツをラップする .slider-container コンテナを作成します。 overflow:hiddenを設定することで、オーバーフロー部分の内容を非表示にすることができます。 .slider はスライディングウィンドウの主要部分です。すべてのスライディング要素を 1 行に表示するには、display: flex を使用します。 .slide は、画像を含む各スライド要素のコンテナーです。 flex: 1 を設定すると、各スライド要素をコンテナの幅全体に均等に分散できます。

次に、jQuery を使用して、スライドアニメーション効果を実現します。次のコードを script.js ファイルに追加します。

$(document).ready(function() {
  $('.slider').hover(function() {
    $(this).stop();
  }, function() {
    $(this).animate({ 'margin-left': '-100%' }, 5000, function() {
      $(this).css('margin-left', '0');
    });
  });
});

上記のコードでは、$(document).ready() を使用して、コードが次のとおりであることを確認します。ドキュメントがロードされた後に実行されます。マウスをスライディングウィンドウの上に置くと、アニメーションが停止します。マウスを外すと、スライディングウィンドウが 5 秒のアニメーション時間で次の画像まで左にスライドし、最後の画像の後に再開します。

最後に、style.css ファイルを作成し、それを HTML に導入して、スライディングウィンドウのスタイルを設定する必要もあります。次のコードをファイルに追加します。

body {
  margin: 0;
  padding: 0;
}

.slider-container {
  margin: 50px auto;
}

上記のコードでは、ドキュメント全体のマージンとパディング、およびスライディングウィンドウコンテナの外側のマージンを設定します。

上記は、アニメーション効果のあるスライディングウィンドウを作成するために必要なすべてのコード例です。 HTML、CSS、jQuery を組み合わせることで、クールなスライディングウィンドウ効果を簡単に実現できます。実際の使用では、必要に応じてスタイルやインタラクションをさらに調整できます。この記事が皆さんのお役に立てば幸いです!

以上がHTML、CSS、jQuery: アニメーションのスライディングウィンドウを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

jquery css html JS 外边距 display overflow flex

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：Layui を使用して画像の拡大と反転効果を実現する方法次の記事：Layui を使用して画像の拡大と反転効果を実現する方法

続きを見る

HTML、CSS、jQuery: アニメーションのスライディング ウィンドウを作成する

関連記事

HTML、CSS、jQuery: アニメーションのスライディングウィンドウを作成する