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

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

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

まず、HTML 構造を作成し、必要な CSS スタイルをそれに追加する必要があります。以下は 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 サイトの他の関連記事を参照してください。