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. js-offcanvas

    JavaScript

    上下左右にオフキャンバスのナビゲーションを実装できる「js-offcanvas」

    js-offcanvasは、上下左右にオフキャンバスのナビゲーションを…

  2. NO IMAGE
  3. footerMenu

    JavaScript

    スクロールでフッターメニューを表示させる「footerMenu」

    footerMenuはスクロールするとフッターメニューを表示させること…

  4. Stacked Strips

    JavaScript

    スタックしながらスクロールできるエフェクト実装「Stacked Strips」

    Stacked StripsはWebページをスクロールする時に、スタッ…

  5. Ink Transition Effect

    JavaScript

    インクをこぼしたようなエフェクトを実装できる「Ink Transition Effect」

    Ink Transition Effectはインクがこぼれて広がったよ…

最近の記事

  1. Soundcore Liberty Neo(第2世代)
  2. EH-NA0B
  3. KPS-88
  4. Happy Plugs AIR1
  5. cheero Stream 10000mAh

アーカイブ

PAGE TOP