フレックスレイアウトによるシームレスなスクロールのサンプルコード

フレックスレイアウトによるシームレスなスクロールのサンプルコード

この記事では、シームレスなスクロールを実現するためのフレックスレイアウトのサンプルコードを主に紹介します。サンプルコードは次のように共有されます。

ケースデモンストレーション

フレックスレイアウト

フレックス レイアウトと呼ばれるレイアウトは、伸縮性のあるボックス レイアウトです。このレイアウトはモバイル デバイスでよく使用されますが、ブラウザーのバージョンが更新されるにつれて、フレックス レイアウトは独自の利点によりますます一般的に使用されるようになっています。

アイデア:

  • まず、この小さなデモの構造、上部構造と下部構造を分析してみましょう。コンテナを使用してこれをラップすることができます(いわゆるビッグボックス)。
  • 上部にナビゲーションがあり、その上に ul があり、その下には幅 100% で高さをカスタマイズした 2 つの div を使用できます。
  • 次に、特定の親ボックスを覚えて、モデルを開いてみます。 display:flex; の場合、上下にどのように分割すればよいでしょうか?続けてflex-wrap: wrap;と追加していくと、上と下が分離されます。便利じゃないですか?
  • 次は下の部分です。ulはdivの中にネストされていて、ulの高さは分かりやすいのですが、divの高さなのでulの幅はどれくらいでしょうか? 、無限に広くすることができます! ! ! ulの幅を3000pxに設定します
  • 次に、liを入れます。liにも上下の構造があることがわかりますので、笑! li でも flex を有効にする必要がありますか? flex-wrap: wrap;上の div は img 用で、その下に a タグがあります。
  • 覚えておいてください、私は浮くべきです!そして、そこにoverflow:hiddenを置くことを検討してください

アニメーション効果

  • 5 つの画像があり、これを右から左に移動させます。では、ul に移動するように要求すると、li も移動するように促すことができますか?
  • @keyframes を使用して ul の左側の値を変更しますが、ここで問題が発生します。5 枚の画像を配置して ul を移動すると、右側が消えて空白になります。何をするか? ? ?
  • 5里をコピーして後ろに貼ってもいいですか? 答えはイエスです! !左側が li の最初のグループを削除すると、2 番目のグループは表示されなくなります。次に、アニメーションを使用します。20 秒間の線形無限実行、つまり無限ループです。

CSSパーツコード

* {
    マージン: 0;
    パディング: 0;
}

{
    テキスト装飾: なし;
}

.box-big {
    位置: 絶対;
    ディスプレイ: フレックス;
    左: 50%;
    上位: 50%;
    境界線: 1px 実線 #9FD6FF;
    変換: translate(-50%, -50%);
    幅: 707ピクセル;
    高さ: 170ピクセル;
    /* 背景色: ピンク; */
    flex-wrap: ラップ;
    オーバーフロー: 非表示;
}

.ボックストップ{
    幅: 707ピクセル;
    高さ: 30px;
    下境界線: 1px 実線 #9FD6FF;
    背景色: #FEFEFE;
}

.div-ボトム{
    幅: 707ピクセル;
    高さ: 136px;
    /* 背景色: darkgoldenrod; */
    オーバーフロー: 非表示;
}

.st-アイコン-android {
    表示: インラインブロック;
    幅: 15px;
    高さ: 15px;
    背景画像: url(../img/hd.gif);
    マージン: 8px;
}

h5 {
    位置: 絶対;
    上: 6PX;
    左: 30px;
    色: #307DD1;
}

ul {
    位置: 絶対;
    左: 90px;
    幅: 3000ピクセル;
    高さ: 100%;
    アニメーション: 20 秒間の線形無限実行。
}

li {
    リストスタイル: なし;
    フロート: 左;
    幅: 140ピクセル;
    高さ: 100%;
    マージン: 0 5px 0 5px;
    /* 背景色: ゴールド; */
    flex-wrap: ラップ;
}

。写真 {
    上マージン: 5px;
    幅: 140ピクセル;
    高さ: 105px;
    テキスト配置: 中央;
    /* 背景色: スプリンググリーン; */
}

p {
    テキスト配置: 中央;
}

画像 {
    カーソル: ポインタ;
}

@keyframes 実行 {
    0% {
        左: 0;
    }
    100% {
        左: -745px;
    }
}

フレックスレイアウトでシームレススクロールを実装するサンプルコードに関するこの記事はこれで終了です。フレックスシームレススクロールの詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  docker-maven-pluginはイメージをパッケージ化し、プライベートウェアハウスにアップロードします。

>>:  JS ES の新機能、変数分離割り当て

ブログ    

推薦する

Windows 7 環境での Docker 高速ビルドと Alibaba Cloud コンテナ高速化構成の詳細な説明

前回の Docker に関する記事では、MAC システムでの構築について説明しました。この記事では、...

HTML レイヤード ボックス シャドウ効果のサンプル コード

まず、画像を見てみましょう。今日はこのエフェクトを作成します。 実は、何でもないんです。Web ペー...

HTML における <meta> タグの使用に関する詳細な説明

私たちが作成する Web ページでは、より多くの人々に訪問してもらいたい場合、検索エンジンを使用して...

Docker での Redis 接続の急増をトラブルシューティングした実践的な記録

土曜日、本番サーバー上の Redis サーバーが利用できなくなり、エラー メッセージは次のようになり...

ウェブサイトデザインにおいて非常に重要な概念であるdiv+floatの分析

ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...

CentOS 7 はネットワークカードを変更した後、インターネットにアクセスできません

不明なドメイン名 www.baidu.com を Ping するホストのIPアドレスを変更する右クリ...

MySQL スケジュールタスクの実装と使用例

この記事では、例を使用して、MySQL スケジュール タスクの実装と使用方法を説明します。ご参考まで...

MySQLの大文字と小文字の区別によって発生する問題の分析

MYSQLは大文字と小文字を区別します言葉を見れば信じられます。タイトルを見れば内容がわかります。 ...

HTML ul 順序なしテーブルのアプリケーションネスト

順序なしリストのアプリケーションネストコードをコピーコードは次のとおりです。 <!DOCTYP...

vue-routeルーティング管理のインストールと設定方法

導入Vue Router 、 Vue.jsの公式ルーティング マネージャーです。 Vue.jsのコア...

MySql テーブル、データベース、シャーディング、パーティショニングの知識の詳細な説明

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

IDEA は Docker プラグインを使用します (初心者向けチュートリアル)

目次例示する1. Dockerリモートアクセスを有効にする2. Dockerに接続する3. イメージ...

Youdaの新しいプチビューの実装

目次序文導入ライブ使いやすいルートスコープマウント要素の指定ライフサイクルコンポーネントグローバル状...

MySQL で遅いファジークエリを最適化する方法

目次1. はじめに: 2. 最初のアイデアはインデックスを構築することです3. 命令P.S. Lik...

MySQLにおける正規表現の一般的な使用法

MySQL における Regexp の一般的な使用法特定の文字列を含むあいまい一致# コンテンツフィ...