2018.05.28
14
こんにちは。たまです。
最近canvasを使用したサイトをちらほら見かけますね。サイトのコンセプトに合えば是非とも取り入れたい表現です。
今回は有機的な動きをcanvas+javascriptで展開しているサイトをまとめてみました。
インスピレーションが湧いてくるな〜。では行ってみよう！
まるで自分の意思があるかのよう！canvasサイトまとめ
My Life in 20 Years
http://www.mylifein20years.com/
facebookと同期してみてください。他のユーザーとの関係を繋ぐラインや読み込み時のローディング等、所々canvasが使用されています
LAMDASH DNA | メンズシェーバー ラムダッシュ | Panasonic
http://panasonic.jp/shaver/lamdash/dna/index.html
DNAがcanvasによって表現され、3Dのように動きます。これだけ縦に長いのに動きがスムーズ！
WRASS NETWORK
足し算と引き算。メッセージがcanvasでうまく表現されています
一瞬で、つながれ。｜New Balance Japan
http://www.newbalance.co.jp/tsunagare/
こちらもメッセージをcanvasで表現。にょろにょろしたラインも凄いですが、文字色も変わってますねー
North: An App Company
本物の雪のようにぱらぱらと降るcanvas。
I am Astronaut
宇宙空間をcanvasで表現。このサイト自体はアプリの紹介ですかね？
サンプル系
さてここからはサンプル系になりますが気になったものを挙げて行きます
The Road
http://themeforest.net/item/the-road-one-page-portfolio-template/5748997?ref=robdelete
ROADがもしゃもしゃ動いてます
Mr.doob
http://www.mrdoob.com/
http://www.mrdoob.com/#/144/magic_dust
有機的なものから3Dまで。様々なcanvasがあります
CanvasMol
http://alteredqualia.com/canvasmol/
こちらもかなりの量のcanvasがあります
HTML5 Canvas and Audio Experiment
http://9elements.com/io/projects/html5/canvas/
音とともに、ぐいぐい動き、様々な形に変化しています
Sinuous – An HTML5 canvas game. Avoid the red dots!
http://hakim.se/experiments/html5/sinuous/01/
マウスを追随。ゲームのグラフィックにcanvasが使用されています
“Or so they say…” by xplsv
http://xplsv.com/prods/demos/xplsv_orsotheysay/
最後です。壮大な宇宙の旅をどうぞ
まとめ
敷居が高くてなかなかcanvasは導入しづらいものもありますが、自由自在に使いこなせたら表現の幅も広がりますね！
以上！宇宙に旅立ちます！では！
