Gutenberg、だいぶ使いやすくなったので移行中です

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

いろいろ

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

私は思います。

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

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

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

 

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

夜空ノ贈リ物

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

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

 

2022年1月現在、ブログのお引っ越しに伴い一部コンテンツが見れないようです…

 

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制作・システム開発の会社。
デザインもそうですが、社員の紹介とかも凝ってて面白い!

コメント

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