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

    画面全体に背景を表示させフェードやスライドもできるjQuery「bgStretcher」

    ブラウザの画面全体に背景を表示させることができるjQueryプラグイン…

  2. JavaScript

    水面にゆらゆらと波打つ動きを与えてくれるjQueryプラグイン「lake.js」

    面白そうなプラグインだったので使ってみました。画像を指定するとその画像…

  3. Line Maker

    JavaScript

    アニメーションするラインを実装できる「Line Maker」

    Line Makerは、いろんなアニメーションをするラインを実装するこ…

  4. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

最近の記事

  1. 梅
  2. CAR-HLD12BK
  3. OWL-LPB6701LA

アーカイブ

PAGE TOP