【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);

  • 様々なスタイルのCSSを簡単に作れる「Generate CSS」
  • 【jQuery】ページにマーカーを実装することができる「markerPen」
  • 【jQuery】スクロールに合わせて要素を切り替える「Midnight.js」
  • 【jQuery】背景画像のスライドショーを実装する「Vegas2」
  • 水中の歪みを表現したエフェクトが気持ちいい「Liquid Distortion Effects」
RELATED POSTS
  • CSSアニメーション制作に役立つライブラリ・ツール14選
  • アニメーションが素敵なツールチップ「Playful Little Tooltip Ideas」
  • 【jQuery】ページにマーカーを実装することができる「markerPen」
  • 【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」
  • 30秒以内に理解できるCSSスニペットのコレクション「30 Seconds of CSS」
  • Neumorphismを簡単に作れるジェネレーター「Neumorphism.io」
RECENT POSTS
  • 背景や区切り線などを簡単に装飾できるCSSライブラリ「pattern.css」
  • セクションの区切りをデザインできる「CSS Section Separator Generator」
  • 動画やアニメーションgifの背景を自動で消去してくれる「Unscreen」
  • ポップなイラストをダウンロードできる「Download 80 free illustrations」
PICKUP
  • 【無料】おすすめのフリー画像・写真素材サイト10選【商用利用可】
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • Photoshopで画像を切り抜くテクニック【初心者向け】
  • CSSで作成する吹き出しとデザインのアイデア