文字や画像をふわっと出現させるアニメーションの実装方法

文字や画像を何らかのアクションでふわっと出現させるアニメーションの実装方法です。

いろんな方向から出現される方法や、スクロールで画面内に要素が入ったらアニメーションが開始される方法もご紹介します。

ふわっと出現させたい画像や文字を作成

まずは上のGIFのように文字を、マウスオーバーでふわっと出現させます。

htmlとcssはこちら

  <section class="header">

    <div class="text_wrap">
      <p class="text">ふわっと出現するテキスト</p>
    </div>
    
 </section>

/* レイアウト用 */
.header {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.text_wrap {
  background-color: antiquewhite;
  padding: 10px;
  display: flex;
  justify-content: center;
}

See the Pen ふわっと出現させたい画像や文字を作成 by natsuki (@web_natsuki) on CodePen.

.textがふわっとさせる文字。

マウスオーバーさせる部分がどこかわかりやすくするために、文字を囲う.text_wrapにクリーム色の背景色をつけて、クリーム色の背景色にマウスオーバーすると.textがふわっと出現するようにします。

ふわっと出現させるアニメーション

ふわっと出現させる.textが見えている状態なので、opacityで0にして見えない状態にします。

.text {
  opacity: 0;
}

.text_wrap:hover .text {
  animation: 1s fadeup ease-in-out forwards;
}

@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

そして、クリーム色の背景部分である.text_wrapに:hoverで、.textがふわっと出現するためのマウスオーバーアニメーションが起こるようにしています。

そのアニメーションの指示というのが、animation: 1s fadeup ease-in-out forwards;（アニメーション名”fadeup”を、1秒でおこる）という指示です。

ease-in-outはアニメーションの進行度合いを指定するプロパティで、アニメーションの開始時と終了時をゆっくり動かします。forwardsはアニメーションの終了時の状態をどうするかのプロパティで、終了時の状態を維持します。この辺は色々はプロパティがあるので好きなのを選びましょう。

そして、animationを指定したときには一緒に@keyframesを使って、アニメーションの開始時と終了時にどういう状態が指示する必要があります。

0％にアニメーション開始時の文字が見えていない状態の指示、100%にアニメーションが終了するときに表示されている指示をして完成です〜！

See the Pen ふわっと出現させるアニメーション by natsuki (@web_natsuki) on CodePen.

クリーム色の部分にカーソルを持っていってみてください。文字がふわっと出現するようになりました！

別方向から出現させることも可能

今までのものを応用して、少し内容を変えるだけで別方向からも出現させることができます！

上から出現

0%のtransformの数値を変えるだけで上から落ちてくるアニメーションになります。

See the Pen ふわっと出現・上から by natsuki (@web_natsuki) on CodePen.

左から出現

0%のtransformをtranslateXに変えると横から出現します！

See the Pen ふわっと出現・左から by natsuki (@web_natsuki) on CodePen.

右から出現

左から出現と同じく、translateXにして数値を変えるだけで右から出現。

See the Pen ふわっと出現・右から by natsuki (@web_natsuki) on CodePen.

スクロールで要素画面内に入ったら、アニメーションを開始

今まではマウスオーバーでふわっと出現させる方法のご紹介でしたが、次はページスクロールで画面上に入ったらふわっと出現させる方法です。

スクロールしてふわっと出現させたい要素が画面内に入ったら、クラスが付与されてアニメーションが開始されるという仕組みです。

まずはhtmlとcssはこちら。

スクロールしたら.textのクラスに.activeというクラス付与で、.textの文字が出現します。

  <section class="section1">
    スクロール<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓<br>↓
  </section>

  <section class="section2">

    <p class="text">ふわっと出現するテキスト</p>

  </section>

/* レイアウト用 */
.section1 {
  margin-top: 100px;
  text-align: center;
}
.section2 {
  display: flex;
  justify-content: center;
  margin-top: 300px;
  margin-bottom: 100px;
}


.text {
  opacity: 0;
  background-color: aqua;
}

.text.active {
  animation: 2s fadeup ease-in-out forwards;
}

@keyframes fadeup {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

$(function () {
  $(window).scroll(function () {
    $('.text').each(function () {
      var elemPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > elemPos - windowHeight) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });
  });
});

See the Pen スクロールで要素画面内に入ったら、アニメーションを開始 by natsuki (@web_natsuki) on CodePen.

スクロールしてみてください。スクロールすると「ふわっと出現するテキスト」が左から出現します。（わかりやすいように文字に背景色つけています。）

javaScriptで、.textにスクロールしたらactiveが付与されるという指示をしています。要素が画面上に入ってすぐアニメーションを開始させたい場合はこれでOKです！

画面の真ん中あたりでアニメーション開始

でも画面に入ってからすぐクラス付与→アニメーション開始だと、画面の下の方でアニメーションが始まる….画面の真ん中あたりでアニメーションを動かしたい…という場合は次の方法で行ってください。

$(function () {
  $(window).scroll(function () {
    $('.text').each(function () {
      var elemPos = $(this).offset().top;
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > elemPos - windowHeight + 200) {
        $(this).addClass('active');
      } else {
        $(this).removeClass('active');
      }
    });
  });
});

さきほどのコードのwindowHeightのあとに+ 200と追加しました。これで画面に要素が入ってから、さらに200pxスクロールでクラス付与→アニメーション開始という指示になります！

画面の真ん中や上の方でアニメーションを開始させたい場合に使えると思います〜！

ここまで読んでいただきありがとうございました！