【jQuery】テキストカラーをシャッフルさせるjQueryプラグイン「JUMBLE」

 
指定したテキストのカラーをシャッフルさせるプラグイン。あまり日本語フォント向きではないかも知れませんが、シャッフルスピードの設定も可能なのでLPの訴求ポイントやクリックさせたいボタンなど、アピールしたい箇所に使えそうです。

JUMBLE

Githubに公開されてますのでファイル一式をダウンロードしてください。

使い方はjQueryとダウンロードしたjumble.jsを読み込ませます。

Java File
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="/js/jumble.js"></script>

あとは以下のようにhtmlを記述してjavaで適用する要素を指定して完成です。

html
<h1>JUMBLE DEMO</h1>
Java
$('h1').jumble([180,160,90],[230,20,130],true,false,200);


  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
  • CSSだけでブルブル震えるエフェクトを実装できる「CSShake」
  • 【jQuery】Youtubeの動画サムネイルをアニメーション表示させる「PreViewTube.js」
  • 様々なホバーエフェクトを実装できる「imagehover.css」
  • 【jQuery】ページめくり効果を付けられる「OneBook3d」
RELATED POSTS
  • 【Webデザイン】魅力的な動きをするレスポンシブメニュー
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • 【jQuery】画像のサイズを保持しつつレスポンシブに変化させる「ResponsifyJS」
  • 【jQuery】ロールオーバー時にテキストをシャッフルさせる「chaffle.js」
  • リデザインのレビューを集めたWebサービス「reDSGN」
  • SVGの背景パターンを手軽に作れるジェネレーター「SVG Backgrounds」
RECENT POSTS
  • 無料で使えるフリーアイコン素材サイト15選
  • 配色を決める時に役立つカラーパレット22選
  • 無料で使えるハロウィンデザイン・イラスト素材サイト
  • ロゴデザインの参考になるロゴギャラリーサイト16選
PICKUP
  • 無料で使用できる海外のフリー写真素材サイトまとめ
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • 無料で使えるおしゃれな英語の筆記体フリーフォント20選
  • 【2020年版】WordPressおすすめレンタルサーバー6選 -初心者向け-