seilog-ger
[ URL:seilog.org ] Writtern by Seiji Nakamura

2024/2/9 (更新日:2024/2/9)

文字が洒落たアニメーションする簡単で間違いないコーディング！「CSSのみ」と「JavaScriptも使う」方法【中級】

geralt pixabay

Program

文字を分割して一字毎にアニメーションさせるコーディング法は分かりますか？

文字列を分割する方法、分割した文字を一字毎にコントロールして、文字全体で洒落たアニメーションする方法をCSSのみで実現するコーディング、JavaScriptも使い実現するコーディングを解説いたします。

実際によく使われる文字のアニメーションをコーディング内容を示しながら解説致します。

実際にすぐに活用いただけます

是非、ご活用ください。

目次

１．文字が洒落たアニメーションする簡単で間違いないコーディング！「CSSのみ」と「JavaScriptも使う」方法
２．文字のアニメーションをCSSで作る基本の作り方。
３．文字のアニメーションをCSSとJavaScriptを使う基本の作り方
４．文字のアニメーションをCSSとJavaScriptを使うひとつ上の作り方
５．文字のアニメーションをアプリケーション：TweenMaxを使った作り方【参考】

１．文字が洒落たアニメーションする簡単で間違いないコーディング！「CSSのみ」と「JavaScriptも使う」方法

by geralt pixabay

文字アニメーションには色々ありますが、滑らかに文字が表示されるアニメーションを取り上げます。

アニメーションを実現する方法はいくつもありますが、ここでは４つの方法を紹介します。

文字アニメーション動作

See the Pen animation-simple by Seiji Nakamura (@sjnkmr_777) on CodePen.

１つ目は、htmlとCSSのみで作る方法です。

CSSでアニメーションを組み、コーディング内容を理解しやすいですが、htmlの表現が煩雑でお勧めできません。

２つ目は、htmlとCSSに加え、JavaScriptでアニメーションする文字の組み換えをする簡素化した方法です。

３つ目は、複数の文字列をアニメーションする時の方法で、JavaScriptにおいてclassを使ってするやり方です。

４つ目は、JavaScriptでアプリケーションTweenMax：gsapを使って文字アニメーションする方法です。CSSではアニメーションはしません。

自分の使い方に合わせて使い分けをしてください。

２．文字のアニメーションをCSSのみで作る基本の作り方。

by WOKANDAPIX pixabay

動作の説明

①初期状態

表示する文字列（文書など）が表示される。

②アクション1：「アニメーションボタン」をクリックする

文字列が消えた状態になる。

③アクション2：再度、「アニメーションボタン」をクリックする

文字列が一字毎に少し遅れて表示される。上から降りてくる感じで表示される。

See the Pen Untitled by Seiji Nakamura (@sjnkmr_777) on CodePen.

コーディングの説明

index.html

<div id="container">
    <div class="animate-title inview">
        <span class="char">A</span>
        <span class="char">N</span>
        <span class="char">I</span>
        <span class="char">M</span>
        <span class="char">A</span>
        <span class="char">T</span>
        <span class="char">I</span>
        <span class="char">O</span>
        <span class="char">N</span>
        <span class="char">(</span>
        <span class="char">C</span>
        <span class="char">S</span>
        <span class="char">S</span>
        <span class="char">)</span>
    </div>
    <button onclick="document.querySelector('.animate-title').classList.toggle('inview');">ｱﾆﾒｰｼｮﾝﾎﾞﾀﾝ</button>
</div>

アニメーションする文字列「ANIMATION(CSS)」を分解。

各文字をspanタグで挟む。

文字列全体に、animate-titleとクラス名

文章全体を初期状態で表示するため、inviewとクラス名をつける。

アニメーション動作のため、buttonタグを設ける。

ｱﾆﾒｰｼｮﾝﾎﾞﾀﾝの表現については、非推奨。

便宜上もコードのため、ここでは無視して正式には先のJavaScriptで説明します。

onclick=”document.querySelector(‘.animate-title’).classList.toggle(‘inview’);”

SCSS

@use "mixin" as *;

body {
  margin: 0;
}
#container {
  position: relative;
  height: 100vh;
  background-color: teal;
}

