スクロールで変化するバナーの作り方

「スクロールする＝ビールを飲む」という演出を加える！

　今回からは、サイト閲覧者のブラウザに対するアクションに反応するバナーを作成します。ブラウザに対するアクションとは、スクロール、マウスカーソルの移動、ウィンドウ操作などです。これらの状態はFlashから直接取得できませんが、JavaScriptを用いることで、取得することができます。

　ブラウザの状態を取得できれば、サイト閲覧者の行動にリアルタイムで反応できる演出や、より注意を引くFlashバナーをデザインすることが可能です。

　第2回では、ウィンドウのスクロールと連携して内容が変化するFlashバナーを作成します。今回は、前回作ったFlashバナーをベースに新しくデザインをしてみましょう！

　スクロールバーがあるサイトのうち、ほとんどのサイトは縦スクロールのみで、横にスクロールすることはあまりありません。今回作成するFlashバナーも縦スクロールに反応するようにし、またスクロールに対する変化の様子が分りやすいように、縦長のスカイスクレイパータイプで作成します（図1-1）。

　スクロール位置をそのまま数字で出力しても面白みがないので、この縦長のバナーをグラスに見立て、ウィンドウをスクロールさせたら、そのスクロール位置に応じて、背景にあるビールの量が増減する、つまり「スクロールする＝ビールを飲む」という演出を加えたいと思います（図1-2）。

　静止画ではちょっと分りにくいのですが、ビールの液面が常に見えているところに注目してください。これがスクロール状態と連携しているということです。

HTML、CSS、そしてJavaScriptライブラリ

　それでは、早速Flashバナー制作の準備をはじめましょう。第1回で作成したHTMLファイル、CSSファイルなどは基本的に変更せず、同じファイル構成で作業をしていきます。

　「Flashバナーがスクロールに反応する」ということは、Flash側でウィンドウ上部からの相対的な位置値を知る必要があります。この値はFlashから直接取得できませんので、JavaScriptを使用しましょう。本連載では、十分普及しているJavaScriptライブラリ「Prototype.js」を使用します。

　独自にスクリプトを用意しても良いのですが、ブラウザごとに位置の値や符号が違っていたり、また値を取得するための属性値や変数が異なっていたりすることが多く、バグが発生しやすい傾向にあるため、ライブラリを用いることにしました。

　また、近年では、数多くのJavaScriptライブラリが開発されています。これらをうまく使うことで、Webデザイナーがブラウザ間の違いを意識ぜずに、実現したいデザイン作業やより高度なコーディングに集中できる環境になりつつあります。

　そのような現状を踏まえて、数あるライブラリの中から、基本的な機能の部分の使いやすさに定評のあるライブラリ「Prototype.js」を使用します。