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


  • 音楽に合わせて要素を動かすことができる「Rythm.js」
  • 【jQuery】Youtubeがウィンドウ内に表示されたタイミングで再生させるプラグイン
  • 【jQuery】ページにマーカーを実装することができる「markerPen」
  • 【jQuery】エフェクトが魅力的なスライダー「jQuery Hero Slider Plugin」
  • 【jQuery】商品一覧ページなどで効果的に使える「Product Preview Slider」
RELATED POSTS
  • 【JS】要素をモーダルウィンドウに変化させる「cta.js」
  • 世界の国旗をCSSとdivのみで実装する「CSS Flags」
  • CSSやHTML5・Twiterカードなどのコードを生成できる「Web Code Tools」
  • 【jQuery】チルトホバーエフェクトを実装できる「Tilt.js」
  • 様々なチャートを生成できるライブラリ「TOAST UI Chart」
  • Webサイトのページ表示速度を測定できる無料サービスまとめ
RECENT POSTS
  • 【2021年版】 WordPressのおすすめテーマ17選(無料版/有料版)
  • 【2021年版】 無料で使えるフリー画像・写真素材サイト27選(国内/海外)
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • 【2021年版】 無料で使えるフリー動画素材サイト10選
POPULAR POSTS
  • 【2021年版】 無料で使えるフリーイラスト素材サイト33選(商用利用可)
  • 【無料】漢字が使える日本語フリーフォント70選
  • 【2021年版】 Google Fontsの使い方とおすすめ日本語フォント
  • フォントを調べる時に役に立つツール・サイト10選
  • Youtubeの埋め込み動画をレスポンシブに対応させる方法