WebGallery

Webデザインの初心者がスマートフォン対応しているWebサイトを淡々と紹介していくサイトギャラリーです。

*

映像の切り替わるモーションが面白い!「TAO TAJIMA」さんのwebサイト

   

TANGRAM co. ltd.に所属する映像ディレクター「TAO TAJIMA」さんのホームページです。

とにかく映像の切り替わりのモーションが面白い!サイトです。
まずサイトに訪れると画面いっぱいに動画が流れるようになっているのですが、スクロールしようとすると画面がうにょうにょ動くんです!
ある程度スクロールさせると映像が切り替わる仕組みになっています。そうすることで、「TAO TAJIMA」さんが手がけた数々の映像を見ることができるんですね!
紹介の仕方がとてもお洒落です…

画面の一番下にはページナビも設けられており、スクロールしなくても映像を切り替えることが可能です。

しかも!メニューをクリックするとさらに面白い動きをしています。
映像の一覧をサムネイルで紹介しているのですが、左側のハンバーガーメニューをクリックするとそのサムネイルに仕舞われるかの様な動きで映像が消えるようになっています。
さらにメニューを閉じると先程まで見ていた映像がまた見れる仕組みです!一体どうなっているんだ…
私もいつかこんなカッコいいアニメーションを使ったサイトを作ってみたいものです…勉強になります!

 - 動きで表現

  関連記事

今後の参考に!スタイリッシュなアニメーション効果を使ったサイトをご紹介!

コーディングをしているときに「どんなアニメーションをつけようか」と考えるのが1つ …

花火のアニメーションを使って、夏限定のパッケージデザインを表現したシャンドンの特設サイト

「CHANDON」の2018年夏限定サマーボトルの特設サイトです。 大きな花火や …

行ってうっとり!夏の鳥取の魅力がつまったサイト

観光スポットやグルメ情報など、四季折々の鳥取の「美」を紹介している「ANA 鳥取 …

豆苗についてもっと知りたくなる!「豆苗研究会」

広島県広島市にある豆苗やブロッコリースプラウトなど、スプラウト野菜を生産・販売し …

想像するだけでワクワクが止まらない「ハンズの夏準備」

「ハンズの夏準備」という東急ハンズの特設サイトです。 サイトのトップには、キャッ …

多彩なアニメーションを使ったサイト

  私が言っていいものかどうか分かりませんが、懐かしきCyndi La …

特殊なアニメーションを使って展示された作品を紹介している美術展のサイトが、ユニークな動きで面白い!

2018年の4月14日(土)から7月8日(日)まで、東京都美術館で開催されている …

どの言語で閲覧してもデザインが崩れない

東京のデザインやファッション、食べ物や観光地・宿泊施設などを世界に紹介するWeb …

【閲覧注意!】池袋で開催される「もうどく展2」のサイトが思った以上に毒々しい!!

2017年3月16日の木曜日から6月25日の日曜日までサンシャイン水族館で開催さ …

要所で動きを使い、注目度を上げる

エステサロンクレジットカード決済導入「株式会社ジェイ・シー・エス」のホームページ …