NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2015.06.16

今すぐ使いたくなる!個性的でわくわくする動きのスライダー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を使用します。

  • 1
  • 2