サイトを制作する上で、モーション・アニメーションは欠かせない要素です。
制作デザインに対して、どのような動きを付けるのかを考える際に、競合・他社のサイト調査し参考にします。
その上で、クライアントらしいものセレクトしたり・独自で制作したりするのですが、その調査の段階で印象に残ったものや今後参考にできそうだと思ったものをストックしていきたいと思います。
※随時、更新中
CSSアニメーション参考サイト
小さな動きを付けたい時に役立つサイトです。
沢山デザインサンプルがあるので、気に入ったアニメーションを見つけられます。
- 2Dトランジションがイイ感じのサイト
→ Hover.css
- アニメーションの数が豊富、どの動きもイイ感じなサイト
→ Animate.css
- 他のサイトよりトリッキーな動きがあるサイト
→ minimamente
- 数は少ないのですが、使えそうなサイトだったのでストック
→ CSS3 Animation Cheat Sheet
- 何をどう動かすのかが分かりやすいサイトなので、ストック
→ Motion CSS
- 一覧はプルダウンしないと見えないため、1つずつ確認しなければいけない点にややしんどさはありますが、一応ストックを…
→ vivify
JSライブラリ
- 滑らかでクリエイティブなモーション多数
→ mojs
- 文字が滑らかに揺れるモーション
→ popmotion
- 滑らかな手書き風アニメーション
→ vivus.js
→ 作り方
様々な場面で活用できるアニメーション
- サイト内で使えるアニメーション
→ BRISK
【詳細】
・フェードイン、サイドインアニメーション
・光るアニメーション
・背景色が流れて表示されるアニメーション
・文字が滑らかに表示されるアニメーション
・スクロールボタン
- ホバー時のボタンデザイン
→ Button Hover Effects
案件で使えそうなアニメーション
- IT系の企業サイトで使えそうなパーティカルJS-1
→ particles.js｜DEMO
→github｜particles.js
- IT系の企業サイトで使えそうなパーティカルJS-2
→ particles.js｜DEMO
→ github｜particles.js
- 動きのあるバブル
バブルの色やサイズによって、使える業界が色々ありそう…
→ bubbly-bg｜DEMO
→ Github｜bubbly-bg
【アイデアメモ】
・バブルが赤：医療系のサイト
・バブル水色：遺伝子のサイト
・下から上へあがるシャンパンの泡のようなもの：飲料系のプロダクトサイト
良いアイデアが得られるサイト
- 微妙なところまでこだわり抜いた、エモい雨のエフェクトページ
雨の量、晴れ、雷などがマークと合っていています
→ Rain & Water Effect Experiments
- ツールチップアイデアが浮かぶページ
画面上のテキストをホバーすると、ツールチップが表示されます
→ codrop｜DEMO
- インスピレーションが掻き立てられるサイト
→ greensock
- クリエイティブな様々なアニメーションをチェックできるサイト
→ codepen
- なにやら動きが凄めのサイト
→ animejs
- テキストのアニメーションをチェックできる
→ SnackThis
- サイト制作でよく使うアニメーションがチェックできるサイト
※進行作業中のサイトのようなので、今後に期待。
→ Effeckt.css
【詳細】
・モーダル表示
・キャプション表示
・ツールチップなど
