ページの上部を特定の位置までスクロールさせた際にヘッダー部分を固定するサンプルを作成します。ファーストビューをPRスペースとしてより目立たせたいときに有効です。

リンク部分にマウスカーソルを当てた際にリンク先や内容説明のための説明のテキストを入れる場合にtitle属性を指定すると吹き出しのように入力した内容がでてくるが、小さかったり、一瞬で消えてしまうので、よりわかりやすく吹き出しのデザインをしてリンク先の内容の説明や入力フォームのサポートなどに使用するツールチップを作成してみました。

今回は、ベーシックでよく見るタブパネルの実装を行ってみます。切替時のアニメーションやマウスクリックやロールオーバーなどでの切り替えなどいくつかのバリエーションも作成してみました。また汎用性を考えてjQueryプラグインとして作成してみました。

縦長ページでのページの先頭部分へ戻る仕組みはページ内リンクで設定できるが、ここではページトップへの基本と移動アニメーションの動きについて、またボタンの現れるタイミングについていくつかとりあげてみます。

ブラウザの背景全体に一枚のグラフィック画像を表示するサンプル作成。表示だけでは簡単なので背景画像をランダムに表示させたり、複数枚をフェードアニメーションで切り替えるサンプルを作成しました。