【jQuery】文字列に自動的にspanタグを設定する方法
JavaScript（jQuery）を使ったテクニックをご紹介します。
Webサイトで以下のようなテキストを順番に浮き上がらせるようなエフェクトって見かけますよね。
上記のようなエフェクトは、文字ひとつひとつをspanタグを囲うことで簡単に実装できます。
というわけで、JavaScript（jQuery）を使ってまとめて設定できるようにしてみました。
文字列に自動的にspanタグを設定する方法を解説
まずはサンプルHTMLをご覧ください。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
// jQuery CDN読み込み
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>文字列にspanを自動設定するサンプル</title>
</head>
<body>
<main>
<dl class="text-wrapper">
<dt class="text-span">About</dt>
<dt class="text-span">Services</dt>
<dt class="text-span">Contact Us</dt>
<dt class="text-span">日本語もいけます</dt>
</dl>
</main>
</body>
</html>サンプルHTML内の『class=”text-span”』が設定されている文字列（dtタグ）を分解してspanを設定していきます。
例えばAboutという文字列は、以下のようにしたいということですね。
<dt class="text-span">
<span>A</span>
<span>b</span>
<span>o</span>
<span>u</span>
<span>t</span>
</dt>一文字ずつ手作業で書き換えても良いのですが、新しく要素が追加になった時や文字列の変更、別ページでも同じような記述が発生するとかなり手間に感じます。
そんな時はJavaScript（jQuery）を使って自動設定してしまいましょう！
JavaScriptのサンプルコードはこちら
$(document).ready(function () {
// 文字列へのspan設定
$(".text-span").each(function() {
var content = $(this).html();
var trimText = $.trim(content);
var newText = "";
trimText.split("").forEach(function(e) {
if(e == ' '){
// 空白対策
newText += '<span> </span>';
} else {
newText += '<span>' + e + '</span>';
}
});
$(this).html(newText);
});
});
簡単に説明しますと【text-spanクラスが設定されている要素を一文字ずつ取り出して前後にspanタグを付ける】を繰り返す処理です。
これだけ作っておけば、ページ読み込み時に自動実行されるようになって非常に便利です。
別プロジェクトにも流用しやすい！
テキストが左から一文字ずつ浮き上がるアニメーションを付けてみる
span設定ができるとテキストに少し変わったエフェクトを付けられます。今回は冒頭で説明したテキストを順番に浮き上がらせるテキストモーションを実装してみましょう。
まずはCSSを使って、text-spanクラスの要素にshowが設定されたら、文字が浮かび上がるように設定します。
.text-span {
color: #1565C0;
font-size: 2.0rem;
letter-spacing: 1.6px;
margin-bottom: 10px;
margin-left: 20px;
overflow: hidden;
opacity: 0;
}
.text-span.show {
opacity: 1;
}
.text-span span {
display: inline-block;
transform: translate(0, 105%);
transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;
}
.text-span.show span {
transform: translate(0, 0);
}
.text-span.show span:nth-child(2) {
transition-delay: 0.06s;
}
.text-span.show span:nth-child(3) {
transition-delay: 0.12s;
}
.text-span.show span:nth-child(4) {
transition-delay: 0.18s;
}
.text-span.show span:nth-child(5) {
transition-delay: 0.24s;
}
.text-span.show span:nth-child(6) {
transition-delay: 0.30s;
}
.text-span.show span:nth-child(7) {
transition-delay: 0.36s;
}
.text-span.show span:nth-child(8) {
transition-delay: 0.42s;
}
.text-span.show span:nth-child(9) {
transition-delay: 0.48s;
}
.text-span.show span:nth-child(10) {
transition-delay: 0.54s;
}「.text-span.show span:nth-child(x)」といった記述が複数ありますが、1文字ずつ0.06秒ずつ遅れて動くようにするための工夫となります。今回は10文字まで対応させていますが、使いたい文字数に合わせて調整してみてください。
最後にJavaScript側でshowクラスを設定する処理を追加して完成です！
setInterval(() => {
$(".text-span").addClass('show');
}, 400);■完成版
See the Pen code01_text-span01 by f-tomoya7 (@f-tomoya7) on CodePen.
当然ですが、同じアニメーションを別要素でも使いたい時はtext-spanクラスを設定するだけで実装可能です。
文字列spanを活用したサンプルコード集
いくつかspanタグを適用した文字列でエフェクトを作ってみました。
See the Pen code01_text-span02 by f-tomoya7 (@f-tomoya7) on CodePen.
文字に強弱を付けることで、キャッチコピーや見出しでインパクトを与えることができます。
See the Pen code01_text-span03 by f-tomoya7 (@f-tomoya7) on CodePen.
文字単位で動きを付けることができますので、流れるようなモーションを作る時に重宝します。
まとめ
文字列にエフェクトを付ける際に一文字ずつspanタグを設定するのは正直非効率ですし、手作業だとどうしてもミスが生まれたりします。
今回ご紹介したスクリプトは、様々な場面で活用できるかと思いますので、参考にしてみてください。
でも、手作業で毎回設定するのって正直面倒…