写真やグラフィックを1枚だけ渡されて、動画やLPで動かしてほしいと言われたとき、引き出しの数がそのまま仕上がりを決めます。このページは、静止画1枚に使えるモーションを100種類ぶん並べて、その場で見比べられるようにしたものです。気に入った動きはCSSをコピーしてWebに、After Effectsの手順を見て映像に、そのまま持っていけます。
上のプレビューで動きを選んだあと、Webと映像のどちらにも持っていけます。
カードをクリックすると上のプレビューで大きく再生されます。速さと緩急は上部のバーで全カードにまとめて反映されるので、実際に使う尺に合わせてから選べます。自分の画像に差し替えると、素材ごとの相性まで確認できます。
最初に「土台のCSSをコピー」で共通部分を貼り、--img に画像のパスを入れます。あとは使いたい動きの「このCSSをコピー」を足して、<div class="stage m-zoomin"> のように置くだけです。必要な要素の数は土台のコメントに書いてあります。
プレビューの「AFTER EFFECTS」欄に、使うエフェクトとプロパティの数値が1件ずつ書いてあります。選んだモーションの手順に沿って、素材にエフェクトとキーフレームを設定してください。
お使いいただく前に、ここだけ確認してください。
掲載しているCSSとAfter Effectsの手順は、商用案件を含めて自由に使えます。クレジット表記も申請も不要です。表示中のサンプル画像は動きの確認用で、配布の対象には含みません。このページ自体の再配布と、モーション集としての二次配布はご遠慮ください。
選んだ画像はブラウザの中だけで読み込まれ、サーバーへの送信も保存も行いません。ページを閉じると消えます。社外に出せない素材でもそのままお試しいただけます。
Chrome・Safari・Edge・Firefoxの最新版で確認しています。一部の動きは新しいCSS機能を使っているため、古いブラウザでは簡略表示になります。OS側で視差効果を減らす設定にしている場合、自動再生は止まります。