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. Building a Vertical Timeline With CSS and a Touch of JavaScript
  2. jQuery Flat Shadow

    JavaScript

    フラットデザインに影をつけてくれるjQueryプラグイン「jQuery Flat Shadow」

    フラットデザインのUIに影(シャドウ)をつけてくれるjQueryプラグ…

  3. SweetAlert
  4. Background Blur

    JavaScript

    画像をボカしてくれるクロスブラウザ対応の「Background Blur」

    Background Blurは画像をカッコよくボカしてくれるクロスブ…

  5. Simple HTML Menu

    JavaScript

    モバイルにもピッタリなレスポンシブ対応のメニュー実装「Simple HTML Menu」

    Simple HTML Menuは、モバイルにもピッタリなレスポンシブ…

  6. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

最近の記事

  1. サーモンアボカドサラダラップとドリップ
  2. 猿田彦フレンチ
  3. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  4. ビジネスホテル
  5. ドリップコーヒー

アーカイブ

PAGE TOP