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

xGallerifyサイズが異なる画像でもキレイに表示できるギャラリー実装「xGallerify」前のページ

アイテムを追加するとカートがスライド表示される「Add To Cart Interaction」次のページAdd To Cart Interaction

関連記事

  1. blurify

    JavaScript

    画像にぼかし効果を実装できる軽量のJSライブラリ「blurify」

    blurifyは画像にぼかし効果を実装することができるJSライブラリで…

  2. no-image

    JavaScript

    テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

    jTyperはテキストリンクをタイピングアニメーションで表示できるjQ…

  3. Relocator
  4. JavaScript

    クリックで画像や要素にオーバーレイを表示させるjQueryプラグイン「Purplecoat.js」

    Purplecoat.jsはクリックすると画像や好きな要素にオーバーレ…

  5. 2013年上半期jQueryプラグインまとめ

    JavaScript

    当ブログで今まで紹介したjQueryプラグイン25選のまとめ 2011/09 – 201…

    2011年9月〜2012年3月までに当ブログで紹介したjQueryプラ…

  6. Inspiration for Menu Hover Effects

最近の記事

  1. タリーズ ハムチーズ&サラダサンド
  2. クリニカのY字タイプのフロス
  3. 日和山公園の桜
  4. 成城石井 フレンチロースト
  5. COMOLI カシミアシルクニットパーカ

アーカイブ

PAGE TOP