.animate-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;

  &.inview {
    opacity: 1;

    & .char {
      display: inline-block;

      @include animation(
        $name: kf-animate-chars,
        $duration: 0.5s,
        $fill-mode: both
      );

      @for $i from 1 through 14 {
          &:nth-child(#{$i}) {
              animation-delay: $i * 0.04s;
          }
      }
    }
  }
}

@keyframes kf-animate-chars {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

前提：DartSassに準ずる。

_mixin.scss参照

スタイル

#container　背景色tealで全画面表示

animate-titleは、画面中央に配置

アニメーション

keyframeの動きの設定は、

アニメーション時間間隔は0.5秒

アニメーション前後でアニメーション表示状態を保持

アニメーションは、0.04秒遅れで文字を一字ずつ表示させる。

文字数は、14文字

keyframeで、

初期設定＆アニメーション0%では、opacity:0で透明に設定

アニメーション0%では、各文字はY軸上に50%配置

inview&アニメーション100%の時は、opacity:1で文字を表示

アニメーション100%では、各文字は初期状態
opacity:0%から遷移するので文字が浮き出る感じ

_mixin.scss

@mixin animation(
  $name,
  $duration: 1s,
  $timing-function: ease,
  $delay: 0s,
  $iteration-count: 1,
  $direction: normal,
  $fill-mode: forwards
) {
  animation: {
    name: $name;
    duration: $duration;
    timing-function: $timing-function;
    delay: $delay;
    iteration-count: $iteration-count;
    direction: $direction;
    fill-mode: $fill-mode;
  }
}

@mixin animationの初期値

アニメーション時間：1秒

時間変化方法：ease

アニメーション遅れ時間：0秒

アニメーション回数：1回

アニメーション方向：通常

アニメーション表示状態：アニメーション実行後の状態を保持

＊@mixinの使い方についてはこちらを参照ください。

_mixin.scssについては、以下同じなので記入しません。

３．文字のアニメーションをCSSとJavaScriptで作る基本の作り方

by geralt pixabay

動作の説明

動作はCSSのみと同じです。htmlでの書き方が変わります。

See the Pen animation-CSS and JS by Seiji Nakamura (@sjnkmr_777) on CodePen.

JavaScriptを使うことでできること

■　index.htmlに文字列、文章を普通＊に書けばアニメーションできる。
　　＊普通とは、文字単位で分割せずに文章の形で書く意味です。

そのためにJavaScriptでやっている事

■　JavaScriptでは、普通に書かれた文字列を文字単位に分解する。

■　JavaScriptで分解した文字をanimationのスタイルに変換する。
　　spanタグで挟まれたスタイルに変換する。

SCSSでやっている事

■　分解されてる文字をアニメーションする。

コーディングの説明

index.html

iner">
    <div class="animate-title inview">
        ANIMATION(CSS and JS)
    </div>
    <button onclick="document.querySelector('.animate-title').classList.toggle('inview');">ｱﾆﾒｰｼｮﾝﾎﾞﾀﾝ</button>
</div>
<script src="main.js"></script>

アニメーションする文字列、文章を普通＊に書く。

＊普通とは、文字単位で分割せずに文章の形で書く意味です。

JavaScriptを参照

他は、前章と同じです。

SCSS

@use "mixin" as *;
body {
  margin: 0;
}
#container {
  position: relative;
  height: 100vh;
  background-color: teal;
}
.animate-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  opacity: 0;
  &.inview {
    opacity: 1;
    & .char {
      display: inline-block;
      @include animation(
        $name: kf-animate-chars,
        $duration: 0.5s,
        $fill-mode: both
      );

      @for $i from 1 through 21 {
          &:nth-child(#{$i}) {
              animation-delay: $i * 0.04s;
          }
      }
    }
  }
}

