Design Journey

One soul One love One heart

試してみたくなる!キービジュアルの動きが面白いサイト8選

151124

最近はHTML5やJavaScript、SVGの普及により、様々な効果のついた動きのあるサイトが出てきました。今回はサイトの第一印象となる、キービジュアルの動きが特徴的なサイトを集めましたので紹介したいと思います!

カーソルを合わせるとロゴが変化する

Teamgeek

151124_1
砂ような描写でロゴが書かれていて、カーソルを当てると動きます。うねうねした動きが特徴的です。

giantstepsmedias

151124_2
こちらは雪のような粒がカーソルを当てると弾けます。ページ遷移すると飛んでいったり、戻ってきたりしてまるで生き物みたいです。
※音が出ます

背景が動く

Music

151124_3
キービジュアルのキャッチ背面が動画になっていて、文字の部分だけ繰り抜いて見えるようになっています。こちらはすぐに真似できそうですね^^!

GSG

151124_4
こちらもキャッチの下に動画があり、キャッチの文字部分をくり抜いた画像を重ねるだけでおしゃれに見えるようになります。
※音が出ます

ラインアート

Melanie Daveid

151124_5
最近たまに見かけるラインアートで描く描写の動き。SVGの画像を作って、Lazy Line Painterなどをつかうと、簡単に作成することができます!
ページの下部にもあるので、ぜひスクロールしてみてください^^

Foto Frigerio – Wedding Photographer

151124_6
白黒のシンプルな背景に描かれるラインがクールで印象的です。セリフ体で繊細なイメージがあります。

更新するたびに違う動きをする

Paprika

151124_7
更新するたびに動きが変わります!何度かやってみてください^^

リボンが伸びる

2015 is yours

151124_8
立体的にリボンが伸びてきます。(SVG??)
※音が出ます

 

 

いかがでしたでしょうか??
今回は海外のサイトを取り上げてみました。参考になれば嬉しいです!
他にも海外国内問わず「こんな面白いサイトあるよー!」っていうのがありましたら教えてもらいたいです^^

シェアする
コメントする

コメントを残す