Vtcreative

Webデザイン３つの良いとこ : 3 Good Point!

1. ロケットがデバイス間を動きまわることで、レスポンシブWebデザインをアピール
2. フラットWebデザインでシンプルに
3. 要素が画面に表示されるときのアニメーション

私はWebデザインのココを見た！

• Tweet
• 

レスポンシブ・ウェブデザインを象徴するアニメーションが面白いなー！ロケットが画面を飛び回ります。フラットの中を飛び回るのはどうやるのか。ウィンドウサイズが変わっても動くのはなぜか。なるほどアイディアだなーと感心。

デバイスを駆け抜けるロケット

レスポンシブWebデザイン、出来ます！ということは視覚的に魅せる面白いアニメーション。自分の能力をこんなふうに表現できるのかーと感心してしまいました。。

これgifアニメなのかー？と思ったら、スマホでもしっかり動いて表示されるの。

どうやってんねーん！と思い調べました。

まずロケットを動かします。この動き、実はなんとCSSのみで構成されています。今更ながらここまで出来るんですね！iPhoneでも作動しますし、やっぱりCSS3はすごい。

（参考）CSS3のアニメーションってすごい。

-webkit-animation-name: fly;
-webkit-animation-duration: 5.5s;
-webkit-animation-play-state: running;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;

ロケット要素に対し、上記のようなCSSを設定し、そして

@-webkit-keyframes fly {
// 処理
}

と、アニメーションを設定していきます。このCSSでまずロケットを動かす。

そして上からz-indexでこの画像をかぶせます。そうすることで、ロケットを画面と画面の間で隠してるんですね。

なるほどこんな方法があったか。自分のスキルを最大限にアピールすることが出来るポートフォリオサイト。こういった小さなアイディアとそれを実現する能力があるということを、効果的に魅せている良いWebデザインでした。

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•