ホームページ作成/画像の表示・活用 (HTML,CSS,JavaScript)

Skitterで迫力ある効果のスライドショーを作る方法

ダイナミックな効果で画像を次々に切り替えていく、とても目を引くスライドショーを作ってみましょう。jQueryで作られた「Skitter」スクリプトを使えば、カッコいい迫力ある効果を伴ったスライドショーが簡単に作れます。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

シンプルなスライドショーではなく、もっと凝った表示効果が欲しい?

シンプルなスライドショーでは物足りない?

シンプルなスライドショーでは物足りない?

ウェブページ上で次々に表示画像を切り替えていくシンプルなスライドショーの作り方は、記事「複数の画像がふわっと切り替わるスライドショーを作る」などでご紹介致しました。

それらの方法で実現できるのは、「スライド」や「フェイドイン・アウト」など、比較的シンプルな表示効果のスライドショーです。

しかし、それでは物足りないと感じる場合もあるでしょう。強く目を引く表示効果が欲しいときには、もっと迫力のあるスライドショーを作れるスクリプトを活用してみてはいかがでしょうか。

迫力のあるカッコいい効果のスライドショーを実現するスクリプト「Skitter」

Skitter公式サイト

Skitter公式サイト

jQueryを使って作られた「Skitter」というスクリプトを使うと、とても格好良く迫力のある効果を伴ったスライドショーが作れます。

右図のように、Skitter公式サイトのトップページ自体が、Skitterの動作サンプルページになっています。Skitterで実現できるすべての表示効果が順番に現れますので、どのような効果が使えるのかがすぐに分かります。


 
画像切替効果「cube」を使ったスライドショーの例
下図は、「cube」という名称の画像切替効果を静止画にしてみた例です。「次の画像」がバラバラのパーツ(長方形)に分解され、その各パーツが右下から少しずつ左上へ飛んできて、次第に「次の画像」に切り替わっていきます。

Skitterを使った特殊な画像切替効果を伴ったスライドショーの例

Skitterを使った特殊な画像切替効果を伴ったスライドショーの例


上記の表示効果を実際にブラウザで確認できるサンプルページを用意しています。ぜひ、覗いてみて下さい。上図の切替効果が現れるのは、4枚目の写真(桜餅)から1枚目の写真(川)に戻るタイミングです。

38種類のスライド効果
38種類の切替効果がある

38種類の切替効果がある

このように、「Skitter」スクリプトには、以下のような38種類もの画像切替効果が用意されています。これらの表示効果を自由に組み合わせて、迫力のあるスライドショーを作成できます。
  • 次の画像をバラバラに分解してスライドさせて並べる
  • 現在の画像を上下に大きくカットしてスライドさせて、切り開くように次の画像を見せる
  • 現在の画像をぐるりと大きく回転させて次の画像を見せる
……など、どれもダイナミックな効果で画像を次々に切り替えられるため、目を引くスライドショーになるでしょう。

スライドショーを制御する豊富なオプションも搭載
プログレスバーや、画像番号ボタンなどのコントロール機能も充実

プログレスバーや、画像番号ボタンなどのコントロール機能も充実

なお、「Skitter」スクリプトには、画像を切り替える様々な効果だけでなく、(次の画像までの待ち時間を表す)プログレスバーを表示したり、表示画像をユーザが切り替えるコントロールにプレビュー機能を加えたり、各種アイコンのデザインを変更したり……など、たくさんの機能も用意されています。

今回は、この「Skitter」スクリプトを使って、迫力のあるスライドショーを作る方法を解説致します。


 
それでは、まずは、「Skitter」一式をダウンロードして、必要なファイルを自サイトにアップロードしましょう。
  • 1
  • 2
  • 3
  • 4
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます