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


今すぐ使いたくなる!個性的でわくわくする動きのスライダー12選(Javascript・CSS3)
(編集部注*2012年11月19日に公開された記事を再編集したものです。)

こんにちは、サリーです。
最近は無料のスライダーでも良質のものがたくさん溢れていて、どれを使っていいか悩みすぎてしまう。。ということがよくありまして。
「これだ!」という決め手があればなあ。ということで、今回は他との違いを見せつける個性的なスライダーばかりを集めてみました。
今すぐ使いたくなるような、わくわくする動きでいっぱいです。デモページと共に紹介していきます。


【最新スライダーはこちら!】

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

Slit Slider Revised

Slit Slider Revised

DEMO

絵が真ん中から横にバカッと、時には縦にバカッと割れます。
デモにはフルスクリーン版と、縦幅固定版が用意されています。
CSS3を使用します。

Windy

Windy

DEMO

紙が風に飛ばされたように、色々な方向へぺらぺらっとめくれていきます。
連続でめくると楽しいです。

Elastic Image Slideshow with Thumbnail Preview

Elastic Image Slideshow with Thumbnail Preview

DEMO

エラスティック・レイアウト対応のスライダー。
スライダーのナビゲーションバーにマウスを置くと、サムネイルがふわっと上から落ちてくるのが印象的です。

Circle Navigation Effect with CSS3

Circle Navigation Effect with CSS3

DEMO

一見普通のスライドショーに見えますが、特徴は左右の矢印ボタン。
次ページのサムネイルがアニメーションで現れます。
CSS3を使用します。

Slicebox

Slicebox

DEMO

絵がルービックキューブのごとく3Dに割れます!
インパクト大!

Rotating Image Slider with jQuery

Rotating Image Slider with jQuery

DEMO

画像が扇状に4枚配置され、右の矢印を押すと左から順に、左の矢印を押すと右から順に切り替わります。
4枚目の画像が一気に切り替わるので、サンプルのファッションショー?のように、写真がたくさんある場合に向いています。
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など)

この記事を書いた人

サリー
サリー デザイナー 2011年入社
LIGのデザイナーです。ウェブデザイナーの頂点を目指すために東京に来ました。立ちはだかる敵は全てなぎ倒してきました。これからもそうやって歩いて行くつもりです。