jcSlider

JavaScript

CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

jcSliderは、アニメーションを使用しないスライダーのプラグインです。すべてをCSS3で指示します。距離やサイズを計算する必要は一切ありません。スライダーの常識を覆すプラグインです。アニメーション化したい要素にクラスを追加したり消去したりするだけでいいのです。これ以上に簡単なものはあったでしょうか。もちろん、レシポンシブ対応のプラグインとなっているので、ご安心ください!

jcSlider

デモ

jcSliderは、CSSアニメーションで応答するスライダーjQueryプラグインです。

1KBと、とても軽量なファイルです。jsファイルはたった1つだけです。本当に必要なことができれば、それで十分なのです。また、アニメーション化したいものがあれば、それはHTMLでも画像でもなんでも可能です。

スライドと聞くと、左右上下に画像が流れていくイメージをお持ちの方も多いかと思います。jcSliderは、そのイメージとは異なり、並べた画像がそれぞれ指定したエフェクトで表現されると思ってください。なので大量の画像ギャラリーに埋め込むよりは、コンテンツそのものの入口としてインパクトを持たせて表現することに適しているという印象をうけました。

実装は、必要なファイルをダウンロードし、それらを読み込めば、あとはulとli要素を使用しHTMLをマークアップします。

jcSliderの魅力ですが、なんといってもスライドエフェクトの種類が豊富であることです。配布サイトで紹介されているだけでも74種類ありました。すごい種類ですね。スライドさせたいものが画像であるか、テキストであるか、またインパクトを与えたいとき、静かに見せたいときなど様々なクライアント・制作者の意向に合わせて選択できます。一部を下記に紹介します。

bounce、flash、pulse、rubberBand、shake、swing、tada、wobble、jello、bounceIn、bounceInDown、bounceInLeft、bounceInRight、bounceInUp、bounceOut、bounceOutDown、bounceOutLeft、bounceOutRight、bounceOutUp、fadeIn、fadeInDown……

jcSlider

Zoomify画像ズーム効果によるシンプルなライトボックスを実装できる「Zoomify」前のページ

画像にマッチした背景色を配色してくれる「jquery.adaptive-backgrounds.js」次のページjquery.adaptive-backgrounds.js

関連記事

  1. jQuery Waterwheel Carousel

    JavaScript

    水平や垂直方向に配置できる水車のような便利なカルーセル「jQuery Waterwheel Caro…

    水平方向や垂直方向に配置できる水車のような便利なカルーセル「jQuer…

  2. FModal.JS

    JavaScript

    シンプルなフルスクリーンのモーダルウィンドウ「FModal.JS」

    FModal.JSはシンプルなフルスクリーンのモーダルウィンドウを実装…

  3. DropDownMenu

    JavaScript

    レスポンシブ対応で多階層なドロップダウンメニューを実装できる「DropDownMenu」

    DropDownMenuは、レスポンシブに対応した多階層なドロップダウ…

  4. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  5. Flex-Slider-jQuery

    JavaScript

    シングルでもマルチでもOKなフレキシブルなスライダー「Flex-Slider-jQuery」

    Flex-Slider-jQueryは、フレキシブルなスライダーを実装…

  6. Fly to

    JavaScript

    カートに入れた際に飛んでいくエフェクトのjQueryプラグイン「Fly to」

    Fly toは商品をカートに入れた際にカートまで飛んでいくエフェクトを…

最近の記事

  1. クリニカのY字タイプのフロス
  2. 日和山公園の桜
  3. 成城石井 フレンチロースト
  4. COMOLI カシミアシルクニットパーカ
  5. 橋

アーカイブ

PAGE TOP