no-image

JavaScript

豊富なオプションでカスタマイズ性も高いjQueryスライダー「startVal」

startValは豊富なオプションやAPIを有したカスタマイズ性の高いスライダーを実装できるjQueryスライダープラグインです。ボリュームある内容ですが、プラグイン自体は軽量に仕上がっていたりマークアップもシンプルに記述できたりと、使いやすそうな印象です。

startVal

デモ

デモでは賑やかな動きをするスライダーが設置されています。スライダー下部には左右に切り替える矢印ボタン、スライダー右上にはナビゲーションが設置されています。

スライダーは一定時間が経過すると自動でスライドするようになっています。スライダー下部にその時間を示すプログレスバーが表示されるので、このバーが左から右へ伸びていき、右端まで伸びると次の画像にスライドされます。

アニメーションは画像がグルッグルッと回転するダイナミックな動きをします。最初は時計回りに回転して、その後に今度は反時計回りに回転します。

オプションやAPIにはたくさんの項目が用意されているので、カスタマイズして使いたい人には嬉しい仕様ですね。ちなみに先ほどのアニメーションもオプションから変更することができます。

アニメーションは「animation」の項目から設定可能です。デフォルトは「rotation」で、この他にもtranslation、vibration、zoomといった値が用意されています。

オプションを利用することで細部まで自分好みにカスタマイズできると思うので、気になる方はぜひチェックしてみてください。

startVal

no-image円形に広がるメニュー実装「expanding action button」前のページ

要素ごとにスクロールできるjQueryプラグイン「snapScroll.js」次のページno-image

関連記事

  1. flexImages

    JavaScript

    軽量でFlickrやGoogle画像検索のようなギャラリーのjQueryプラグイン「flexImag…

    flexImagesというjQueryプラグインを使えば、軽量でレスポ…

  2. Responsive Sidebar Navigation
  3. Choreographer-js

    JavaScript

    多彩なCSSアニメーションを実現できる「Choreographer-js」

    Choreographer-jsは、多彩なCSSアニメーションを実現さ…

  4. Starfield

    JavaScript

    宇宙空間を移動するような背景アニメーションを実装できる「Starfield」

    Starfieldは宇宙空間を移動するような背景アニメーションを実装す…

  5. no-image

    JavaScript

    オシャレなスクロールエフェクトを実装できる「jQuery Smoove」

    jQuery Smooveは、オシャレなスクロールエフェクトを実装する…

  6. Chariot

    JavaScript

    Webページ内でステップごとのガイドツアーを実装できる「Chariot」

    ChariotはWebページ内でのガイドツアーを実装することができるJ…

最近の記事

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

アーカイブ

PAGE TOP