@keyframes kf-animate-chars {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

アニメーションの文字数のみ変更

@for $i from 1 through 21

他の部分は、前章と同じ

JavaScript

document.addEventListener('DOMContentLoaded', function () {

    const el = document.querySelector('.animate-title');

    const str = el.innerHTML.trim().split("");
    
    el.innerHTML = str.reduce((acc, curr) => {
        curr = curr.replace(/\s+/, '&nbsp;');
        return `${acc}<span class="char">${curr}</span>`;
    }, "");

});

アニメーションする文字列を分解します。

animate-titleクラスの内容を「el」に読み込みます。

「el」の文字列に対して、

trim()で、paddingなどの設定を削除し、

split(“”)で、文字列を文字毎に分解します。

reduce()で、

分解した文字を、<span>タグで挟み並べ直します。

replace()で、ブランク””を、’&nbsp;’に置き換えて””を認識できるようにします。

【　JavaScriptを読む時の予備知識　】

DOM:ドキュメントオブジェクトモデル (Document Object Model)

DOMContentLoadedイベント： HTML の初期文書が完全に読み込まれ解釈された時点で発生

addEventListener()メソッド：インターフェイスのメソッドで、ターゲットに特定のイベントが配信されるたびに呼び出される関数を設定

querySelector(セレクター)メソッド：呼び出された要素の子孫要素の中で、指定されたセレクター群に一致する最初の要素を返します

reduce()メソッド：配列のそれぞれの要素に対して、ユーザーが提供した「縮小」コールバック関数を呼び出します。その際、直前の要素における計算結果の返値を渡します。配列のすべての要素に対して縮小関数を実行した結果が単一の値が最終結果になります。

【reduce()部分の置き換え例】

reduce()関数が理解しにくい場合は、下記のコーディング例を参照してみてください。

置き換え前

el.innerHTML = str.reduce((acc, curr) => {
    curr = curr.replace(/\s+/, '&nbsp;');
    return `${acc}<span class="char">${curr}</span>`;
}, "");

置き換え後

let Strchange = '';
for(let c of str) {
    c = c.replace(/\s+/, '&nbsp;');
    Strchange = Strchange + `<span class="char">${c}</span>`;
}
el.innerHTML = Strchange;

４．文字のアニメーションをCSSとJavaScriptを使うひとつ上の作り方

by geralt pixabay

動作の説明

①初期状態

複数の文字列（文書など）が表示される。

②アクション1：「アニメーションボタン」をクリックする

複数の文字列が消えた状態になる。

③アクション2：再度、「アニメーションボタン」をクリックする

複数の文字列が、同様にアニメーションする。
文字列が一字毎に少し遅れて表示される。上から降りてくる感じで表示される。

See the Pen animation-css and JS,Class by Seiji Nakamura (@sjnkmr_777) on CodePen.

JavaScriptでClassを使うことでできること

index.htmlに複数の文字列、文章を普通に書けば同じアニメーションで動かせる。

そのためにJavaScriptでやっている事

■　JavaScriptでは、”Class” を使い基本の動作を定義する。
　　普通に書かれた文字列を文字単位に分解する。
　　文字をspanタグで挟まれたスタイルに変換する。

■　JavaScriptで、それぞれの文字列を new演算子で有効化する。(=インスタンス化)
　　・文字列についているclass名について有効化して、実行する。
　　・文字列の数だけ設定が必要です。

■　”ｱﾆﾒｰｼｮﾝﾎﾞﾀﾝ”をクリックする度に、文字列に”inview”クラスをtoggleで付与/消す。
　　文字列の表示をコントロールしている。

SCSSでやっている事

■　分解されてる文字をアニメーションする。

コーディングの説明

index.html

<div id="container">
    <div class="animate-title">
        [1] ANIMATION (CSS and JS+Class)
    </div>
    <div class="animate-title-2">
        [2] ANIMATION (CSS and JS+Class)
    </div>
    <button id="btn">ｱﾆﾒｰｼｮﾝﾎﾞﾀﾝ</button>
</div>
<script src="main.js"></script>

アニメーションする複数の文字列、文章を普通＊に書く。

＊普通とは、文字単位で分割せずに文章の形で書く意味です。

<button>タグの設定をJavaScriptで作成のため、記載簡素化

SCSS

@use "mixin" as *;
body {
  margin: 0;
}
#container {
  padding:30px;
  height: 100vh;
  background-color: teal;
}
.animate-title,
.animate-title-2 {
  color: white;
  opacity: 0;
  padding:10px;

  &.inview {
    opacity: 1;
    & .char {
      display: inline-block;
      @include animation(
        $name: kf-animate-chars,
        $duration: 0.5s,
        $fill-mode: both
      );
      @for $i from 1 through 35 {
          &:nth-child(#{$i}) {
              animation-delay: $i * 0.04s;
          }
      }
    }
  }
}

