【CSS/jQuery】文字を1つずつふわっと表示させるアニメーション

HTML/CSS

今日は、案件で実装した文字を1つずつ表示させるCSSアニメーションについてアウトプットします！

こんにちは。Webコーダーのharuです。

＊わたしについて＊
3歳1歳の育児をしながら、5~7時・21~0時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
HTML/CSS(SCSS)/jQuery/WordPress。
これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
【学習記録やアウトプットのTwitterはこちらです＊】

普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです！

【CSS,jQuery】文字を1つずつ表示させるアニメーション

先日、案件で実装をしたアニメーションです。アニメーションはCSSでつけているので、全てjQueryを使うより軽いです。

デモ

簡単なデモを作りました。こんな感じです。

文字を一文字ずつ表示させるCSSアニメーション
nhdy8.csb.app

コード

早速、作り方です。

【HTML】

 <main>
     <p class="text offs">
        <span class="effect delay-1">寝</span>
        <span class="effect delay-2">か</span>
        <span class="effect delay-3">し</span>
        <span class="effect delay-4">つ</span>
        <span class="effect delay-5">け</span>
        <span class="effect delay-6">が</span>
        <br />
        <span class="effect delay-7">う</span>
        <span class="effect delay-8">ま</span>
        <span class="effect delay-9">く</span>
        <span class="effect delay-10">い</span>
        <span class="effect delay-11">き</span>
        <span class="effect delay-12">ま</span>
        <span class="effect delay-13">す</span>
        <span class="effect delay-14">よ</span>
        <span class="effect delay-15">う</span>
        <span class="effect delay-16">に</span>
        <span class="effect delay-17">(｀・ω・´)</span>
     </p>
 </main>

※必要なところだけ抜き出しています。

今回は「寝かしつけがうまくいきますように(｀・ω・´)」という文章を一文字ずつアニメーションしたいので、それぞれの文字を<span>で囲みます。

<span>にはそれぞれ
・CSSアニメーション用のeffectクラス
・遅延設定用のdelay-1~17クラス

をつけました。

また、<span>の親である今回は<p>タグに、offsクラスをつけます。
これは、このあと説明する jQueryのトリガー用のクラスです。

HTMLのコードには載せませんでしたが、「文字が画面下30％に入ったらアニメーションを実行する」というトリガー用にjQueryを使用するので、jQueryも忘れずに読み込みしてください。

【jQuery】

上記で説明したとおり「文字が画面下30％に入ったらアニメーションを実行する」というトリガーのために、jQueryを使用します。

下記は、一緒にお仕事させていただいた株式会社Ficusの社長さん(@ficus_at_osaka)に教えていただいたコードです。感謝..！(このコードは「【CSS/jQuery】スクロールしたら下からふわっと要素を表示させる」でも使用しました！もしよければご覧ください♪)

/*
スクロール出現
（「.offs」が付いた要素に対して、表示領域に入ったら「.ons」にクラスを変更する。）
・判定タイミング：対象がブラウザの下から 30%以上 入ったら実行、画面から出たら戻す
*/
// スクロール出現用関数（.offs ⇄ .ons）
function scr_ani(scr, offs_max) {
  var window_h = $(window).height(),
    offs_length = $(".offs").length,
    ons_length = $(".ons").length;
  if (offs_length) {
    var first_item = offs_max - offs_length;
    for (var i = 0; i < offs_length; i++) {
      var data_scr = first_item + i;
      var offs = $('.offs[data-scr="' + data_scr + '"]');
      var target = offs.offset().top;
      var trigger = target - (window_h + scr - window_h * 0.3);
      if (trigger < 0) {
        offs.removeClass("offs").addClass("ons");
      } else {
        break;
      }
    }
  }
  if (ons_length) {
    var last_item = ons_length - 1;
    for (var i = 0; i < ons_length; i++) {
      var data_scr = last_item - i;
      var ons = $('.ons[data-scr="' + data_scr + '"]');
      var target = ons.offset().top;
      var trigger = target - (window_h + scr);
      if (trigger > 0) {
        ons.removeClass("ons").addClass("offs");
      } else {
        break;
      }
    }
  }
}

