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. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  2. jqTree

    JavaScript

    JSONデータからツリー構造を作成できるjQueryプラグイン「jqTree」

    jqTreeはJSONデータを元にHTMLでツリー構造を作成できるjQ…

  3. Priority Nav Scroller

    JavaScript

    水平スクロールができるナビゲーション「Priority Nav Scroller」

    Priority Nav Scrollerは水平スクロールを備えたナビ…

  4. Before and After image script
  5. Jquery progress indicator on page scroll

最近の記事

  1. EOS R6
  2. EOS R5
  3. Anker PowerExpand Direct 6-in-1 USB-C PDメディアハブ

アーカイブ

PAGE TOP