早速データをいじりました。
リファクタリング病を発病したため、ソースの処理を見直したのと、実はcurrent表示のインジケーターを押せる悲しいバグがあったのを修正しました。
データは上書きしてます。。。
はい、こんにちは。
ソニックムーブ、マークアップ担当のだってぃです。
希望溢れる春ですね。
いいですね。
素敵ですね。
さてはて、またlabの更新が回ってきたわけですけども。
あまりいいネタが思いつかず・・・
そして多少の時間的余裕もあり・・・
というわけで、なんとなくこんなのあったらいいなぁ～
というjQueryのプラグインを作ってみましたよ。
（またJavascriptネタ・・・）
画像が短冊状にアニメーションするjQeryスライドショープラグイン
その名もjquery.splitcarousel.js！（ｼﾞｬｼﾞｬｰｰｰﾝ）
配置された画像を短冊状に切って、バラバラとアニメーションされて切り替わるカルーセル系（スライドショー）jQueryプラグインになります。
（※jQueryのバージョンは1.7以降であれば大丈夫・・・なはず。一応軽くテストはしました。）
何言ってんだこいつ？
って思いましたかね・・・思いますよね、うん。
とりあえずデモを見てください。
話はそれからだ！！！
画像が短冊状に切れて、バラバラとアニメーションされていくのがわかったでしょうか？
ちなみに、時間的余裕が多少だったということもあり、ちょいと積み残しというか、ブラッシュアップしたい箇所があるということを先に述べておきます・・・（言い訳先行型）
まぁ、version0ということで了承いただければ。
・・・・ね？
優しい世界が好きです。はい。
それではいってみよー！
目次
- 対応ブラウザ
- 使い方
- 注意事項
- デザインの変更について
- Javascriptの指定の仕方
- Javascript、オプションの指定
- オプションの指定方法
- 1. キャプションをいれる「isCaption」
- 2. 画像の分割数を変更する「split」
- 3. アニメーションの速度を変更する「duration」
- 4. 自動切り替えをOFFにする「isAuto」
- 5. 自動切り替えの間隔を変更する「interval」
- 6. 画像の分割方向を変更する「isVertival」
- 7. インジケーターを非表示にする「isIndicator 」
- 8. ページャーを非表示にする「isPager」
- 9. アニメーション終了後に処理をする「onComplete」
- 10. アニメーション開始直後に処理をする「onStart」
- 11. アニメーションのエフェクトを変更する「effect 」
- 12. その他：スライド関連のclassを変更するオプション
- 積み残し作業
- まとめ
対応ブラウザ
- IE8～：○※1
- Chrome：○
- Firefox：○
- iOS7～：△※2
- Android4～：△※2
※1.IE8は問題なく動きますが、動作が重いです。動かすものの数が多くどうしようもない。。。
※2.動作はします。そのあたりは確認はしていますが、現状、スマホ用に最適化されていないため使い勝手はよくないと思います。スライドショーエリアが幅・高さを固定値にしなければいけなかったりとか、アニメーションの処理がanimate使ってたりだとか・・・
そういえば、PCのSafari確認してないや・・・（´・ω・｀）・・・ｳﾝ・・・
使い方
まずデータを落としましょう。
【データ】
├ images/
├ css/
│ └ jquery.splitcarousel.css
├ js/
│ ├ jquery.splitcarousel.js
│ └ jquery.splitcarousel.min.js
└ index.html
んでもってhtmlは以下のように
|
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 |
[sourcecode lang="HTML"] <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>splitcarousel</title> <link rel="stylesheet" href="css/jquery.splitcarousel.css"> </head> <body> <div class="slide"> <ul class="slideDetect"> <li class="slideItem"><img src="images/slideimg1.jpg" width="600" height="400" alt=""></li> <li class="slideItem"><img src="images/slideimg2.jpg" width="600" height="400" alt=""></li> <li class="slideItem"><img src="images/slideimg3.jpg" width="600" height="400" alt=""></li> <li class="slideItem"><img src="images/slideimg4.jpg" width="600" height="400" alt=""></li> <li class="slideItem"><img src="images/slideimg5.jpg" width="600" height="400" alt=""></li> </ul> </div> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="js/jquery.splitcarousel.min.js"></script> <script> $(function(){ //ここに処理をかいていきますよ～。 }); </script> </body> [/sourcecode] |
注意事項
- jQueryプラグインなので、当然jQueryの読み込みは必須となります。
- jquery.splitcarousel.jsは通常版と圧縮版があるので、お好みに合わせてどちらかを読み込ませてください。
- HTMLの構造ですが、以下の3つの要素は必須となります。
※深く考えず、サンプルのHTML構造のまま使うのが無難です。1. splitcarouselを実行したい親要素(上記ソースだと.slide)
2. スライドさせたい画像を内包する要素（上記ソースだと.slideItem）
3. 2をまるっと内包した要素（上記ソースだと.slideDetect）タグには依存していないため、タグ自体はなんでもいいです。
1～3が全部divでも動きます。
デザインの変更について
スライドショーのデザイン面は、すべてCSSで担保しています。
デザインを変更したい場合は、適宜jquery.splitcarousel.cssファイルをいじってください。
jsの作り的に、分割する要素をposition:absoluteで重ねることは必須なので、そのあたりはいじらない方がいいと思われます。
Javascriptの指定の仕方
ずばりこうです！
|
1 2 3 |
[sourcecode lang="javascript"] $('.slide').splitCarousel(); [/sourcecode] |
簡単ですね～。
これでslideというclassが付いたものに対して、実行されます。
ちなみにidでもOKです。
|
1 2 3 |
[sourcecode lang="javascript"] $('#slide').splitCarousel(); [/sourcecode] |
classでの指定の場合、複数設置に対応しています。
まぁ、ページに何個も置かないとは思いますけれども。
Javascript、オプションの指定
jquery.splitcarousel.js、実はいくつかのオプションを用意していて、オプションの値を変えることで、多少動作を変えることができます。
そのオプションを紹介していきます～。
———————-
オプションの指定方法
まずは前提。オプションの指定はオブジェクト形式で記述します。
|
1 2 3 4 5 6 7 |
[sourcecode lang="javascript"] { key1 : value1, key2 : value2, key3 : value3 } [/sourcecode] |
こんなん。
これを
$(‘.slide’).splitCarousel();
の引数としてわたしてあげます。
|
1 2 3 4 5 6 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ key1 : value1, key2 : value2 }); [/sourcecode] |
こんなん。
さて、記述方法がわかったところでどんなオプションがあるか紹介していきます。
———————-
1. キャプションをいれる「isCaption」
isCaptionを使うと、キャプションをいれることができます。
とりあえずデモ見ましょう。
こんな感じのキャプションをいれることができます。
使い方は以下。
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ isCaption : true }); [/sourcecode] |
キャプションに入るテキストは、img要素のtitle属性から盗ってきているので、キャプションを入れる場合はimg要素にtitle属性を指定してください。
title属性を指定してない場合でもエラーにはならず、出ないだけです。
isCaptionの初期値はfalseになっているため、trueを指定しないとtitle属性を指定していてもキャプションは表示されません。
ちなみにis～～～ってなってるやつは、すべてboolean・・・つまりtrueかfalseかの指定になります。よろしく。
———————-
2. 画像の分割数を変更する「split」
splitを使うと画像の分割数を変えることができます。
使い方は以下
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ split: 20 }); [/sourcecode] |
これで、20分割になります。
あまり細かく分けると超絶重くなることが予想されるので、Max値を24としています。100とかいれても24になるので、そこんとこよろしく。
初期値は15です。
———————-
3. アニメーションの速度を変更する「duration」
durationを使うとアニメーションの速度を変更することができます。
使い方は以下
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ duration: 5000 }); [/sourcecode] |
これは特に制限をかけていないのでお好みで。
初期値は2000になります。
———————-
4. 自動切り替えをOFFにする「isAuto」
isAutoを使うと自動切り替えをOFFにすることができます。
使い方は以下
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ isAuto: false }); [/sourcecode] |
初期値はtrueになるので、指定しなければ自動再生されます。
———————-
5. 自動切り替えの間隔を変更する「interval」
intervalを使うと自動切り替の間隔を変更することができます。
使い方は以下
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ interval: 1000 }); [/sourcecode] |
初期値は5000になります。
———————-
6. 画像の分割方向を変更する「isVertival」
isVertivalを使うと画像の分割方向を変更することができ、何も指定しない時は横に分割されていた画像が、縦に分割されるようになります。
使い方は以下
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ isVertival : true }); [/sourcecode] |
初期値はtrueになります。
———————-
7. インジケーターを非表示にする「isIndicator 」
isIndicatorを使うとインジケーターを非表示にすることができます。
インジケーターとはスライド画像の下にある、小さい丸が並んでいるナビゲーションのことです。
使い方は以下
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ isIndicator : false }); [/sourcecode] |
初期値はtrueになります。
———————-
8. ページャーを非表示にする「isPager」
isPagerを使うとページャーを非表示にすることができます。
ページャーとは画像に乗っかってる、前矢印と後ろ矢印のボタンのことです。
使い方は以下
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ isPager : false }); [/sourcecode] |
初期値はtrueになります。
———————-
9. アニメーション終了後に処理をする「onComplete」
onCompleteを使うとアニメーション終了後に任意の処理を実行できます。
使い方は以下
|
1 2 3 4 5 6 7 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ onComplete: function(){ alert('アニメーションが終わりました'); } }); [/sourcecode] |
functionを渡してあげないと動かないのでご注意を・・・
———————-
10. アニメーション開始直後に処理をする「onStart」
onStartを使うとアニメーション開始直後に任意の処理を実行できます。
使い方は以下
|
1 2 3 4 5 6 7 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ onStart : function(){ alert('アニメーションが始まりました'); } }); [/sourcecode] |
onCompleteと同じくfunctionを渡してあげないと動かないのでご注意を・・・
———————-
11. アニメーションのエフェクトを変更する「effect 」
effectを使うとアニメーションのエフェクトを変更することができます。
今のところ1～6までとなってます。
使い方は以下
|
1 2 3 4 5 |
[sourcecode lang="javascript"] $('.slide').splitCarousel({ effect : 2 }); [/sourcecode] |
初期値は1となります。
———————-
12. その他：スライド関連のclassを変更するオプション
スライド関連のclass名を変更するためのオプションもあります。
サイトの仕様に合わせてclass名を変更したい場合は、これらを使用してください。
これらで指定したclass名は、かならずHTML・CSS上のclass名とあわせてください。
- detect ： 現状のHTML、.slideDetectに当たる部分のclassを任意のものに変更する。
- item ： 現状のHTML、.slideItemに当たる部分のclassを任意のものに変更する。
- indicator ： インジケーターのclassを任意のものに変更する。
- pager ： ページャーのclassを任意のものに変更する。
実は現状「detect」はjavascript内では使っていないのですが、将来的に幅100%対応とかしたときに必要になるかな～と思って付けているオプションだったりします・・・
オプションは以上になります。
積み残し作業
さて、冒頭でも言ったように、短い期間で作ったため作りこみできなかった部分があります。
自身へのTODOの意味も込め、将来的に対応すべき項目を書いておきますね。
- 幅・高さを固定しなくても大丈夫なようにする。
- アニメーション部分CSS3アニメーションに対応しているものはそれで対応するようにする。
- アニメーションのエフェクトの見直し・増加。
- スマホ最適化。
- 処理的にいけてない部分の見直し（なんか途中から煩雑になってしまい・・・）
まとめ
ということで、今回のlabの更新も無事に終わりました。
最後に今一度データ一式へのリンクを貼っておきます。
あ、ライセンスですが「MITライセンス」とさせていただきます。
基本的に、商用非商用問わず使えるし改変とかもご自由に・・・でも著作権情報は記載してねっていうアレですね。
それでは皆様、またいつの日か・・・ﾉｼ
（つぎのネタは何にしようかなぁ～～～～）
