cocoonサンプルビジネスサイトのサーバの凍結解除しました。ご不便をおかけしました。

CSSアニメーションがすごいサイト

いろいろ
スポンサーリンク

transitionを使用した簡単なCSS3アニメーションは書けるんですけど(マウス載せたらゆっくり色が変わる的な)、もっとダイナミックな美しいアニメーションを実装したいんだよお、って思いませんか?

私は思います。

硬めな企業のサイトだとあんまり使わないかもしれませんが、キャンペーンサイトとか、BARやアパレルなどデザイン重視のサイトだとアニメーションの要望も多かったりするんですよね。

だいたいAnimate.cssみたいなライブラリを使ってしまう事が多いのですが…そろそろちゃんと勉強しとかないと…今頃かよっていう意見は置いといて…

というわけで、「CSSアニメーションって難しくない…?」という考えを払拭できるよう、参考になるサイトとかサンプルとか集めてみました。

 

CSSアニメーションがすごいサイト

夜空ノ贈リ物

CSSアニメーションを学ぶのに超、超おすすめなのは「夜空ノ贈リ物」。

CSS3で作られた作品で、初歩からCSSアニメーションを学べます。
これがまあすごいんですよ本当に。

 

chapter01で書かれているanimationのサンプルを基本として作ったのがこんな感じ。

※止まっていたらリロードしてみてください

アニメーションサンプル
アニメーションサンプル
アニメーションサンプル
アニメーションサンプル
アニメーションサンプル
アニメーションサンプル

気持ちいい動きすぎる…!!

 

いやもうセンス、センスがマジですごいです。
何度も繰り返し見たくなるし、無駄にスクロールしたくなるサイトなんです。

 

もともとはWeb本として制作されたとの事。
GitHubでも公開されています。

 

こちらも素敵な制作者のyui540さんのサイトです。
すごいなあ。

 

制作者のyui540さんのgithub。

 

CSSアニメーションがすごいサイト 世界編

デザインリソースやツールをまとめたサイト「Design Your Way!」から、HTML5とCSS3で書かれたサイトを見つけてきました。

 

The Evolution of the Web

HTML5とCSS3で書かれたサイト。
もうすごすぎて何がどうなっているのかさっぱりわかんないです。

 

Museum of the World

これもHTML5とCSS3。
大英博物館とGoogle アートプロジェクトの共同開発とのこと。
見てて酔うのと翻訳されないのがきついですが写真見てるだけでも楽しいです。

 

Epic

ベルギーのWEB制作・システム開発の会社。
デザインもそうですが、社員の紹介とかも凝ってて面白い!

コメント

タイトルとURLをコピーしました