フロントエンドエンジニアが参考にしたいwebサイト5選 【2016年9月版】

まろ


フロントエンドエンジニアが参考にしたいwebサイト5選 【2016年9月版】

こんにちは、まろCです。

前回に引き続き、アニメーションの参考になりそうな良いサイトを見つけましたので、ご紹介したいと思います。

Kygo Life – Music Meets Fashion

Kygo Life   Music Meets Fashion
URL: https://kygolife.com/

今激アツのDJ Kygoのファッションラインのサイトです。
メニューや、ローディング、遷移、細かいところのギミックまで気持ちよく動きます!

なによりカッコいいデザイン。。。
(ソース圧縮&クラス名がランダム数値で解読が難しい。。)

Converse “Diamonds”

Converse “Diamonds”
URL: http://counterclimate.converse.com/

出ましたね。タイトルの文字、書くようにアニメーションさせてるのはwebglですね。もはや流行りですね。
どうやったらできるんでしょうか?? 研究したいです。

はみ出しプロジェクト|新しい学校のリーダーズ×コイケヤ

はみ出しプロジェクト|新しい学校のリーダーズ×コイケヤ
URL: http://hamidashi-pj.com/

可愛いですね! ナナメの作りが最高です。
ムービーを再生するモーダルのアニメーションをTHREE.jsで実装している感じがします! すごいなぁ。。。

TOKYO BASE CO., LTD.

TOKYO BASE CO.  LTD.
URL: http://www.tokyobase.co.jp/

このサイトも見出しの文字をcanvasでアニメーションさせていますね。
カッコいいです。全体の透け感も心が踊ります!

OVA「クビキリサイクル」公式サイト

OVA「クビキリサイクル」公式サイト
URL: http://zaregoto-series.com/

このサイトも背景でくるくる回る文字と、そのアニメーションをcreate.jsで表現しています。
色もきれいだし素敵です。

まとめ

今月は文字のアニメーションをwebglやcanvasで動かすサイトに目が行ってしまいました。

「目が行く」
つまり、人を捉えているということでしょう。

このようなセンスを磨いていきたいなぁと思う午前0時でした。

それでは!

まろ
この記事を書いた人
まろ

フロントエンドエンジニア

おすすめ記事

Recommended by