Blog

画像やコンテンツを左右にスライド、スクロールするjQuery

画像ギャラリーや、商品を見せるのに、使えるjQueryプラグインを紹介します。

Smooth-Div-Scrollというプラグインです。

 

プラグインのダウンロードは以下から。

https://github.com/tkahn/Smooth-Div-Scroll

 

デモを作成したので、ご覧ください。

DEMO

 

Smooth-Div-Scrollの使い方

まずはhead内に以下のソースを読み込みます。

こちらはすべて読み込まないと動きません。

(jquery.mousewheel.min.jsはなくても大丈夫かも・・・)

cssは自分で好きなように変更できるので、デザインに合わせて変更してください。

そして、以下のスクリプトを記述します。

こちらは、コンテンツの後に書かないとダメなようです。

</body>の直前に書くといいかと思います。

 

 

htmlは、

 

で完了です。

あとは、デフォルトでimagesも用意されています。

 

デモのソースを記述します。

javascript

 

 

デフォルトの設定では、アニメーションは最初しかならず、一度マウスオンしてしまうと、 アニメーションは動きません。

ですので、上記のように記述をするとアニメーションがされるようになります。

 

オプションも豊富にあります。

http://www.smoothdivscroll.com/options.html

 

html

css

 

あとは、直接cssファイルの中身をご覧ください。

http://sterfield.co.jp/demo/abe/07/css/smoothDivScroll.css

 

ECサイトの商品を見せるのに、動きがあって良いかと思います。

これとlightboxなんかと合わせるとよりよくなるかと思います。

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