2011年6月アーカイブ

並べた画像を順番にフェードイン、フェードアウトで消えたり現れたり。
乱数を使っているため、上下左右のどちらの方向から消えていくかは毎回異なります。

使用サンプル　→　消えたり現れたり

参考サイト　→　diagonalFade

載せたい項目数が多い場合、リスト化すると縦方向に長くなり、
スクロール量の多いページになりがちです。
いっそのこと、マウスのスクロールと同時にメニューもスクロールさせてしまえば、
ユーザーの操作は少なくなります。
webkit系のブラウザ(Safari、Chrome)を使えば、
上下にぼかし効果が入って、よりリアルに感じられます。

使用サンプル　→　スクロールするメニュー

参考サイト　→　MoveUpMenu

Amazonのオススメ商品にも使われているため、
カルーセルパネルのインターフェースは有名になってきました。
MobilySliderは、画像の横スライド、縦スライド、フェードなど、
引数を指定するだけで数種類の見せ方を切り替えられるすぐれもの。
初期設定は「init.js」から読み込ませるため、
デフォルト設定値のまま使うなら、jsファイルをHTMLファイルへ読み込ませるだけで準備完了。
後は指定されたdiv要素、class名を指定して、
使いたいモードになるよう引数を設定しましょう。

シンプルに　⇒　カルーセル
アニメーションで　⇒　スライドショー
フェード効果で　⇒　カルーセル

参考サイト　⇒　MobilySlider

ロールオーバー効果を使って、
ユーザーにとって分かりやすいナビゲーションを作ることは
現在のWEBサイトの必須要素といえます。
ロールオーバー効果を実装するには、いろんな方法がありますが、
ページごとにハイライト表示させるには、手作業で管理することが多くなります。
しかし、yuga.jsプラグインを使えば、Javascriptファイルを読み込んで、
特定のClass名を指定するだけでハイライト付きの
ロールオーバーナビゲーションを作れます。
ただし、ハイライトしているボタンにマウスオーバーしても変化はしません。

使用サンプル　→　ハイライト付きナビゲーション

また、thickboxプラグインを読み込んでおけば、
画像に直接リンクを貼るだけで、thickbox表示できます。

参考サイト　→　yuga.js