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. JavaScript

    Lightbox風のjQueryプラグインColorBoxの使い方

    綺麗なイメージギャラリーを簡単に設置できるColorBoxの使い方の紹…

  2. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

  3. PgwSlider

    JavaScript

    レスポンシブで軽量なスライダーを実装できるjQueryプラグイン「PgwSlider」

    PgwSliderというjQueryプラグインを使えばレスポンシブで軽…

  4. jQuery.GI.TheWall.js
  5. Playful Little Tooltip Ideas
  6. Slight Submenu

最近の記事

  1. SRS-XB43
  2. Nu:kin
  3. フィールグッドシャワー

アーカイブ

PAGE TOP