【動画あり】Google Web Designer 「動く画像ギャラリー」DEMO


デモ1発目はGoogle Web Designer(以下、GWD)を使った、
ちょこっと動く3D画像ギャラリーのデモを作ってみました。

Google webdesigner

最初はオーソドックスな画像サムネイル10個。

始まりは平面的に10個のサムネイル画像が並んでいます。

↓ そこから立体的な視覚効果をつけるというデモです。

サムネイルがググっと動いて立体的なビジュアルに。

3D画像ギャラリーDEMO

【作り方動画】

※動画はフルスクリーン&高画質でご覧頂くことをお勧めいたします。

上のDEMOファイルにも記述しましたが、
動画中Javascriptでリンクを張っているのは、
aタグでimgタグを挟むとデザインビューで崩れてしまうためです。

GWDのデザインビューで作業を完成させた後、
コードビューでaタグを書けば問題ないのですが、
一旦デザインビューが崩れると、その先は開発作業が難航すると思いますので、
あまりおすすめは出来ないかなと。

もう一つ、動画中の補足ですが、3D回転させたオブジェクトは、
3Dオブジェクト回転ツールのアイコンをダブルクリックすると解除することができます。
メチャクチャになってしまって「わー元に戻したい><」ってときに便利です。

そういえば、GWDではコンポーネントやらイベントといった機能があるものの、
こちらはバナー等を作るときだけ機能するようで、
HTMLを作る時は使えないようです。

コンポーネントを使ったデモも作っているので順次公開していきます。
まだイマイチ分かってないところも多いですが^^;