38種類のエフェクト効果のあるスライダー=Skitter実装マニュアル。

skitterスライダーイメージ

jQueryを使ったコンテンツスライダーの話です。

今回は、動きがカッコイイ38種類のエフェクト効果を、簡単に実装できるスライダー【Skitter】の設置方法を紹介しましょう。
※ちなみに、このサイトのヘッダーに設置しているスライダーもSkitterです。

※jQueryファイルをご自身のサイトに実装された事が無い方は、こちらの記事「jQueryプラグインの使い方入門 HTMLでのファイル読み込み3ステップ」を参照下さい。

実装に必要なファイルを入手し、アップロードする。

まずは、Skitter公式サイトから必要なZIPファイルを入手しましょう。
Skitter公式サイト→http://www.skitter-slider.net
サイトの右上にある【Download】からダウンロードできます。

入手したZIPファイルには、HTMLファイル・CSSフォルダ・jsフォルダがありますが、HTMLは使いません。

まず、CSSフォルダの中のstyle.css以外のファイルおよび、highlight.black.cssもしくはhighlight.cssを、あなたのサイトにアップロード。

そして、jsフォルダ内のjQuery.minとjquery.skitter.minを除いたファイル(※ただし、あなたのサイトにjQuery.jsが無い場合はこの限りではない)をアップロードしてください。
また、イメージフォルダの中身ですが、とりあえず全部アップロードしておけば間違いないです。

図示すると以下のようになります。

skitterアップロードファイル1

skitterアップロードファイル2

アップロードファイルを読み込ませる。

あなたにとっては今さらの内容かもしれませんが、念のためcssとjsの読み込みについて記しておきます。
以下のソースを<head></head>内に記述して、アップロードしたファイルを読み込ませましょう。

<!– ▼skitter用スタイルシート –>
<link href=”http://アップロード先のパス/skitter.styles.css” type=”text/css” media=”all” rel=”stylesheet” />
<link href=”http://アップロード先のパス/highlight.black.css” type=”text/css” media=”all” rel=”stylesheet” />
<link href=”http://アップロード先のパス/sexy-bookmarks-style.css” type=”text/css” media=”all” rel=”stylesheet” />
<!– ▼skitter用スクリプト –>
<script type=”text/javascript” src=”http://アップロード先のパス/jquery.easing.1.3.js”></script>
<script type=”text/javascript” src=”http://アップロード先のパス/jquery.animate-colors-min.js”></script>
<script type=”text/javascript” src=”http://アップロード先のパス/jquery.skitter.min.js”></script>
<script type=”text/javascript” src=”http://アップロード先のパス/highlight.js”></script>
<script type=”text/javascript” src=”http://アップロード先のパス/sexy-bookmarks-public.js”></script>

実行用のスクリプトおよびHTMLを記述する。

Skitterは、良くある<ul>タグ<li>タグで制御するスライダーです。
まずは、以下のサンプルHTMLをスライダーを表示させたい場所に記述します。

◆HTML
<div class=”box_skitter box_skitter_large“>
<ul>
<li>
<a href=”http://お好きなリンク先”><img src=”images/01.jpg(表示したいスライダー画像のパス)” class=”block” /></a>
<div class=”label_text”>
<p>キャッチコピーや説明</p>
</div>
</li>
<li>
<a href=”http://お好きなリンク先”><img src=”images/02.jpg(表示したいスライダー画像のパス)” class=”cube” /></a>
<div class=”label_text”>
<p>キャッチコピーや説明</p>
</div>
</li>
<li>
<a href=”http://お好きなリンク先”><img src=”images/03.jpg(表示したいスライダー画像のパス)” class=”default” /></a>
<div class=”label_text”>
<p>キャッチコピーや説明</p>
</div>
</li>
</ul>
</div>

上記のbox_skitter_largeは、スライダーの大きさを指定しているクラスです。
デフォルトはW800×H300となっています。

大きさを変更したい場合は、skitter.styles.cssファイルに記述された【.box_skitter_large {width:800px;height:300px;}】を書き換えてください。

続いて、実行用のスクリプトを記述。これはHTMLの上部に記述しましょう。

◆Script
<script type=”text/javascript”> $(function(){ $(‘.box_skitter_large’).skitter({animation:”randomSmart“}); }); </script>

スクリプトの文字列randomSmartはエフェクト効果を制御しています。
これを書き換えると、動きを変えることができますので、以下の38種類から好きなものを選んでください。
実際の動きは、公式サイトで確認できます。

  1. cube
  2. cubeRandom
  3. block
  4. cubeStop
  5. cubeHide
  6. cubeSize
  7. horizontal
  8. showBars
  9. showBarsRandom
  10. tube
  11. fade
  12. fadeFour
  13. paralell
  14. blind
  15. blindHeight
  16. blindWidth
  17. directionTop
  18. directionBottom
  19. directionRight
  20. directionLeft
  21. cubeStopRandom
  22. cubeSpread
  23. cubeJelly
  24. glassCube
  25. glassBlock
  26. circles
  27. circlesInside
  28. circlesRotate
  29. cubeShow
  30. upBars
  31. downBars
  32. hideBars
  33. swapBars
  34. swapBarsBack
  35. swapBlocks
  36. cut
  37. random
  38. randomSmart

上記のサンプルを書き換えて、お好みでカスタマイズ。

紹介しましたSkitter実装法は、あくまでサンプルです。
なので、色々と書き換えながらお好みのスライダーにしていただければと思います。

人気の無料メール講座を、ご利用ください。

  • 【プロ直伝】制作前に必ず行う2つのこととは?
  • 【重要】収益サイト制作者が取るべき手段は何か?
  • 【発表】魅せるデザインのラインナップはこちらです。
  • 【無料】必ず入れておくべき、フリープラグイン8選!
  • 【一瞬】瞬時にサイトの印象を引き立てる方法。
  • 【3.5倍】こうして成約率が急上昇しました。
  • 【注意】なぜ記事を増やしてもアクセスが伸びないのか?

※下記のフォームからメール講座に ご登録いただけます。

記事をシェアする

  • Tweetする
  • FaceBookでシェアする
  • はてブにBookmarkする
  • Google+で共有する

Tags


Trackbacks & Comments

Trackback URL for this post:

Leave a Reply