transitionを使用した簡単なCSS3アニメーションは書けるんですけど（マウス載せたらゆっくり色が変わる的な）、もっとダイナミックな美しいアニメーションを実装したいんだよお、って思いませんか？
私は思います。
硬めな企業のサイトだとあんまり使わないかもしれませんが、キャンペーンサイトとか、BARやアパレルなどデザイン重視のサイトだとアニメーションの要望も多かったりするんですよね。
だいたいAnimate.cssみたいなライブラリを使ってしまう事が多いのですが…そろそろちゃんと勉強しとかないと…今頃かよっていう意見は置いといて…
というわけで、「CSSアニメーションって難しくない…？」という考えを払拭できるよう、参考になるサイトとかサンプルとか集めてみました。
CSSアニメーションがすごいサイト
夜空ノ贈リ物
CSSアニメーションを学ぶのに超、超おすすめなのは「夜空ノ贈リ物」。
CSS3で作られた作品で、初歩からCSSアニメーションを学べます。
これがまあすごいんですよ本当に。
chapter01で書かれているanimationのサンプルを基本として作ったのがこんな感じ。
※止まっていたらリロードしてみてください
いやもうセンス、センスがマジですごいです。
何度も繰り返し見たくなるし、無駄にスクロールしたくなるサイトなんです。
もともとはWeb本として制作されたとの事。
GitHubでも公開されています。
こちらも素敵な制作者のyui540さんのサイトです。
すごいなあ。
制作者のyui540さんのnote。
CSSアニメーションがすごいサイト 世界編
デザインリソースやツールをまとめたサイト「Design Your Way!」から、HTML5とCSS3で書かれたサイトを見つけてきました。
The Evolution of the Web
HTML5とCSS3で書かれたサイト。
もうすごすぎて何がどうなっているのかさっぱりわかんないです。
http://www.evolutionoftheweb.com/
※202201 公開が終了していましたのでリンクを削除します
Museum of the World
これもHTML5とCSS3。
大英博物館とGoogle アートプロジェクトの共同開発とのこと。
見てて酔うのと翻訳されないのがきついですが写真見てるだけでも楽しいです。
Epic
ベルギーのWEB制作・システム開発の会社。
デザインもそうですが、社員の紹介とかも凝ってて面白い！
コメント