@keyframes kf-animate-chars {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

スタイル

paddingでスペース確保

アニメーションの文字数のみ変更

@for $i from 1 through 35

他の部分は、前章と同じ

JavaScript

document.addEventListener('DOMContentLoaded', function () {

    const btn = document.querySelector('#btn');

    const ta = new TextAnimation('.animate-title');
    const ta2 = new TextAnimation('.animate-title-2');

    ta.animate();
    ta2.animate();

btn.addEventListener('click',ta.animate.bind(ta));
btn.addEventListener('click',ta2.animate.bind(ta2));
});

class TextAnimation {

    constructor(el) {
        this.el = document.querySelector(el);
        this.chars = this.el.innerHTML.trim().split("");
        this.el.innerHTML = this._splitText();
    }

    _splitText() {
        return this.chars.reduce((acc, curr) => {
            curr = curr.replace(/\s+/, '&nbsp;');
            return `${acc}<span class="char">${curr}</span>`;
        }, "");
    }

    animate() {
        this.el.classList.toggle('inview');
    }
}

JavaScriptでアニメーションする文字列の分解、btnでinviewの付加/消去をします。

btn idの内容を「btn」「ta」「ta2」に読み込みます。

下で定義したclass TextAnimationを animate-title、animate-title-2についてインスタンス化して、ta, ta2に読み込みます。

初期設定の時に、animate()を実行し”inview”をta,ta2につけます。

btnを、clickした時に、animate()を実行し”inview”をta,ta2につけたり消したりします。

＊参考＊
：この部分のコーディングはこちらに置き換えられます。
btn.addEventListener(‘click’, function () { ta.animate();});

class TextAnimationの設定

constructor()内で、

要素elを読み込み、

読み込んだ文字列について、_splitText() 関数を使い文字毎に分解しします。

_splitText() 関数で、reduceで文字列を分解し、その文字を<span>タグで挟んで並べ、その結果をreturnします。

animate()関数で、classListに”inview”を付けたり消したり交互におこないます。
この関数は、外部から参照します。

＊クラス（class TextAnimation）の扱いについて知りたい場合は、こちらを参照ください。

５．文字のアニメーションをアプリケーション：TweenMaxを使った作り方【参考】

by geralt pixabay

動作の説明

①初期状態

複数の文字列（文書など）が表示される。

②アクション1：「アニメーションボタン」をクリックする

複数の文字列が一時消えた状態になる。
複数の文字列が、同様にアニメーションする。
文字列が一字毎に少し遅れて表示される。上から降りてくる感じで表示される。

See the Pen Untitled by Seiji Nakamura (@sjnkmr_777) on CodePen.

TweenMaxを使うことでできること

■　今までと同様に、index.htmlに文字列、文章を普通＊に書けばアニメーションできる。

そのためにJavaScriptでやっている事

■　アプリケーションTweenMax：GSAPを使って文字のアニメーションを実現する。

　　＊GSAPはこちらを参照ください。

SCSSでやっている事

■　スタイルを定義しているのみ。

コーディングの説明

index.html

    <div id="container">

        <div class="tween-animate-title">
            [1] PLAY ANIMATION PLAY ANIMATION PLAYANIMATIONPLAY (by TweenMax)
        </div>
        <div class="tween-animate-title-2">
            [2] ANIMATE STRING ANIMATE STRING ANIMATE STRING (by TweenMax)
        </div>
        <button id="btn">Animation</button>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
    <script src="main.js"></script>

アニメーションする複数の文字列、文章を普通＊に書く。

＊普通とは、文字単位で分割せずに文章の形で書く意味です。

<button>タグの設定をJavaScriptで作成します。

main.jsを読み込む前で、gsap.min.jsを読み込みます。

SCSS

#container {
  position: relative;
  height: 100vh;
  background-color: teal;
}
.tween-animate-title,
.tween-animate-title-2 {
  color: white;
  opacity: 0;
  font-weight: bold;

  &.inview {
    opacity: 1;
    & .char {
      display: inline-block;
    }
  }
  & .char{
    opacity: 0;
  }
}

スタイル

アニメーションは、JavaScriptで作成するため、すスタイルのみを規定してます。

