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

関連記事

  1. jQuery.sdFilterMe

    JavaScript

    コンテンツを並べ替えれるフィルタリング機能の実装「jQuery.sdFilterMe」

    jQuery.sdFilterMeは、ポートフォリオ、記事、ギャラリー…

  2. FlipClock.js

    JavaScript

    時計・タイマー・カウントダウンを実装できるjQueryプラグイン「FlipClock.js」

    FlipClock.jsというjQueryプラグインを使えば、時計・タ…

  3. Horizon Swiper

    JavaScript

    スワイプやスクロール対応の軽量なjQueryプラグイン「Horizon Swiper」

    Horizon Swiperはスワイプやブラウザスクロールに対応したj…

  4. JavaScript

    指定した画像を遅らせてローディングさせるjQueryプラグイン「Lazy Karl」の使い方

    ちょっと面白そうだったので試してみました。画像を表示させるまでの間にロ…

  5. JavaScript

    シンプル・軽量・簡単なLightBox系モーダルウィンドウのjQueryプラグイン「portBox」…

    portBoxというjQueryプラグインを使えばシンプルで軽量なLi…

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP