NivoスライダーみたいなエフェクトをjQueryで組んでみる
Nivoスライダーのエフェクトがかっこ良いので、
そのエフェクトの一つをjQueryで再現してみました。
↓こちらが作ってみたもの
HTML
|
1 2 3 4 5 6 7 | <div class="contents"> <ul class="slider"> <li><a href="#"><img src="images/image01.jpg" alt="image"></a></li> <li><a href="#"><img src="images/image02.jpg" alt="image"></a></li> <li><a href="#"><img src="images/image03.jpg" alt="image"></a></li> </ul> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 | } .contents{ width: 960px; padding: 30px 0; margin: 30px auto; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); } ul li{ list-style: none; } </style |
Javascript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 | $(function(){ /*----------------------------- 初期設定 -----------------------------*/ //対象の指定 var tgElm = $(".slider"); //スライダーのスタイルを整える tgElm.css("height", tgElm.find("li:first").height() + "px"); tgElm.css({ "position" : "relative" }); tgElm.find("li").css({ "position" : "absolute", "top" : "0", "left" : "0" }); //スライダーの情報を取得 var sldHeight = tgElm.find("li:first").height(); //スライダーの高さ var sldWidth = tgElm.find("li:first").width(); //スライダーの幅 var sldNum = tgElm.find("li").size(); //スライダーの数 //エフェクトの設定 var sldBlockNum = 12; //エフェクトでの画面分割数 var sldSpeed = 400; //エフェクトの速度 //エフェクトのブロック計算 var blockHeight = sldHeight; var blockWidth = Math.round(sldWidth / sldBlockNum); /*----------------------------- エフェクトの実装準備 -----------------------------*/ tgElm.find("li a").each(function(){ $(this).parent("li").prependTo(tgElm); for(i = 0; i < sldBlockNum; i++){ $(this).append("<span class='sldBlock" + i + "'"+"></span>"); //画面分割数の分、リストのアンカーの中にspanをクラスをつけて追加 var bgSrc = $(this).find("img").attr("src"); //スライダーの画像のsrcを取得 //追加したspanにCSSを設定 $(this).find("span.sldBlock" + i).css({ "display" : "inline-block", "position" : "absolute", "width" : blockWidth + "px", "height" : blockHeight + "px", "top" : "0", "left" : blockWidth * i + "px", "background-repeat" : "no-repeat", "background-image" : "url(" + bgSrc + ")", "background-position" : -blockWidth * i + "px 0", }); } $(this).find("img").css("opacity", "0"); }); /*----------------------------- エフェクトの実行 -----------------------------*/ setInterval(function(){ tgElm.find("li span, li").css("opacity", "1"); var sldCnt = 0; var clFlag = 0; var sldTimer = setInterval(function(){ tgElm.find("li:last").find("span.sldBlock" + sldCnt).animate({ "opacity" : "0" }, sldSpeed,function(){ if(sldCnt > sldBlockNum){ clearInterval(sldTimer); if(sldCnt > sldBlockNum && clFlag==0){ tgElm.find("li:last").animate({ "opacity" : "0" },sldSpeed , function(){ tgElm.find("li:last").prependTo(tgElm) }); } clFlag=1; } }); sldCnt++; }, sldSpeed/(sldBlockNum / 2)); }, sldSpeed * 10); }); |
仕組みとしては、
スライダーのそれぞれの画像の全面に<span>で分割したブロックをおいて、
それぞれに背景画像をずらして置き、
それぞれを順番にフェードアウトすることで実現しています。
普通のスライドのエフェクトに飽きてしまった場合などに使えるかもしれません。
追記：このままだと、デバイスによってはスライダーの高さがちゃんと取得されず、
スライダーが表示されない状態になってしまうことがあるようですので、
javascriptの27行目の”//スライダーの情報を取得”から87行めの”}, sldSpeed * 10);”までを
$(window).load(function(){
・・・
});
で囲む必要がありました。
↓書き換えたJavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | $(function(){ /*----------------------------- 初期設定 -----------------------------*/ //対象の指定 var tgElm = $(".slider"); //スライダーのスタイルを整える tgElm.css("height", tgElm.find("li:first").height() + "px"); tgElm.css({ "position" : "relative" }); tgElm.find("li").css({ "position" : "absolute", "top" : "0", "left" : "0" }); //スライダーの情報を取得 $(window).load(function(){ var sldHeight = tgElm.find("li:first").height(); //スライダーの高さ var sldWidth = tgElm.find("li:first").width(); //スライダーの幅 var sldNum = tgElm.find("li").size(); //スライダーの数 //エフェクトの設定 var sldBlockNum = 12; //エフェクトでの画面分割数 var sldSpeed = 400; //エフェクトの速度 //エフェクトのブロック計算 var blockHeight = sldHeight; var blockWidth = Math.round(sldWidth / sldBlockNum); /*----------------------------- エフェクトの実装準備 -----------------------------*/ tgElm.find("li a").each(function(){ $(this).parent("li").prependTo(tgElm); for(i = 0; i < sldBlockNum; i++){ $(this).append("<span class='sldBlock" + i + "'"+"></span>"); //画面分割数の分、リストのアンカーの中にspanをクラスをつけて追加 var bgSrc = $(this).find("img").attr("src"); //スライダーの画像のsrcを取得 //追加したspanにCSSを設定 $(this).find("span.sldBlock" + i).css({ "display" : "inline-block", "position" : "absolute", "width" : blockWidth + "px", "height" : blockHeight + "px", "top" : "0", "left" : blockWidth * i + "px", "background-repeat" : "no-repeat", "background-image" : "url(" + bgSrc + ")", "background-position" : -blockWidth * i + "px 0", }); } $(this).find("img").css("opacity", "0"); }); /*----------------------------- エフェクトの実行 -----------------------------*/ setInterval(function(){ tgElm.find("li span, li").css("opacity", "1"); var sldCnt = 0; var clFlag = 0; var sldTimer = setInterval(function(){ tgElm.find("li:last").find("span.sldBlock" + sldCnt).animate({ "opacity" : "0" }, sldSpeed,function(){ if(sldCnt > sldBlockNum){ clearInterval(sldTimer); if(sldCnt > sldBlockNum && clFlag==0){ tgElm.find("li:last").animate({ "opacity" : "0" },sldSpeed , function(){ tgElm.find("li:last").prependTo(tgElm) }); } clFlag=1; } }); sldCnt++; }, sldSpeed/(sldBlockNum / 2)); }, sldSpeed * 10); }); }); |
Author Profile
SHARE
