純粋な CSS で実装された 3 つの通知バーのスクロール効果

序文

通知バーコンポーネントは、比較的一般的なコンポーネントです。基本的に、すべてのサイトにこのようなコンポーネントがあります。その主な機能は、サイトの変更を発表したり、勝者に通知したりすることです。
最近、CSS3 アニメーション部分を見直しています。通知バーコンポーネントのほとんどはまだ JS で実装されていると思いました。このコンポーネントはレビューとして取り上げました。以下に 3 つの小さな例を書いて共有します。ぜひご覧ください。ご質問がある場合は、メッセージを残してコメントしてください。

最初

HTML部分

<div class="notice">
    <div class="notice__inner">
        <div class="notice__box">
            <div class="notice__item">メンバーユーザー <span style="color: red;">Chengrenren</span> さんが賞を獲得しました、おめでとうございます</div>
            <div class="notice__item">メンバーユーザー <span style="color: red;">Xiao Mi Quan Quan</span> が賞品を獲得しました</div>
            <div class="notice__item">メンバーユーザー <span style="color: red;">Cooke_</span> が賞品を獲得しました、おめでとうございます</div>
            <div class="notice__item">メンバーユーザー &nbsp;<span style="color: red;">Love Music Website</span>&nbsp; が賞を獲得しました</div>
            <div class="notice__item">メンバーユーザー <span style="color: red;">Voice of Youth</span> が受賞されました</div>
            <div class="notice__item">メンバーユーザー &nbsp;<span style="color: red;">Xianren</span>&nbsp; が賞品を獲得しました</div>
            <div class="notice__item">会員ユーザー<span style="color: red;">300,000 番</span>が賞品を獲得しました</div>おめでとうございます。
            <div class="notice__item">会員ユーザー「Maboroshii」さん、受賞おめでとうございます</div>
            <div class="notice__item">メンバーユーザー Chen Yaming さんが受賞されました、おめでとうございます</div>
            <div class="notice__item">会員ユーザー様、おめでとうございます&nbsp;<span style="color: red;">ついにお金持ちになりました</span>&nbsp;賞金獲得</div>
        </div>
        <div class="notice__box">
            <div class="notice__item">メンバーユーザー <span style="color: red;">Chengrenren</span> さんが賞を獲得しました、おめでとうございます</div>
            <div class="notice__item">メンバーユーザー <span style="color: red;">Xiao Mi Quan Quan</span> が賞品を獲得しました</div>
            <div class="notice__item">メンバーユーザー <span style="color: red;">Cooke_</span> が賞品を獲得しました、おめでとうございます</div>
            <div class="notice__item">メンバーユーザー &nbsp;<span style="color: red;">Love Music Website</span>&nbsp; が賞を獲得しました</div>
            <div class="notice__item">メンバーユーザー <span style="color: red;">Voice of Youth</span> が受賞されました</div>
            <div class="notice__item">メンバーユーザー &nbsp;<span style="color: red;">Xianren</span>&nbsp; が賞品を獲得しました</div>
            <div class="notice__item">会員ユーザー<span style="color: red;">300,000 番</span>が賞品を獲得しました</div>おめでとうございます。
            <div class="notice__item">会員ユーザー「Maboroshii」さん、受賞おめでとうございます</div>
            <div class="notice__item">メンバーユーザー Chen Yaming さんが受賞されました</div>
            <div class="notice__item">会員ユーザー様、おめでとうございます&nbsp;<span style="color: red;">ついにお金持ちになりました</span>&nbsp;賞金獲得</div>
        </div>
    </div>
</div>

CSS部分

。知らせ{
    幅: 300ピクセル;
    高さ: 300px;
    境界線の半径: 8px;
    境界線: 1px 実線 #eee;
    マージン: 100px 自動;
}
.notice__inner{
    幅: 100%;
    高さ: 100%;
    オーバーフロー: 非表示;
    フォントサイズ: 14px;
    色: #666;
}
.notice__box{
    アニメーション: 10 秒間のロール、線形無限。
}
.notice__item{
    幅: 100%;
    高さ: 30px;
    行の高さ: 30px;
    パディング: 0 12px;
    空白: ラップなし;
}
@keyframes ロール {
    0% {
        変換: translateY(0);
    }
    100% {
        変換: translateY(-300px);
    }
}

ビューポートコンテナの高さは固定する必要があり、コンテンツがビューポートコンテナを超えると非表示になります。
シームレスなスクロールバックを実現するには、コンテンツを 2 つのコピーに分けて、連続して用意する必要があります。
スクロール効果は、内部レイヤーの translateY を移動することによって実現されます。
最初のコンテンツがビューポートコンテナーから完全にスクロールアウトしたら、すぐにコンテンツの位置を復元します。
このプロセスは無限にループされます。

2番目

HTML部分

<div class="notice">
    <div class="notice__inner">
        <div class="notice__item">HTTP から HTTPS へのアップグレードの全プロセス、Nginx 構成のスムーズなアップグレード</div>
        <div class="notice__item">1 台のコンピューターに複数のバージョンの Vuecli が存在するため、異なるバージョンの Vue プロジェクトをすばやく初期化するのに便利です</div>
        <div class="notice__item">フロントエンドのモジュール仕様定義 - 異なる仕様でのインポートとエクスポート</div>
        <div class="notice__item">Vue の v-for ループ キーの役割を簡潔に説明します</div>
        <div class="notice__item">Call 関数と Apply 関数の分析と手書き実装</div>
        <div class="notice__item">普通の絵描きとしての一年 | ナゲッツ年次エッセイ募集</div>
        <div class="notice__item">フロントエンドが知っておく必要のあるブラウザ キャッシュ (つまり HTTP キャッシュ) | 🏆 第 8 回技術トピックの論文募集</div>
    </div>
