Blog

NivoスライダーみたいなエフェクトをjQueryで組んでみる

2013.11.26Cat:jQuery デザイナー

Nivoスライダーのエフェクトがかっこ良いので、

そのエフェクトの一つをjQueryで再現してみました。

 

↓こちらが作ってみたもの

DEMO

 

HTML

 

CSS

 

Javascript

 

仕組みとしては、

スライダーのそれぞれの画像の全面に<span>で分割したブロックをおいて、

それぞれに背景画像をずらして置き、

それぞれを順番にフェードアウトすることで実現しています。

 

普通のスライドのエフェクトに飽きてしまった場合などに使えるかもしれません。

 

追記:このままだと、デバイスによってはスライダーの高さがちゃんと取得されず、

スライダーが表示されない状態になってしまうことがあるようですので、

javascriptの27行目の”//スライダーの情報を取得”から87行めの”}, sldSpeed * 10);”までを

$(window).load(function(){

・・・

});

で囲む必要がありました。

 

↓書き換えたJavaScript

 

 

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

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

Archive

ページTOPへ