HTML、CSS、jQuery: アニメーションのスライディングウィンドウを作成する-jsチュートリアル-php.cn

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

WBOY

リリース： 2023-10-24 11:18:22

オリジナル

1110 人が閲覧しました

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

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 サイトの他の関連記事を参照してください。