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

    JavaScript

    設定した高さに基づいて複数行のテキストを切り取る「Shave」

    Shaveは設定した最大の高さに基づいてHTML要素内に収まるように複…

  2. jQuery Reel Plugin

    JavaScript

    上下左右の色んな角度から画像を回転させて見せることができる「jQuery Reel Plugin」

    これは面白いですね。画像を上下左右と色んな角度から回転させながら見るこ…

  3. MG Space

    JavaScript

    Google画像のようなアコーディオンプラグイン「MG Space」

    MG SpaceはGoogle画像のようなjQueryアコーディオンプ…

  4. Slideme

    JavaScript

    スライドでコンテンツを魅せることができるjQueryプラグイン「Slideme」

    SlidemeというjQueryプラグインを使えばコンテンツをスライド…

  5. JavaScript

    回転するアニメーション付きの円形ナビゲーションを実装できる「wheelnav.js」

    wheelnav.jsは回転する円形のナビゲーションを実装することがで…

  6. floatThead

    JavaScript

    テーブルのヘッダーを固定できるjQueryプラグイン「floatThead」

    floatTheadはテーブルのヘッダーを固定することができるjQue…

最近の記事

  1. KMC-80BK
  2. 味噌ラーメン〜旨辛にんにく味噌〜
  3. STP-XH70
  4. 久保田城
  5. ハードサイド CS80

Instagram始めました

Facebookページ

PAGE TOP