Random Quote Machine

JavaScript

ランダムにテキスト(クオート)を表示させる「Random Quote Machine」

Random Quote Machineは、設定したデータのなかからランダムにテキスト(クオート)を表示させることができます。jQueryとJSONが使われており、表示させたい文章をJSON形式にまとめ、そこからランダムにデータを引き出しています。実装・機能ともにシンプルで、手軽に活用できるのではないでしょうか。

Random Quote Machine

デモ

デモページにアクセスすると、ダブルクオートで囲まれたテキストが表示されます。「New Quote」ボタンをクリックするたびに、ランダムで新しい文章に切り替わります。

文章が切り替わるたびに、テキストカラーや背景カラーも変化するのがおもしろいですね。フェードアニメーションを使った優雅な雰囲気も◎

カラーリストはjsファイル内に記述されているので、ここから好きな値に変更できます。

また同じくjsファイル内からフェードイン、フェードアウトの速度も自由に設定できます。コード内の値を直接変更するので、jQueryプラグインのオプションみたいに気軽にカスタマイズできるわけではありませんが、シンプルなコードなのですぐにわかると思います。

デモで設定されているfadeIn、fadeOutの値は「1000」です。つまり1秒でフェードイン・フェードアウトされます。

文章をランダムに表示させながら、テキスト・背景カラーも同時に変化させる「Random Quote Machine」。

Random Quote Machine

関連記事

  1. Amigo Sorter Plugin

    JavaScript

    タッチ対応で直感的に並べ替えできるjQueryプラグイン「Amigo Sorter Plugin」

    Amigo Sorter Pluginは、タッチ対応で直感的にリスト項…

  2. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  3. Micromodal.js

    JavaScript

    アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」

    Micromodal.jsは、アクセシブルでファイル容量も軽量なモーダ…

  4. jQuery contextMenu plugin & polyfill
  5. vallenato.js

    JavaScript

    シンプルで実装も簡単なjQueryアコーディオン「vallenato.js」

    vallenato.jsは、シンプルで簡単に実装することができるjQu…

最近の記事

  1. スタバのドリップのホットのショート
  2. LE エルイー 6 PANEL CAP
  3. タリーズ ハウスブレンド
  4. BAG-TW1BKシリーズ

アーカイブ

PAGE TOP