開発コストを削減「BiTT開発」って?
開発コストを削減「BiTT開発」って?
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
2