1. 目立ちすぎないスタンダードなスライドショー

トップページなどで「定番コーナーを案内する」という目的なら、目立ちすぎず、自然な形でウェブサイトに溶け込ませられるスライドショーが望ましいでしょう。

複数の画像がふわっと切り替わるスライドショーを作る

複数の画像が数秒間隔でフェイドアウト・フェイドインを繰り返す「ふわっと表示が切り替わる」効果のあるスライドショーを作る方法を解説。jQueryを使ったスクリプト「A Simple jQuery Slideshow」を使うことで、とても短いJavaScriptソースで作成できます。

出典: 複数の画像がふわっと切り替わるスライドショーを作る [ホームページ作成] All About

2. 思いっきり目立つ、迫力のスライドショー

新情報を目立たせたい場合や、躍動感・力強さ・勢いを演出したい場合には、凝った画像切り替え効果がたくさん用意された派手なスライドショーを使ってみましょう。

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

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

出典: Skitterで迫力ある効果のスライドショーを作る方法 [ホームページ作成] All About

3. ちょっとしたアニメーション効果でも格好良く

閲覧者のマウス操作に合わせて「半透明の説明枠」がスライドして表示されるなど、ちょっとしたアニメーション効果でも、格好良く見せることができます。

画像にマウスを載せた際に、半透明の説明を重ねる方法

画像の上にマウスを載せたときにだけ、半透明の説明文(キャプション)が、アニメーション効果と共に下方からスライドして表示される、という表示効果の作り方をご紹介。jQueryを使って簡単に作れます。写真をたくさん並べて掲載するようなページで、デザイン面でちょっと凝ったことをしてみたい場合にお勧めです。

出典: 画像にマウスを載せた際に、半透明の説明を重ねる方法 [ホームページ作成] All About

4. 狭い空間をアニメーションで有効活用

ヘッダ部分の下部にあるちょっとした空間などでも、アニメーション効果を使えば有効に活用できます。「偶然気付いてくれれば良い」といった軽い情報の掲載や、装飾の一つとしても使えるでしょう。

数秒ごとに1行ずつ縦スクロールするティッカーを作る

1行または数行単位で、「指定した数秒間は静止」→「縦方向にスクロールするアニメーションで次の1行を表示」……を繰り返す「ティッカー」を掲載する方法をご紹介。jQueryを活用したスクリプト「vTicker」を使うことで、ブロックレベル要素をまるごと垂直方向に流せます。

出典: 数秒ごとに1行ずつ縦スクロールするティッカーを作る [ホームページ作成] All About

5. コンテンツの再配置でアニメーション

サイズの異なるたくさんのボックスを掲載しているページで、閲覧者がウインドウサイズを変更した際に、アニメーション効果を伴ってボックスの再配置が行われる、おもしろいスクリプトもあります。アニメーション自体がメイン機能というわけではありませんが、このようなちょっとしたアニメーション効果も面白いのではないでしょうか。

jQuery Masonryでサイズの異なるBOXをタイル状に整列

大きさの異なるブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動で整列してくれる「jQuery Masonry」の使い方をご紹介。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。

出典: jQuery Masonryでサイズの異なるBOXをタイル状に整列 [ホームページ作成] All About