これは面白い！奥行きを感じさせる動作をするjQueryプラグイン「jParallax」
な、なんじゃこりゃぁと思わざるを得ないようなJavaScriptの登場だ。JavaScriptはNetscapeがあった時代からあるもので、ずっと昔から存在している。単なるサイトの装飾扱いだった時代を経て、Ajax、prototype.js、YUI、Ext-JSなどここ数年で一気に進化を遂げている。
複数の画像によって、まるで中に入り込んだかのように動かすことができる
その留まる所を知らない進化の最新系を見られるのがこのjParallaxというjQueryプラグインだ。JavaScriptなのでもちろんソースコードは公開されているが、ライセンスは特に明記されていなかったのでご注意いただきたい。
jParallaxは言わば複数の画像をレイヤーを重ねるがごとく表示して、マウスの動きにあわせて上下左右にちょっとずつずらして表示を切り替える。それによってまるで遠近感をもって動いているかのような印象を受けるものだ。
サンプル動画
サンプルは数多くあるが、パノラマのように風景が動かせてしまうもの、水滴のような形が動くもの、さらにドーナッツのような形の物体が伸びるものなど、どれも信じられないような動きを見せる。これは体験しなければ面白さが分からないだろう。
同じ画像を用意するのではなく、奥側に配置するものは暗く、手前にあるものは明るくするなど画像自体工夫する必要がある。また、背景を透明にしなければならないので、PNGのみ利用できるようだ。
サンプルとしてブログのヘッダに使われているものや、まるでFlashを使っているかのように写真が動くものなどが用意されている。どれもこれまでの常識を覆すような面白いものばかりだ。動きが見えなければ面白さが分からない、ぜひ公式サイトでその動きを体験して欲しい。
webdev.stephband.info