文字がシャッフルしながら打ち込まれて表示されるエフェクトが実装できるライブラリ「shuffle-letters.js」

JavaScript / jQuery
この記事は約5分で読めます。

どうも上かるびです。

皆さんキーボードとマウス、アルコール消毒してますか。

 

今回は案件で使用した、テキストをシャッフルしながら表示するエフェクトを実装できるライブラリを紹介します。

スポンサードサーチ

shuffle-letters.js

まずはデモから。(閲覧はPC推奨)

DEMO

ダウンロード

こちらからダウンロードします。

Shuffle Letters Effect In Pure JavaScript - shuffle-letters.js | CSS Script
shuffle-letters.js is a lightweight JavaScript library that allows you to print text with a typing animation by shuffling the text letter by letter.

 

shuffle-lettersで検索すると、下記のjQueryのライブラリがヒットすると思いますが、今回こちらは使いません。

Shuffle Letters Effect: a jQuery Plugin
In this short tutorial we will be making a jQuery plugin that will shuffle the text content of any DOM element - an interesting effect that can be used in headi...

ただこちらのライブラリは割と使い勝手が良いので、サイトで一部だけのシャッフルでしたらこちらをおすすめします。

使い方

まずはライブラリを読み込みます。(バンドルツールを使っている方はimportやrequire)

あとはJavaSriptファイルで要素を指定してShuffleLettersを実行するだけです。

オプションとして、以下の3つが指定できます。

 

text(HTMLではなくJavaScript側で入力する場合)
step(何文字先までシャッフルさせるか)
fps(表示スピード)

公式ではHTMLに書いたものをシャッフルさせる場合と、JavaScriptに書いたものをシャッフルさせる場合の2通りが紹介されています。

HTMLに書いたものをシャッフルさせる場合

HTML

JavaScript(変数名は任意です)

上かるび
上かるび

複数の要素をシャッフルさせる場合でも、for文やforEachを使わなくても大丈夫です。

 

 

JavaScriptに書いたものをシャッフルさせる場合(textオプションを使用)

HTML

JavaScript

 

公式ではhidden属性を使った書き方も紹介されていたのですが、使いどころが分からなかったのでスルーしました(;^ω^)誰か教えて…

スクロールに合わせてシャッフルさせる場合

 

今回の案件でやりたかったパターン。

 

公式で紹介されていたhidden属性をつけて表示させるやり方で試しましたが、hidden属性がついた要素はintersectionObserverの監視に反応しない、ということが判明。

ということで、今回は公式のやり方ではなく、opacity:0にしておいて、交差したらis-showクラスをつけてopacity:1にするというやり方で実装しました。

 

HTML

JavaScript

CSS

後日談 シャッフルさせながら表示するライブラリはあまりなかった

今回は文字をシャッフルしながら表示させたいというアニメーションの要望があったのでこのライブラリを使用しました。

 

参考サイトとして提示されたのがこちらのカロリーメイトのサイト。

CalorieMate to Programmer | 大塚製薬
カロリーメイトから、すべてのうちこむ人へ。プログラミング言語で書かれたメッセージを公開中。 #うちこむ人にバランス栄養

すべてのアニメーションがカッコいい。

 

しかし「シャッフルエフェクト」などでググって出てくるライブラリやスニペットのほとんどは、その場でシャッフルするものだったり、JavaScript側でしか文字を入力できないものだったり。
小一時間調べましたが、最初は「これこれ!」というものが見つかりませんでした。。。

 

今回使用したライブラリに行きつくまでに、いろんなライブラリを試して時間を溶かしました。。。
そして最終的には先方から「ここのアニメーションはナシで」と告げられ、泣きそうになりました。

スポンサードサーチ

他のシャッフル系ライブラリの紹介

調べている途中で試したライブラリを紹介します。

気になる方はいろいろ触ってみてください。

 

有名制作会社ICSで作られたライブラリ

手軽にテキストシャッフル演出ができるJSライブラリ「shuffle-text」を公開
JavaScriptライブラリ「shuffle-text」を公開しました。shuffle-textはテキストシャッフル(文字列がランダムで切り替わる演出)の表現を行うためのライブラリで、SPA(シングル・ページ・アプリケーション)やゲームの演出やスペシャルコンテンツなどの演出に役立ちます。 たとえば、ウェブサイトでマウ...

タイピングではなく、その場でシャッフルされるアニメーション箇所にはこちらを使用させていただきました。

 

書籍も大ヒット中。「動くWebデザインアイディア帳」のサイト。
ICSさんのshuffle-textの活用して紹介されています。スクロールすると発火する記述もありますが、scrollイベントを使っているので負荷は重め。
https://coco-factory.jp/ugokuweb/move02/8-6/

 

5つのライブラリやスニペットが紹介されています。CodePenなどで調べると出てくるエフェクトもありますね。

5 Word Scrambler - Shuffle HTML & CSS Snippets Ξ ℂ𝕠𝕕𝕖𝕄𝕪𝕌𝕀
Handpicked collection of word scrambler design inspiration. ✅ GIF preview ✅ HTML CSS copy paste code.

 

jQueryのプラグインが紹介されているサイト

フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグイン 8 - NxWorld
フェード表示やタイピング風など、テキスト表示に動きをつけられるjQueryプラグインのまとめです。

 

 

コメント

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