</div>

CSS部分

。知らせ{
    幅: 600ピクセル;
    高さ: 40px;
    境界線の半径: 8px;
    境界線: 1px 実線 #eee;
    マージン: 100px 自動;
    オーバーフロー: 非表示;
}
.notice__inner{
    アニメーション: ロール 36 秒 線形無限;
    上マージン: 0
}
.notice__item{
    フォントサイズ: 14px;
    高さ: 40px;
    行の高さ: 40px;
    パディング: 0 12px;
    空白: ラップなし;
    テキスト装飾: 下線;
}
@keyframes ロール {
    0% {
        上マージン: 0;
    }
    4% {
        上マージン: 0;
    }
    8% {
        上マージン: 0;
    }
    12% {
        上マージン: -40px;
    }
    16% {
        上マージン: -40px;
    }
    20% {
        上マージン: -80px;
    }
    24％ {
        上マージン: -80px;
    }
    28% {
        上マージン: -120px;
    }
    32% {
        上マージン: -120px;
    }
    36% {
        上マージン: -160px;
    }
    40% {
        上マージン: -160px;
    }
    44%
        上マージン: -200px;
    }
    48% {
        上マージン: -200px;
    }
    52% {
        上マージン: -240px;
    }
    56% {
        上マージン: -240px;
    }
    60% {
        上マージン: -200px;
    }
    64% {
        上マージン: -200px;
    }
    68%
        上マージン: -160px;
    }
    72% {
        上マージン: -160px;
    }
    76% {
        上マージン: -120px;
    }
    80% {
        上マージン: -120px;
    }
    84% {
        上マージン: -80px;
    }
    88% {
        上マージン: -80px;
    }
    92% {
        上マージン: -40px;
    }
    96% {
        上マージン: -40px;
    }
    100% {
        上マージン: 0;
    }
}

（GIF録画は少し短いかもしれませんが、自分で試してみることをお勧めします）

このタイプのカルーセルは一般的なものであり、比較的実用的で、完全かつシンプルです。ちなみに、WeChat アプレットのスワイパーコンポーネントを使用して実装するのは比較的簡単で迅速です (なぜ私が知っているのかは聞かないでください -.-)。

ビューポートコンテナの高さは固定する必要があり、コンテンツがビューポートコンテナを超えると非表示になります。
内側の margin-top を移動してスクロール効果を実現します (translateY でも同様ですが、すべて置き換えるだけです)。
上記の HTML から、通知が 7 つあることがわかっているので、@keyframes の margin-top は 7 回だけ移動して、その後元に戻ります。8 番目の通知が追加された場合は、それに応じて値を調整する必要があります。

3番目

HTML部分

<div class="notice">
    <div class="notice__inner">
        <span class="notice__item notice__item-first">Vue はプログレッシブ JavaScript フレームワークです</span>
        <span class="notice__item notice__item-second">Vue はプログレッシブ JavaScript フレームワークです</span>
    </div>
</div>

CSS部分

。知らせ{
    幅: 600ピクセル;
    高さ: 40px;
    境界線の半径: 8px;
    境界線: 1px 実線 #eee;
    マージン: 100px 自動;
    オーバーフロー: 非表示;
}
.notice__inner{
    高さ: 100%;
    フォントサイズ: 14px;
    色: #333;
    行の高さ: 40px;
    空白: ラップなし;
    位置: 相対的;
}
.notice__item{
    位置: 絶対;
    上: 0;
    左: 100%;
    高さ: 100%;
}
.notice__item-first{
    右パディング: 70%;
    アニメーション: rollFirst 25s 線形無限;
}
.notice__item-second{
    右パディング: 53%;
    アニメーション: ロール秒 25 秒 線形 12 秒 無限;
}
@keyframes ロールファースト {
    0% {
        変換: translateX(0);
    }
    100% {
        変換: translateX(-200%);
    }
}
@keyframes ロールセカンド {
    0% {
        変換: translateX(0);
    }
    100% {
        変換: translateX(-200%);
    }
}

このタイプのスクロール通知バーも一般的なものです。特に通知内容が複数ある場合、空白期間の制御が難しいのが厄介な点です。もちろん、JS で実装する方が簡単ですし、今ではそのまま使えるプラグインも数多くあります。

このビューポートコンテナーの高さは固定する必要はなく、依存せず、コンテンツはビューポートコンテナーを超えて隠されます。
パーセンテージで空白スペースを作成するには、padding-right を使用します。
コンテンツのコピーを 2 つ用意する必要があり、animation-delay を使用して 2 番目のコンテンツのコピーの表示を遅らせます。ここでのもう 1 つのアイデアは、最初のものと同じ内部コンテナーの translateX を直接移動することです。

まとめ

これを読んで、ぜひ試してみたいと思いませんか？いいえ？わかった。

純粋な HTML + CSS は JS ほど柔軟ではありませんが、上記の例はコピーライティングが固定されているシナリオに非常に適しており、開発段階でインタラクティブな効果をすばやく作成するのにも適しています。

これで、純粋な CSS で実装された 3 つの通知バースクロール効果に関するこの記事は終了です。より関連性の高い CSS 通知バーコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Webフロントエンドの一般的な操作（JS/HTML/CSSなどの知識を含む）

>>: Linux リモート管理と sshd サービス検証の知識ポイントの詳細な説明