JavaScript

document.addEventListener('DOMContentLoaded', function () {
    const btn = document.querySelector('#btn');

    const ta = new TweenTextAnimation('.tween-animate-title');
    const ta2 = new TweenTextAnimation('.tween-animate-title-2');

    ta.animate();
    ta2.animate();
    btn.addEventListener('click', ta.animate.bind(ta));
    btn.addEventListener('click', ta2.animate.bind(ta2));
});

class TextAnimation {
    constructor(el) {
        this.DOM = {};
        this.DOM.el = document.querySelector(el);
        this.chars = this.DOM.el.innerHTML.trim().split("");
        this.DOM.el.innerHTML = this._splitText();
    }
    _splitText() {
        return this.chars.reduce((acc, curr) => {
            curr = curr.replace(/\s+/, '&nbsp;');
            return `${acc}<span class="char">${curr}</span>`;
        }, "");
    }
    animate() {
       this.DOM.el.classList.toggle('inview');
    }
}


class TweenTextAnimation extends TextAnimation{
    constructor(el) {
        super(el);
        this.DOM.chars = this.DOM.el.querySelectorAll('.char');
    }
    animate() {
        this.DOM.el.classList.add('inview');
        this.DOM.chars.forEach((c, i) => {
            gsap.to(c, .6, {
                ease: Back.easeOut,
                delay: i * .05,
                startAt: { y: '-50%', opacity: 0},
                y: '0%',
                opacity: 1
            });
        });
    }
}

JavaScriptでアニメーションする文字列の分解、btnでinviewの付加/消去をします。

TweenMaxでアニメーションもJavaScriptで実現します。

btn, idの内容を「btn」,「ta」,「ta2」に読み込みます。

下で定義したclass TweenTextAnimationを tween-animate-title、tween-animate-title-2についてインスタンス化して、ta, ta2に読み込みます。

初期設定の時に、animate()を実行し”inview”をta,ta2につけます。

class TextAnimationの設定

constructor()内では、前章で設定した内容と同じです。

class TweenTextAnimationの設定

extends TextAnimation　と記述することで、class TextAnimation を継承しています。

constructor の中で、super(el);　と記述することで、constructorの内容を継承しています。

class TweenTextAnimation の中で記述する内容は、上書きになります。

anmate() 内で、TweenMaxの設定をします。

SCSSでのアニメーションの設定は不要になります。

＊TweenMaxの設定方法は、こちらを参照ください。

６．まとめ

by Skitterphoto pixabay

文字アニメーションの使い方を解説致しました。

今回の説明を理解すれば、自在にアニメーションの動きを変更して使えます。

参考にしてもらえれば幸いです。

最後まで読んでいただきありがとうございます。

極力正確に伝えるように心がけました。

足りない部分、適切でない部分、補足などが有りましたらご指摘等お願いいたします。

Copyright–Seiji Nakamura, 2024 All Rights Reserved.

人気記事

サイト内検索の標準版とhtmlで自作するカスタマイズした検索窓

positionプロパティの使い方とposition:absoluteで高さがなくなる場合の対処方法

電気自動車の電磁波・ノイズの車内での実際の対策【インバータのシールドなど】

電気自動車の電磁波・ノイズで事故や健康被害を起さない為に、電磁波が発生する原理を理解してから対策を考えます

みんなが使うnavbarとちょっと洒落たnavbarをcssとhtmlでつくれます

関連記事

初心者がLibSassをDartSassに移行する方法【@useと@forwardを使いこなす】
ホームページの下層ページの作り方を、失敗しないためのヒントをまじえて初心者にわかりやすく解説します。
by kareni pixabay
CSSを使いBackground imgのアスペクト比を保ちバランス良く画像を画面いっぱいに表示する方法
SCSSの効率的な繰り返し処理：forループ内で:nth-child( ) を使う手順
Animationとkeyframesを使うと洒落たアニメーションをcssで実現できます。動きのあるページを作ろう
スマホに対応したハンバーガーメニューとクリックしたときに開くシンプルなナビメニューと少し洒落たナビメニューの作り方
positionプロパティの使い方とposition:absoluteで高さがなくなる場合の対処方法
エックスサーバーを使ったWordPressブログの始め方【初心者でもわかる手順書】