【JavaScript】で文字を跳ねさせる方法

code coder coding computer 実践してみた
Photo by Pixabay on Pexels.com

今回はJavaScriptを使って文字を跳ねさせる方法について書きたいと思います。

以下のようなものが出来上がります。

想定読者

このブログは次の読者を想定しています。

  • JavaScriptを使って文字を跳ねさせたい

跳ねさせるコード

文字を跳ねさせるには次のコードを使います。

  • HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="description" content="test">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>test</title>

    <!-- CSS -->
    <link rel="stylesheet" href="css/stylesheet.css">

    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <main>
        <div class="jump">
            <p>文字を<span class="jump-text">ジャンプ</span>させる1</p>
        </div>

        <div class="jump">
            <p><span class="jump-text">文字を</span>ジャンプさせる2</p>
        </div>

    </main>
    <script type="text/javascript" src="js/script.js"></script>
</body>
</html>
  • CSS
.jump {
  padding: 30px;
  font-size: 30px;
}

.jump-text span {
  animation: pyon 0.3s linear;
  position: relative;
}

@keyframes pyon {
  0% {top: 0}
  50% {top:-17px}
  100%{top: 0}
}
  • JS
$(function() {
  randomCharactor('jump-text');
});

function randomCharactor(c) {

  //跳ねさせる要素をすべて取得
  var randomChar = document.getElementsByClassName(c);

  //for で総当たり
  for (var i = 0; i < randomChar.length; i++) {

      //クロージャー
      (function(i) {

          //i 番目の要素、テキスト内容、文字列の長さを取得
          var randomCharI = randomChar[i];
          var randomCharIText = randomCharI.textContent;
          var randomCharLength = randomCharIText.length;

          //何番目の文字を跳ねさせるかをランダムで決める
          var Num = ~~(Math.random() * randomCharLength);

          //跳ねさせる文字を span タグで囲む、それ以外の文字と合わせて再び文字列を作る
          var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);
          randomCharI.innerHTML = newRandomChar;

          //アニメーションが終わったら再び関数を発火させる
          document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function() {
              randomCharactor(c)
          }, false)
      })(i)
  }
}

JSのコードは以下のサイトのモノを参考にさせていただきました。

JavaScriptで文字をピョンピョン跳ねさせる

JavaScriptコード調査

JavaScriptのコードを理解するため1行ずつ調査していきます。

コード

$(function() {
  randomCharactor('jump-text');
});

単純に関数を実行しているだけです。

function randomCharactor(c) {

関数を作成。(c)はただの引数。

var randomChar = document.getElementsByClassName(c);

「randamChar」という変数に最初の関数実行で指定した「jump-text」というクラス名の要素を取り出しています。今回のHTMLで言うと以下になります。

  • <span class=”jump-text”>ジャンプ</span>
  • <span class=”jump-text”>文字を</span>

「document.getElementsByClassName()」はクラス名を取得するメソッドです。

for (var i = 0; i < randomChar.length; i++) {

for文で繰り返します。

「randomChar.length」は取得した要素の数を表します。
今回の場合は「jump-text」クラスが2つあるので「2」が入ります。

(function(i) {

for文の中で関数を使ってます。

var randomCharI = randomChar[i];

「randamCharI」変数に「randomChar[i];」の「i」番目の要素を取得しています。
今回の「0」番目の要素だと「<span class=”jump-text”>ジャンプ</span>」のことになります。

var randomCharIText = randomCharI.textContent;

「randomCharIText」変数に「randomCharI」の中にあるテキスト部分だけを取得しています。
今回の場合だと「ジャンプ」になります。

var randomCharLength = randomCharIText.length;

「randomCharLength」変数に「randomCharIText」の中にある文字数を取得しています。
今回の場合だと「ジャンプ」の文字数なので「4」になります。

var Num = ~~(Math.random() * randomCharLength);

「Num」という変数にランダムな数字と取得した文字数を乗算した値を取得しています。
「Math.random()」は「0から1」までの小数点を作り出します。
「~~」といのは小数点を切り捨てするものです。「2.45」なら「2」になります。

var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);

ココが一番長いのですが、やってることは単純で、ジャンプさせたい文字を「span」タグで囲っているだけです。
「newRandomChar」変数に文字列を代入しています。

「randomCharIText.substring(0, Num)」では取得したテキストの文字の0番目からNum番目までの文字を取得しています。「substring」は文字を抽出することができます。

今回で言うと次のようになります。

randomCharIText：ジャンプ
randomCharIText[0]：ジ
randomCharIText[1]：ャ
randomCharIText[2]：ン
randomCharIText[3]：プ

「+ “<span>” +」はspanタグを追加しているだけです。

「randomCharIText.charAt(Num)」では「Num」番目の文字を取得しています。
例えば「Num」が2の場合は「ン」になります。

「randomCharIText.substring(Num + 1, randomCharLength)」では最初と似ており、「Num＋１」番目の文字から最後までの文字を取得しています。

まとめると、もし「Num」が2だった場合で考えてみます。

「Num」が2だった場合
var newRandomChar = randomCharIText.substring(0, Num) + "<span>" + randomCharIText.charAt(Num) + "</span>" + randomCharIText.substring(Num + 1, randomCharLength);

「newRandomChar」には次の文字が入ります。

ジャ<span>ン</span>プ

randomCharI.innerHTML = newRandomChar;

「.innerHTML」は要素の中身を書き換えることができます。

そのため、上記で取得した「ジャ<span>ン</span>プ」に内容が書き換わります。

document.getElementsByClassName(c)[0].children[0].addEventListener("animationend", function() {
    randomCharactor(c)
}, false)

ジャンプが終わったら次の関数を実行させています。

「addEventListener」はイベントが発生した時に実行されます。
使い方は次のようになります。

  • 対象の要素.addEventListener(種類, 関数, false);

種類：どのイベント発生時に実施するか
関数：どの関数を実施するか

詳細な内容を知りたい場合は以下の公式サイトを参照ください。

今回の場合は「addEventListener」に次の引数を指定しています。

  • animationend：アニメーションが終わった時に実行する
  • randomCharactor(c)：randomCharactor関数を実行する

以上がJavaScript側の調査でした。

続いてCSS側です。

CSSコード調査

.jump-text span {
  animation: pyon 0.3s linear;
  position: relative;
}

アニメーションを使って0.3sごとに「pyon」が実行されます。

@keyframes pyon {
  0% {top: 0}
  50% {top:-17px}
  100%{top: 0}
}

キーフレームを使って0.15s毎に上に移動してから元に戻ります。

以上がCSSコードの調査になります。

もし、文字を飛ばせてみたい人は参考にしてみてください。

まとめ

最後まとめです。

  • 文字を飛ばすならJavaScriptでクラスを取得します
  • 取得したクラスの中身をランダムで<span>タグで囲みます
  • <span>タグで囲まれた文字だけを上に移動させるようにします

以上です。ありがとうございました。

コメント

タイトルとURLをコピーしました