$(function () {
  /*
  スクロール出現
  */
  var scr = $(window).scrollTop();
  // スクロール出現アイテムにナンバリング
  var offs_max = $(".offs").length;
  for (var i = 0; i < offs_max; i++) {
    $(".offs").eq(i).attr("data-scr", i);
  }

  scr_ani(scr, offs_max);

  /************
  スクロール時
  ************/
  $(window).on("scroll", function () {
    var scr = $(window).scrollTop();
    /*
    スクロール出現
    */
    scr_ani(scr, offs_max);
  }); // end scroll
}); // end function

このまま編集なしで「script.js」 などにコピペしてhtmlに読み込めばOKです。

使い方は、アニメーションしたいhmtlタグの親に「offs」クラスをつけておくだけです。
対象が画面下30%に入ったら「ons」クラスに切り替わります。

“onsクラスがついたら〇〇を行う” と言った指示をCSSで出せば、簡単にアニメーションを実装することができます。

アニメーションについては株式会社Ficusの社長さん(@ficus_at_osaka)が書いてくださったQiitaがわかりやすいので是非ご覧ください！

[jQuery]スクロールしたらふわっと表示するよくあるアレの実装方法 - Qiita
#demo###パターン1（シンプルに対象が画面に入ったら表示） See the Pen Scroll表示1 by Takuya Tsuji (@Ficus-tsuji) on CodePen.…
qiita.com

【CSS】

最後にCSSです。必要な部分のみ抜粋します。

/*アニメーション*/
.text.offs .effect {
  opacity: 0;
}
.text.ons .effect {
  opacity: 1;
  transition-duration: 1s;
}

/*遅延の設定*/
.delay-1 {
  transition-delay: 0.2s;
}
.delay-2 {
  transition-delay: 0.4s;
}
.delay-3 {
  transition-delay: 0.6s;
}
.delay-4 {
  transition-delay: 0.8s;
}
.delay-5 {
  transition-delay: 1s;
}
.delay-6 {
  transition-delay: 1.2s;
}
.delay-7 {
  transition-delay: 1.4s;
}
.delay-8 {
  transition-delay: 1.6s;
}
.delay-9 {
  transition-delay: 1.8s;
}
.delay-10 {
  transition-delay: 2s;
}
.delay-11 {
  transition-delay: 2.2s;
}
.delay-12 {
  transition-delay: 2.4s;
}
.delay-13 {
  transition-delay: 2.6s;
}
.delay-14 {
  transition-delay: 2.8s;
}
.delay-15 {
  transition-delay: 3s;
}
.delay-16 {
  transition-delay: 3.2s;
}
.delay-17 {
  transition-delay: 3.4s;
}

 

.text.offs .effect { opacity: 0; }

textクラスは、ここでいう<p>タグです。↑
textクラスにoffsがついているときのeffectクラス=<span>はopacity:0で非表示。

.text.ons .effect { opacity: 1; transition-duration: 1s; }

text.クラスにonsがついているときの<span>はopacity:1で表示にします。↑

transition-durationで、アニメーションが始まってから終わるまでの時間を設定することができます。
今回のアニメーションでは、一文字一文字をふわっと表示したかったのでつけました。

transition-durationをつけなかった場合は、一文字一文字がはっきりと表示されてタイピング風になります。

trandition-durationプロパティの詳細はこちら

https://web-designer.cman.jp/css_ref/abc_list/transition-duration/
web-designer.cman.jp
 
/*遅延の設定*/ 
.delay-1 { transition-delay: 0.2s; }

最後に遅延の設定です。それぞれの<span>にtransition-delayを設定します。↑
今回は、0.2sごとにずらしてつけました。数字を変えることで、一つ一つの文字が表示される間を調整することができます。

あとがき

簡単ですが、お仕事で使ったので備忘録でした。

jQueryでトリガー、CSSでアニメーションだと全部jQueryやプラグインを使うより軽くて、アニメーションの応用も効くので、これからもどんどん使っていきたいと思います！

今日は以上です。

★Thanks：師匠「もりけんさん」(@terrace_tec)

もりけんさんのHPはこちら

スポンサーリンク