アニメーションサンプル
animation sample
animation
動きのサンプル
このページはスクロールに合わせて、背景色がセクションごとにゆっくり切り替わります。
読み進める流れに沿って、ページ全体の印象を少しずつ変えていく演出です。
scroll
スクロールで表示
画面に入ったタイミングで要素を出す、最も汎用性の高い動きです。
フェードアップ
下から浮かび上がりながら表示。文章・カードを問わず使えます。
左からスライド
画像とテキストを左右に組んだレイアウトと相性が良い動きです。
右からスライド
左右交互に組み合わせると、リズムのある見せ方になります。
拡大しながら表示
アイコンやロゴなど、単体で見せたい要素に向いています。
時間差で表示（stagger）
- 01
- 02
- 03
- 04
- 05
- 06
一覧やカードを少しずつ遅らせて表示します。実績一覧やサービス一覧で効果的です。
text
文字を動かす
見出しやキャッチコピーの印象を強める、テキスト専用の動きです。
1文字ずつ表示
Motion makes it clear.
文字を1つずつ分解して順に表示します。文字数が多いと冗長になるため短い英字向きです。
マスクから立ち上げ
デザインを、そのまま動かす。
崩れない実装で、丁寧に。
行ごとに下から立ち上げます。日本語の見出しでも読みやすさを損ないません。
グラデーションが流れる
code Knospe
CSSのみで常時動きます。ロゴやサイト名など、限られた箇所での使用がおすすめです。
hover
ホバーの動き
マウスを乗せると動きます。タッチ端末では反応しないよう制御しています。
ボタンの塗りつぶし
左から色が満ちるボタン。押せる箇所であることが直感的に伝わります。
下線がのびる
テキストリンク向け。控えめながら反応が明確に伝わります。
画像のズーム
画像が拡大し、キャプションが重なります。実績一覧のサムネイルに最適です。
カードが浮き上がる
card
影と位置の変化で、触れられることを伝えます。
カード全体がリンクになっている一覧ページで効果を発揮します。
image
画像の見せ方
写真そのものを主役にする、スクロール連動の動きです。
マスクで開く
左から幕が開くように画像が現れます。メインビジュアルの導入に向いています。
パララックス
スクロール量に対して画像がゆっくり動き、奥行きが生まれます。
other
その他の動き
数字の見せ方や、常に動き続ける演出など。
数値のカウントアップ
-
0+
サンプル値
-
0%
サンプル値
-
0h
サンプル値
実績数や対応スピードなど、数字で伝えたい箇所に。上の数値は表示サンプルです。
無限マーキー
- coding
- wordpress
- responsive
- animation
- maintenance
同じ内容を横に流し続けます。取引先ロゴの一覧やキャッチコピーの帯に。マウスを乗せると停止します。
スクロール進捗バー
ページをどこまで読んだかを示します。上のバーと画面最上部のバーが連動しています。記事詳細ページなど、縦に長いページで効果的です。