スクロール画像バーを実現するための CSS サンプルコード

スクロール画像バーを実現するための CSS サンプルコード

一部の Web サイトでは、画像が連続的にスクロールしているのをよく見かけます。この効果は、CSS アニメーション効果によって実現できます。具体的な効果は以下のとおりです

アニメーションを通じて左に移動することが基本原則です。

まず、同じ行にある 2 セットの同一の画像がある場合、画像全体を 1 セットの画像の長さだけ左に移動します。

こうすることで、アニメーションが終了するとすぐに元の位置に戻り、このとき 2 番目の画像セットと交互に表示されるため、一連の画像が連続して左にスクロールしているように見えます。

具体的な手順は次のとおりです。

1. メインコードの各部分に同じ画像を2セット設定する

 <ナビ>
        <ul>
            <li><img src="画像/1 (2).jpg" alt=""></li>
            <li><img src="画像/2 (2).jpg" alt=""></li>
            <li><img src="画像/3 (2).jpg" alt=""></li>
            <li><img src="画像/1 (2).jpg" alt=""></li>
            <li><img src="画像/2 (2).jpg" alt=""></li>
            <li><img src="画像/3 (2).jpg" alt=""></li>
        </ul>
    </nav>

2. ナビゲーションのサイズを設定します。幅は、合計した写真のグループの幅で、高さは写真の高さです。

        ナビゲーション{
            幅: 750ピクセル;
            高さ: 170ピクセル;
            境界線: 1px 実線の赤;
            マージン: 100px 自動;
}

3. ulのサイズを設定します。幅はnavの2倍、高さはnavと同じで、アニメーション関連のプロパティを指定します。

ul {
            幅: 200%;
            高さ: 100%;
            アニメーション: picmove 5 秒線形無限前進;
        }

4.アニメーションを定義します。主に、一連の画像の長さを左に移動します。

 @keyframes picmove {
            から {
                変換: translate(0);
            }
            に {
                変換: translate(-750px);
            }
        }

5. マウスホバーとアニメーション一時停止の効果を追加する

ul:ホバー{
            アニメーション再生状態: 一時停止;
        }

6. 最後に、余分な部分を非表示にするために、overflow:hidden を nav に追加して、スクロール画像バーのセット全体が完成します。

全体のコードは以下のとおりです

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>ドキュメント</title>
    <スタイル>
        * {
            マージン: 0;
            パディング: 0;
        }
        ul {
            リストスタイル: なし;
        }
        ナビゲーション{
            幅: 750ピクセル;
            高さ: 170ピクセル;
            境界線: 1px 実線の赤;
            マージン: 100px 自動;
            オーバーフロー: 非表示;
        }
        ul {
            幅: 200%;
            高さ: 100%;
            アニメーション: picmove 5 秒線形無限前進;
        }
        @keyframes picmove {
            から {
                変換: translate(0);
            }
            に {
                変換: translate(-750px);
            }
        }
        画像 {
            幅: 250ピクセル;
            高さ: 170ピクセル;
            フロート: 左;
        }
        ul:ホバー{
            アニメーション再生状態: 一時停止;
        }
    </スタイル>
</head>
<本文>
    <ナビ>
        <ul>
            <li><img src="画像/1 (2).jpg" alt=""></li>
            <li><img src="画像/2 (2).jpg" alt=""></li>
            <li><img src="画像/3 (2).jpg" alt=""></li>
            <li><img src="画像/1 (2).jpg" alt=""></li>
            <li><img src="画像/2 (2).jpg" alt=""></li>
            <li><img src="画像/3 (2).jpg" alt=""></li>
        </ul>
    </nav>
</本文>
</html>

要約する

上記はエディターが紹介した CSS スクロール画像バーのサンプルコードです。皆様のお役に立てれば幸いです。ご質問がございましたら、メッセージを残していただければ、エディターがすぐに返信いたします。また、123WORDPRESS.COM ウェブサイトをサポートしてくださっている皆様にも感謝申し上げます。

<<:  フォーム入力ボックスに関するWebデザインのヒント

>>:  乱数、文字列、日付、検証コード、UUIDを生成するMySQLメソッド

推薦する

Vueでクラススタイルを使用する方法の詳細

目次1. ブール2. 表現3. マルチクラスパッケージ4. v-bind でクラス class を直...

CSS シャドウアニメーションの最適化のヒント

このテクニックは、この記事から来ています - シルキーでスムーズなパフォーマンスでボックスシャドウを...

MySQL の異常なエラー ERROR: 2002 を解決する方法

最近、MySQL の起動中にエラーが発生しました。エラー メッセージは次のとおりです。 エラー 20...

MySQL 継続的集計の原理と使用法の分析

この記事では、例を使用して、MySQL の継続的な集計の原理と使用方法を説明します。ご参考までに、詳...

純粋な CSS を使用してユーザーが Web ページのコンテンツをコピーするのを防ぐ方法

序文私自身の個人ブログを入力しているときに、ブログの詳細ページでさまざまなコンテンツをコピーするさま...

ドメイン名、ポート、異なるIPに基づくnginx仮想ホスト設定の実装

1. nginx仮想ホストの設定仮想ホストを使用すると、実行する Web サイトごとに個別の Ngi...

Linuxのwhichコマンドの具体的な使い方

Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...

202 無料の高品質 XHTML テンプレート (2)

前回の記事「202 個の無料高品質 XHTML テンプレート (1)」に続き、123WORDPRES...

Mac でソースコードから MySQL 5.7.17 をコンパイルしてインストールするチュートリアル

1. ダウンロードして解凍します: /Users/xiechunping/Softwares/mys...

MySQL 5.7.17 のインストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 5.7.17のインストールと設定方法を参考までに紹介します。具体的な内容は...

VMware は Centos7 システムの PXE+kickstart 無人インストールの詳細なプロセスを実装します

目次PXEはサーバーの無人バッチ展開を実装します1. PXEの概要1.1 PXEとは何か1.2 キッ...

Vue ベースの円形スクロールリスト機能を実装する

注: 親コンテナーに高さと :data='Array' および overfolw:h...

Javascriptの基礎を学ぶための10の重要な質問

目次1. Javascript とは何ですか? 2. DOMとは何か3. JSコードの実行方法4. ...

JSON.stringify を使用する際に発生する循環参照の問題を解決する方法の詳細な説明

プログラマーが日常的に TypeScript/JavaScript 開発を行う場合、複雑な Java...

ネイティブJSで実装されたギャラリー機能

目次最初2番目Native Js はギャラリー機能を実装します。画像をクリックすると、対応する拡大画...