まだ何も書いてません。
しばらくお待ちください。
うーん、ダウンしてました。
風邪もあったんだろーけど、他にも持病？ がありまして。
ま、ソレについては書く気になれば書くかも知れないけど・・・まだ今は。
さて最近、検索エンジン経由で来られる方が多いです。
jParallax 目当ての人が大半ですけど、きちんとした解説もなくて申し訳なし。
ただ、ソースは出来るだけ分かりやすく書いてるので、説明は要らないはず。
とりあえず、
・jquery.js
・jquery.dimensions.js
・jquery.jparallax.js
・jquery.pngFix.js
をうｐして、head に JavaScript まわり、body に本体、.css にデザインを記述。
そんな感じでいけます。
あと、旅行記事がイマイチだったので、補足として嫁さんのブログにトラックバック。
うんうん、よくわかるー。
なんかスゴイですね。
prototype.js や jQuery とかが、ブラウザの実装の違いを吸収してくれたり基本機能の底上げをしてくれるので、やりたいことに専念できるからでしょーか。
とにかく、10 年以上前に誕生してからずーっと日陰者だった JavaScript も、最近、Ajax とともに脚光を浴びるようになってきたわけです。おめでとー。
さて、このブログでは jParallax っていう、たのしい仕掛けをトップに使ってます。
グリグリな上のヤツ、実はその JavaScript で動いてるんですよ。
複数の画像を重ねて、マウスの動きに合わせてスクロールをさせる jParallax。
あまり活用例を見かけないので、「それじゃあ」とばかりにやってみました。
・・・こんなかんじ。
赤枠の画像に jParallax を適用して、黒枠の画像は CSS の z-index で被せてます。
パラメータ設定がややこしい！ ってこともなく、普通に画像を重ねればＯＫ。
重ね順は HTML の記述順そのままだし、スクロールスピードは「大きい画像が速い」と単純明快。つまりは画像を作るだけですね。
注意事項は、透過 PNG を使うので、別途 IE6 対策（iepngfix）が必要なことかな。
あと、画像は img じゃなくて div か li 背景がオススメです。念のため。
ボクが使ってみても、結局 Flash っぽ、止まりでした。残念！
面白い jParallax の活用が出来たヒトは連絡くださいな。
