バーをアニメーションさせてテキストを表示する

バーがアニメーションしてテキストが表示されるエフェクトを作ってみましょう。

こういったエフェクトは見出しやキャッチコピーなんかに使うと印象的なデザインが仕上がります。これにはポピュラーな名前は付いてませんが、Text Reveal Animationとかで検索すると同じようなエフェクトが見つかります。たぶん。

23 CSS Reveal Animations

https://freefrontend.com/css-reveal-animations/

CONTENTS

サンプル
HTML
CSS
JavaScript

WordPressの表示速度No1！
初心者からからプロフェッショナルまで使えるロリポップサーバーは月額550円から！

サンプル

サンプルを見てみましょう。

See the Pen
ページを読み込んだら帯の付いたテキストを表示する by イロイロデザインラボラトリ (@iroirodesignlab)
on CodePen.

早すぎて分かりにくいので、アニメーションの時間を伸ばして、テキストが表示されるタイミングが分かりやすいようにしてみました。

考え方としては、あらかじめテキストの色を透明にしておく → バーがテキスト部分を覆う → テキストに色を付ける → バーが右に消えていく…という流れになります。

HTML

HTMLはこんな感じです。

<section>
  <div class="text-wrapper">
    <div class="text-area">
      <p><span>DESIGN</span></p>
      <p><span>IS</span></p>
      <p><span>INTELLIGENCE</span></p>
      <p><span>MADE</span></p>
      <p><span>VISIBLE.</span></p>
    </div>
  </div>
</section>

の中にがあり、その中にテキストがあるという構造です。

<p><span>DESIGN</span></p>

テキストの長さなどには影響されないので、自由なテキストを配してもだいじょうぶです。

CSS

CSSはSCSSを使っています。

.text-area {
  p {
    margin: 1vw 0;
    display: none;

    span {
      font-family: "Oswald";
      font-size: 5vw;
      color: #ffffff;
      position: relative;
      animation-name: TEXT;
      animation-duration: 1s;

      &:before {
        content: "";
        width: 0%;
        height: 100%;
        display: block;
        background: #ffff00;
        position: absolute;
        top: 0;
        left: 0;
        animation-name: SCREEN;
        animation-duration: 1s;
      }
    }
  }
}

@keyframes TEXT {
  0% {
    color: transparent;
  }

  40% {
    color: transparent;
  }

  60% {
    color: #ffffff;
  }

  100% {
    color: #ffffff;
  }
}

@keyframes SCREEN {
  0% {
    width: 0;
    margin: 0 0 0 0;
  }

  40% {
    width: 100%;
    margin: 0 0 0 0;
  }

  60% {
    width: 100%;
    margin: 0 0 0 0;
  }

  100% {
    width: 0;
    margin: 0 0 0 100%;
  }
}

p

テキストの行間を調整するためにmarginで上下に余白を空けています。marginはインライン要素のには使えないので、ブロックレベル要素のに指定して余白を空けます。

span

メインとなる部分です。beforeの疑似要素をposition: absolute;にしたいので、position: relative;で基点を作ります。また、アニメーションさせる時間を指定するanimation-durationは1秒に設定します。

&:before

バーの部分です。spanにposition: relative;が指定されているので、position: absolute;で絶対位置を左上にしておきます。backgroundはバーの色を指定して、animation-durationはで指定した時間と同じにしておきます。

@keyframes

@keyframesはCSSアニメーションさせるためのアットルールです。animationプロパティと組み合わせて使うことで細かなアニメーションが作れます。@keyframesはアニメーションの変化を0%から100%までのパーセンテージで表していて、例えばアニメーションの時間を指定するanimation-durationを2秒にした場合、0%が0秒、50%が1秒、100%が2秒、という考えになります。

@keyframes TEXT

テキスト部分を表示させるためのアニメーションです。バーがエリアを覆ったタイミングでテキストを表示させないと不自然になるので、タイミングを合わせましょう。

0秒から0.4秒の間はテキストは透明にしておく。
0.4秒から0.6秒の間にテキストに色を付ける。
0.6秒から1秒まではテキストを色を付けたままにする。

@keyframes BAR

バー部分のアニメーションです。widthとmarginをテクニカルに使いながら、バーを左から表示させて右側に消していきます。

0秒から0.4の間にwidthを100%にしてバーを表示させる。
0.4秒から0.6秒の間は何も変化しない。
0.6秒から1秒の間にwidthを0にして同時に左側にmarginで余白を空ける。

JavaScript

JavaScriptは使わなくても良いですが、「ページが読み込まれたら」や「ビューポートに入ったら」などタイミングを調整するのに使うと印象的になるかもしれません。

サンプルでは、あらかじめ.text-areaの中にあるをCSSのdisplay: none;で非表示にしておいて、jQueryのsetTimeoutで0.5秒後にがdisplay: block;で表示されるようにしています。

setTimeout(function () {
  $(".text-area p").css("display", "block");
}, 500);