GOODTABLE鎌倉オープン
GOODTABLE鎌倉オープン
2015.06.16

今すぐ使いたくなる!個性的でわくわくする動きのスライダー12選(Javascript・CSS3)

サリー

Parallax Slider with jQuery

Parallax Slider with jQuery

DEMO

パララックスです!
背景も一緒にスライドします。

Modern Slide In

Modern Slide In

レスポンシブデザイン対応スライダーです!
かなりい〜い感じに縮まってくれます。
CSS3を使用します。

Sliding Horizontal Parallax

Sliding Horizontal Parallax

※現在このページは表示できません。
レスポンシブ+パララックス!
写真の登場の仕方がかっこいい。
CSS3を使用します。

Apple Style

Apple Style

※現在このページは表示できません。
その名の通り、Appleっぽいデモ。
かっこよく製品紹介するときに使いたい。
CSS3を使用します。

Rhinoslider

Rhinoslider

DEMO

色々なエフェクトが選べます。
シンプルなものも用意されていますが、絵がサイコロ状に切り刻まれてバラバラになる「shuffle」「explode」がおすすめ。
切り刻む横線と縦線の数を選べます(限界あり)ので、どちらかを「1」にすれば短冊状にもなります。

AviaSlider

AviaSlider

最後にご紹介する「AviaSlider」は有料……お値段は12ドルでございます。
エフェクトは数パターンから選ぶことができます。
うっとりするほど滑らかに切り替わります。
案件を選ばない上品な動きなので、有料でも買う価値ありです。

まとめ

集めはじめてすぐ気づいたんですが、なんと12個中7個が「codrops」さんのものになってしまいました。作者はフリーランスのWebデザイナー&ディベロッパーのMary Louさんと、Pedro Botelhoさん。codropsは2012年8月に3周年を迎えて、「3 YEARS OF CODROPS」というこれまた素敵な特設サイトが公開されていました。スライダー以外のjsもすぐに使いたくなるものばかりですよ〜。

※ご利用の場合は、対応ブラウザ、ライセンスなどをお確かめの上ご利用下さい。

 

【関連リンク】

高機能なJavaScriptの人気スライダープラグイン4つを実際に使ってレビューしてみた

簡単で高機能!デザイナー必見の汎用性が高いjQueryプラグイン7選

スマホサイト構築に便利なドロワーメニュー・スワイプのjQueryプラグインまとめ

ページやブロック要素の切り替えがかっこいいプラグイン6選(jQuery・JSなど)

  • 1
  • 2