HTML と CSS を使用して無限スクロール マーキーを作成する

Web サイトにアニメーションを追加すると、Web サイトがよりインタラクティブで素晴らしいものになります。これを実現する最良の方法の 1 つは、スクロール マーキーを作成することです。これは、スキルやツールなどの滑らかなコンテンツ上をスライドする非常に洗練されたアニメーションで、Web サイトを目立たせることができます。

このチュートリアルでは、HTML と CSS だけを使用して無限スクロール マーキーを作成する方法を説明します。

マーキーとは何ですか?

スクロール マーキーは、コンテンツが画面上を無限に移動する単純なアニメーションです。これは、スキル、テクノロジー、機能などのテキストを紹介するために使用できます。

コードを書いてみましょう

HTML 構造

まず HTML 構造を作成します

<div>



<p>Each  contains a skill or item, and the two identical  blocks ensure continuous scrolling.

</p><p><strong>CSS</strong></p>

<p>Now add the css style for scrolling<br>
</p>

<pre class="brush:php;toolbar:false">* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #161616;
  }

  .scroll {
    position: relative;
    display: flex;
    width: 700px;
    overflow: hidden;

      -webkit-mask-image: linear-gradient(90deg, transparent, #fff 30%,
    #fff 70%, transparent);

  }

  .scroll div {
    white-space: nowrap;
    animation: animate var(--t) linear infinite;
  }

  .scroll div:nth-child(2) {
    animation: animate2 var(--t) linear infinite;
  }

  @keyframes animate {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes animate2 {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-200%);
    }
  }

  .scroll div span {
    display: inline-flex;
    margin: 10px;
    padding: 5px 10px;
    border-radius: 5px;
    text-transform: uppercase;
    background: #333;
    color: #fff;
    transition: 0.5s;
  }

  .scroll div span:hover {
    background: #f52789;
    cursor: pointer;
  }

仕組み

スムーズなアニメーション:

@keyframes ルールはスムーズなスクロール効果を指定し、アニメーション プロパティはそれを

に適用します。

シームレスループ:

2 つの同一の

セクションは、途中で 1 つのブロックを開始することにより、無限にスクロールしているかのような錯覚を生み出します。

ホバー効果:

アイテムの上にマウスを置くと、その背景がこの明るいピンク (#f52789) に変わります。

マーキーをカスタマイズする

アイテムを変更する: タグを更新して、サービス、ツール、紹介文などの独自のコンテンツを表示します。

速度の調整: --t CSS 変数を使用してアニメーションの継続時間を制御します。値が小さいほど高速になります。

色の変更: Web サイトのテーマに合わせて背景とテキストの色をカスタマイズします。

結論

スクロール マーキーは、Web サイトを魅力的なものにするためのシンプルかつ強力な機能の 1 つです。このチュートリアルでは、コンテンツとデザインの好みに合わせたスクロール マーキーを簡単に作成する方法を説明します。これを試してみてください。

以上がHTML と CSS を使用して無限スクロール マーキーを作成するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。