【コピペOK】スクロールを促すアニメーション: ユーザビリティを高める効果的な手法

programming
学習コースキャンペーンバナー

こんにちは、フローです。

ユーザエクスペリエンス (UX) を高めるための要素の一つに、

ウェブサイト上でスクロールを促すアニメーションがあります。

これはユーザーにページのスクロール可能性を示し、

それによりページの残りのコンテンツを探究する意欲を引き出す役割を果たします。

今回は、そのようなスクロールを促すアニメーションの作り方について、

具体的なHTMLとCSSのコードを用いてご紹介します。

スクロールダウンの線のアニメーションとは

一般的に、スクロールダウンの線のアニメーションとは、

スクロールを促す目的でデザインされたウェブ要素の一つです。

この要素は主に長いランディングページやスクロール可能なセクションで使用され、

ユーザーにスクロールを促します。

このアニメーションは通常、ページの最初に表示され、

ユーザーが下にスクロールすることでさらなるコンテンツが存在することを知らせます。

スクロールアニメーションの作り方

HTMLとCSSを使用してこの種のアニメーションを作成します。

まずは基本的なHTML構造を作りましょう。

ここでは、マウスの形を模したアイコンを作成し、

その中に小さなスクロールインジケータを設置します。

<div class="mouse">
  <div class="scroll"></div>
</div>

次に、CSSでスタイリングとアニメーションを追加します。

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

        .mouse {
          position: relative;
          display: block;
          width: 70px;
          height: 100px;
          margin: 0 auto;
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
          border: 3px solid white;
          border-radius: 50px;
        }

        .mouse .scroll {
          position: absolute;
          display: block;
          top: 20px;
          left: 50%;
          width: 8px;
          height: 10px;
          margin-left: -4px;
          background: white;
          border-radius: 50%;
          -webkit-animation: 1.5s scroll infinite;
          -moz-animation: 1.5s scroll infinite;
          animation: 1.5s scroll infinite;
        }

        @-webkit-keyframes scroll {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            -webkit-transform: translateY(45px);
            -moz-transform: translateY(45px);
            transform: translateY(45px);
          }
        }

        @-moz-keyframes scroll {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            -webkit-transform: translateY(45px);
            -moz-transform: translateY(45px);
            transform: translateY(45px);
          }
        }

        @keyframes scroll {
          0% {
            opacity: 1;
          }
          100% {
            opacity: 0;
            transform: translateY(45px);
          }
        }

このCSSコードは、

アイコン（.mouseクラス）とスクロールインジケータ（.scrollクラス）をスタイリングします。

そして、スクロールインジケータに対してスクロールエフェクトを適用します。

このエフェクトはCSSの@keyframes規則を使用して作成します。

ここでは、スクロールインジケータが透明になりながら下に移動するアニメーションを作成しています。

animationプロパティは、アニメーションの名前と期間、

そして繰り返し回数を指定します。

この場合、アニメーションの名前はscrollで、1.5秒間実行し、無限に繰り返すことを指定しています。

このようにして作成したアニメーションは、

ユーザーがページを開いたときにすぐに表示され、

スクロールを促す役割を果たします。

ユーザビリティを向上させるために、このようなアニメーションを活用することをぜひ考えてみてください。

まとめ

スクロールを促す線のアニメーションは、

ウェブデザインにおいて非常に有用な要素です。

ユーザーにページのスクロール可能性を示し、さらにコンテンツを探索する意欲を刺激することができます。

そして、このアニメーションはHTMLとCSSの基本的な知識だけで作成することができます。

あなたのウェブサイトやプロジェクトにこの要素を追加することで、

ユーザエクスペリエンスをさらに高めることができるでしょう。

レッツチャレンジ！