東京のホームページ制作会社・web制作会社
株式会社シンシエイト

jQueryかJSでテキストを1文字ずつspanで囲う方法(空白・改行削除対応)

Java Script

見出しなどにJSでデザインを加えるときに、1文字ずつアニメーションを加えたいことがありますよね。HTMLで1文字ずつにspanを書き足すのは非現実的なので、jQueryで対象のテキストに一括でspanを追加してしまいましょう。

やりたいこと

結論

少し細かく書いていますが、まとめて書いちゃっても大丈夫です。

これで1文字ずつspanで囲われたと思うので、その他のJSやCSSアニメーションと連携すればOK。

プラグイン化する場合

当社の場合はプラグイン化して、使いまわせるようにしています。

こんな感じでプラグイン化すると使いやすくなります。

ちなみに、textをforEachで回す時に、クラスを追加したりdata-offsetやdata-delayなんていう感じで追加してあげるとさらに便利になったりもします。

三上 龍志
この記事を書いた人
三上 龍志
元パンパースのCMモデルがネタの株式会社シンシエイト代表。システムエンジニア出身営業育ち。ビーフジャーキー作りが趣味。webが大好きな2児の父。
株式会社シンシエイト ブログ フロントエンド Java Script jQueryかJSでテキストを1文字ずつspanで囲う方法(空白・改行削除対応)

web制作とマーケティングで
貴社の経営課題を解決します

web制作でのブランディングや、コンテンツマーケティング・SEO・ネット広告を中心としたウェブマーケティングを通じて、企業の事業を加速させるご提案をしています。

お電話でのお問い合わせはこちら

現在リモートワーク推進中のため、お電話が繋がりにくくなっております。
受付時間は平日10:00〜18:00です。セールス目的のお電話はご遠慮ください。