How satisfied are you? Slider

JavaScript

スライダーの位置でアイコンが変化する「How satisfied are you? Slider」

How satisfied are you? Sliderは、スライダーを左右に動かすことで、その位置によってアイコンが変化するスライドバーを実装できるチュートリアルです。シンプルなスライドバーで操作もしやすく、応用次第でいろんなシーンに活用できそうですね。

How satisfied are you? Slider

How satisfied are you? Slider

デモでは「How satisfied are you?」と表示されたスライドバーが設置されています。バーを左右にスライドさせてみると分かると思いますが、顔のアイコンが表示され、真ん中を基軸に右へ移動させると笑っているアイコンになり、左へ移動させると不満なアイコンに変化します。

スライドの位置に応じてアイコンが切り替わるのでとてもおもしろい機能ですね。何かのレビュー評価など、用途によってはいろいろと応用できるのではないでしょうか?

というわけで、スライドバーの位置によってアイコンが変化する「How satisfied are you? Slider」の紹介でした。

関連記事

  1. Zoomer

    JavaScript

    画像をズームできてギャラリーにもすることができるjQueryプラグイン「Zoomer」

    ZoomerというjQueryプラグインを使えば画像をズームさせる機能…

  2. WD_ImageStax

    JavaScript

    山積みされた写真をシャッフルさせるフォトギャラリー「WD_ImageStax」

    WD_ImageStaxは無造作に山積みされた写真をシャッフルさせるフ…

  3. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

  4. Light-Zoom

    JavaScript

    CSSを使用した画像ズームを実装できるjQueryプラグイン「Light-Zoom」

    Light-Zoomは純粋なCSSを使用した画像ズーム(拡大)機能を実…

  5. no-image

    JavaScript

    スクロールした時に最適な位置に合わせてくれる「jQuery.panelSnap」

    jQuery.panelSnapは、コンテンツごとに縦に並べられたパネ…

  6. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryでsetTimeoutを使えば各要素のアニメーションを実行させる時間を調整できる

    jQueryのsetTimeoutを使えば何秒後に実行するかといったこ…

最近の記事

  1. Anker PowerPort Atom PD 4
  2. USB-2H401BKN
  3. Dyson Pure Cool Me
  4. ルック セレクション

アーカイブ

PAGE TOP