テキストをシャッフルしながら表示するjQueryプラグインを試してみた。キリンブログ福岡在住のウェブ制作がんばるおじさんが少ない語彙力で更新するブログ。Web制作テキストをシャッフルしながら表示するjQueryプラグインを試してみた。Tweet気になっていたjQueryプラグインを試してみました。試したのは下記のプラグインで、テキストがランダムにシャッフルしながら表示されていきます。Pluginダウンロードしたファイルを元にデモサイトも作ってみました。IEでは動かないので独自のメッセージを込めました。デモサイト以下、カスタマイズのメモになります。jquery.shuffleLetters.jsの最初のほうを見ていきます。complete},prop)この後にもまだ同じ関数の記述がずーっと続きますが、まずはここでテキストシャッフルのスピードや回数を調整しています。同ファイルの最後にあるrandomChar()でシャッフルに使うテキストを設定しています。arr[Math.floor(Math.random()*arr.length)];}script.jsではまず変数の宣言をします。この変数hHTML内のid要素に対応しています。$('#userText');あとはサイトを開いて4秒経つとsetTimeout()内の処理が実行されます。return..").fadeIn();},4000);例えば4秒ごとにエフェクトさせて新たな文字列に変化させたい場合は、setTimeout()を新たに追加して引数の4000を8000とか12000とか増やしていけばOKです。本当は繰り返し文を使ってスマートに出来るのでしょうが、僕はそこらへんまだよくわかってないので今回は下記のようなソースを書いてみました。"3行目のテキストです。yourself!"});},16000);めちゃくちゃ冗長な感じでわかりずらいですね。精進します!それでもこうやって動くものが作れるとなんだか嬉しいものです。parallax.jsをいじってパララックスのデモ作ってみた。Shadowを使ってみたら便利すぎて感動した。