• ベストアンサー

このサイトの作り方(考え方)教えてほしいです。

http://www.adidas.com/jp/homepage.asp このサイト、右上の×ボタンをクリックした後にはじまる、 マウスオーバーした時の動き(ターゲットが大きくなって・・・周りがマスクで小さくなり適所に収まる)の構造、わかる方教えてもらえないでしょうか。 具体的なソースは不要です(あればうれしいですが)。 ざっくりどういった構築の仕方かが知りたいです。 個人的にとても興味深かったので・・・ ちなみに私の環境はCS4、AS3、 初~中級レベルです。

質問者が選んだベストアンサー

  • ベストアンサー
  • cspl
  • ベストアンサー率83% (55/66)
回答No.1

これはよくできてますねー。 ただ、ロジックを言葉で説明するのは難しいですね・・・。 それだけ単純なものではないので。 まず、このあたりの仕組みは理解されていますでしょうか? ■ランダムな大きさのグリッドがスクロールするアレ http://wonderfl.net/c/ttb1 このようにグリッドに矩形を配置してから、 次にロールオーバー時に変形した際、 拡大した矩形がどのオブジェクトと重なるのか、 そして、重なったオブジェクトはどの方向に縮小、移動させなければならないのかを オブジェクト毎に計算します。 オブジェクトには「最低限保つ大きさ」なども設定されていますので、 そのあたりも考慮に入れます。 例えば、一番左下のオブジェクトのヨコ方向だけの動きを考えてみます。 ロールオーバー時に、右に150px伸びるとして、 その右のオブジェクトを150px右に縮小させればいいのですが、 その右のオブジェクトは「120pxから80pxまで40pxしか縮小できない」と設定していたとなると、 残り110pxは右に移動させなければなりません。 さらにその右のオブジェクトも「150pxから80pxまで70pxしか縮小できない」となると、 そのオブジェクトも残り40px右に移動する必要がありますので、 さらにまたその右のオブジェクトも40px縮小しなければなりません。 ・・・という具合に玉突き事故が同時に起こっていると考えてください。 この計算を上下方向それぞれに同時に行ってから、 拡大縮小のモーションを行います。 動きを加えると一見複雑そうですが、 変形前と変形後にどのように配置されているのかを グリッド上に物が置かれていると考えれば理解しやすくなると思います。

maeda_005
質問者

お礼

アドバイスありがとうございます! >玉突き事故 >変形前と変形後にどのように配置されているのかを グリッド上に物が置かれていると考えれば 分かりやすく説明いただき感謝です。 また、おっしゃるように一つを注意深く観察すると分かりやすいですね。 そういった考え方(導き方)を今後活かしていきたいです。 どうもありがとうございました。

関連するQ&A