WebサイトやLPを「良く見せたい」「ユーザーの視線を引きつけたい」
──そんな時に役立つのが CSS/JSアニメーション です。
今回は、コピペでそのまま使える 「CSS/JSアニメーション集10選」をまとめました。
デザインを邪魔せず、どのジャンルのサイトにも取り入れやすい動きを中心に掲載しているため、
ポートフォリオ・企業サイト・EC・サービス紹介ページなど、幅広い場面で活用できます。
制作にすぐ導入できる内容となっていますので、ぜひ気になるものから試してみてください。
ふわっと軽く弾んでフェード
See the Pen ふわっと軽く弾んでフェード by et (@eito-oda) on CodePen.
「ふわっと軽く弾んでフェード」は、要素が軽やかに浮かぶように現れ、軽く弾む動きと同時にフェードインするアニメーションです。
スクロール連動でタイミングを調整でき、柔らかく自然な印象を与えられます。
特徴
- 要素が下から少し浮き上がりながら出現
- 軽く弾む動きでポップな印象を演出
- 透明度が徐々に上がり自然にフェードイン
- ScrollTriggerでスクロールに応じたタイミング制御可能
活用シーン
- 見出しやサブタイトルの登場演出
- コンテンツの強調や注目ポイントの表示
- 柔らかくポップな印象を出したいデザイン
メリット
- 自然で目に優しい動きで注目を集められる
- スクロール連動でユーザー体験を向上
- 小規模アニメーションでパフォーマンスへの影響が少ない
「ふわっと軽く弾んでフェード」は、スクロール時に柔らかく浮かび上がり弾む演出で、見出しやコンテンツに自然なアクセントを加えられるアニメーションです。
右上に一瞬拡大ジャンプ
See the Pen 右上に一瞬拡大ジャンプ by et (@eito-oda) on CodePen.
「右上に一瞬拡大ジャンプ」は、要素がスクロールに応じて右上方向に軽く飛び出しながら拡大し、元の位置に収まるアニメーションです。
瞬間的な動きで注目を引きつける効果があります。
特徴
- 要素が右上方向にジャンプしながら出現
- 拡大と回転を組み合わせたポップな演出
- ScrollTriggerでスクロールに応じて発動
- 瞬間的で印象的なアニメーション
活用シーン
- 見出しや重要コンテンツの登場演出
- ボタンやアイコンの強調表示
- ポップでダイナミックな印象を演出したい場合
メリット
- 瞬時に目を引くのでユーザー注目度アップ
- スクロール連動で自然なタイミングで表示可能
- 小規模アニメーションでパフォーマンスへの負荷が低い
「右上に一瞬拡大ジャンプ」は、右上方向への軽いジャンプと拡大で、見出しやコンテンツに瞬間的なアクセントを加えられるスクロールアニメーションです。
サービス3カラムの 『間隔縮小』 でまとまり感UP
See the Pen サービス3カラムの 『間隔縮小』 でまとまり感UP by et (@eito-oda) on CodePen.
「サービス3カラムの『間隔縮小』」は、スクロールに合わせて3カラムの間隔が徐々に縮まり、コンテンツのまとまり感を高めるアニメーションです。
視覚的にグループとして認識しやすくなり、整理された印象を与えます。
特徴
- 3カラム間のスペースがスクロールに応じて縮小
- 自然な動きで視覚的にまとまり感を演出
- ScrollTriggerを使用し、スクロール位置で変化
- 簡単なアニメーションで効果的に注目を誘導
活用シーン
- サービス紹介や商品一覧のレイアウトで
- 複数コンテンツの関係性を強調したいとき
- 視覚的に整ったデザインに見せたい場合
メリット
- まとまり感が出ることで読みやすさ向上
- スクロールに連動するため自然な演出
- 少ないコードで簡単に実装可能
「サービス3カラムの『間隔縮小』」は、スクロールに応じてカラム間の距離を縮めることで、コンテンツのまとまり感を直感的に伝えるシンプルで効果的なアニメーションです。
注意を引く「パルスバッジ」（通知バッジの脈動）
See the Pen 注意を引く「パルスバッジ」（通知バッジの脈動） by et (@eito-oda) on CodePen.
「パルスバッジ」は、通知や注目ポイントを視覚的に強調するための脈動アニメーションです。
バッジが自然に膨らんで縮む動きにより、ユーザーの目を引きつけ、重要な情報を直感的に伝えます。
特徴
- 丸型バッジが脈動するアニメーション
- 背景のボックスシャドウが拡大・縮小して目立たせる
- 繰り返し動作で継続的に注意を喚起
- CSSのみで簡単に実装可能
活用シーン
- 新着通知やメッセージの表示
- ショッピングカート内の商品数表示
- アプリやWebサイトの重要ポイントの強調
メリット
- ユーザーの目を自然に誘導できる
- シンプルなデザインでも存在感を発揮
- コード量が少なく、軽量で高速表示
「パルスバッジ」は、通知や重要情報に視覚的なアクセントを加え、ユーザーに直感的に注意を向けさせる便利なUIエフェクトです。
Vanta.js：光輪
See the Pen vanta.js：光輪 by et (@eito-oda) on CodePen.
「Vanta.js：光輪」は、Webページに幻想的な光の輪アニメーションを表示できるライブラリです。
光が放射状に広がるエフェクトで、ページの印象をダイナミックかつ未来的に演出できます。
特徴
- 光の輪が回転・拡散するアニメーション
- マウスやタッチ操作に反応して動きが変化
- 軽量で簡単に背景アニメーションとして導入可能
- JavaScriptライブラリ「Vanta.js」を使用
活用シーン
- Webサイトのヒーローセクション背景
- サービス紹介ページのアクセント演出
- イベントサイトやポートフォリオサイトの動的表現
メリット
- ユーザーの目を引くインパクトあるデザイン
- CSSだけでは難しい複雑な光の演出が簡単に実装可能
- ページ全体を重くせず動的背景を追加できる
「Vanta.js：光輪」を使えば、背景に幻想的な光の輪を加えて、Webサイトを印象的かつ動的に演出できます。
スライドアウト式 左から右にフルスクリーンローディング
See the Pen スライドアウト式 左から右にフルスクリーンローディング by et (@eito-oda) on CodePen.
スライドアウト式フルスクリーンローディングは、ページ読み込み時に画面全体を覆うオーバーレイが左から右にスライドして消える演出です。
ユーザーに動きのある導入体験を提供し、ページの読み込み完了を印象的に演出できます。
特徴
- ページ全体を覆うフルスクリーン表示
- 左から右へのスライドアニメーション
- 読み込み完了後に自動的に消える仕様
- CSSアニメーションと簡単なJavaScriptで実装可能
活用シーン
- Webサイトのトップページやランディングページ
- サービス紹介サイトでのページ遷移演出
- ローディング時間をユーザーにわかりやすく見せたい場合
メリット
- ページの第一印象に動きをつけられる
- 単純なフェードよりも視覚的インパクトが強い
- 読み込み完了のタイミングを自然にユーザーに伝えられる
左から右にスライドするフルスクリーンローディングは、シンプルながら印象的な導入演出として、Webサイトの体験価値を高めることができます。
数値カウンターがスクロール量でリアルタイム上昇
See the Pen 数値カウンターがスクロール量でリアルタイム上昇 by et (@eito-oda) on CodePen.
スクロール連動型の数値カウンターは、ユーザーがページをスクロールするたびに数値がリアルタイムで増加していく演出です。
統計や進捗、スキルパーセンテージなどを視覚的に表現でき、注目度の高いコンテンツに仕上げられます。
特徴
- スクロールに応じて数値が0から設定値まで増加
- パーセント表示や単位付き表示にも対応可能
- GSAPのScrollTriggerで簡単に実装
- リアルタイムで動くため、視覚的にダイナミック
活用シーン
- サービスの利用実績や成長率の表示
- スキルや能力のパーセンテージ表示
- 年間売上やユーザー数のカウントアップ演出
- 数値を目立たせたい統計情報の強調
メリット
- データや成果を視覚的に印象付けられる
- スクロール連動で自然にユーザーの目線を誘導
- 静的な数字表示よりも興味を引きやすい
- 簡単なコードで動きのある演出が可能
スクロールに連動して上昇する数値カウンターは、Webサイトの統計情報や成果発表にインパクトを与え、ユーザーにわかりやすく数値をアピールできる演出方法です。
ふわっと魔法の光が左から右へ流れる
See the Pen ふわっと魔法の光が左から右へ流れる by et (@eito-oda) on CodePen.
「Magic Glow」は、文字の横を光がスムーズに走る演出です。
スクロール連動でテキストがフェードインすると同時に光が文字上を流れるため、動きのある印象的なタイトルや見出しを作ることができます。
特徴
- 光の球が文字の上を滑るように走るアニメーション
- テキストはフェードインしながら光の演出と連動
- GSAPとScrollTriggerで簡単にスクロール連動実装
- 光の軌跡は滑らかで動的な印象を与える
活用シーン
- Webサイトのメイン見出しやセクションタイトル
- キャンペーンや特集ページの強調テキスト
- サービス名やブランド名の演出
- 注目を集めたい箇所のビジュアル演出
メリット
- ユーザーの視線を自然に誘導できる
- 動きのある見出しでページの印象がアップ
- 単純なテキストよりも印象的で覚えやすい
- コード量が少なく、手軽に導入可能
スクロール連動の「Magic Glow」は、文字に沿って光が走る演出で、見出しやタイトルを華やかにし、視覚的な注目度を高めることができます。
波状スピン
See the Pen 波状スピン by et (@eito-oda) on CodePen.
「波状スピン」は、要素が下方向から浮かび上がりながら回転し、スピード感のある波状の動きで表示される演出です。
スクロール連動で動くため、コンテンツにリズム感や躍動感を与えることができます。
特徴
- 下から浮かび上がりながら回転するアニメーション
- スケールと回転を組み合わせた動きで立体感を演出
- GSAPとScrollTriggerでスクロール連動が簡単に実装可能
- 波のような動きで視覚的に印象的
活用シーン
- サービスや製品の紹介カードの演出
- ページ内の注目セクションの強調
- ポートフォリオや作品紹介の動的表示
- ユーザーの視線を誘導したい箇所
メリット
- 単調なスクロールでも動きで視覚的アクセントになる
- ページ全体にリズム感や躍動感を付与できる
- ユーザーの目を自然に引きつける
- コード量が少なく、簡単に導入可能
スクロール連動の「波状スピン」は、回転と浮上を組み合わせた動きで、コンテンツにリズム感と立体的な印象を与える演出です。
スクロールで円がリング状に拡大
See the Pen スクロールで円がリング状に拡大 by et (@eito-oda) on CodePen.
「スクロールで円がリング状に拡大」は、スクロールに連動して小さな円が徐々に大きくなり、リング状に変化するアニメーションです。
シンプルながら視覚的に目を引く演出で、スクロール体験に動きを加えられます。
特徴
- 小さな円がスクロールに応じてリング状に拡大
- ボーダーのみのデザインで透明感のある表現
- GSAPとScrollTriggerで簡単にスクロール連動アニメーションを実装可能
- 拡大の度合いを自在にコントロールできる
活用シーン
- ページの導入セクションやヒーローイメージのアクセント
- サービスや製品の強調部分の背景演出
- コンテンツ間のスクロール誘導や視線誘導
- 視覚的なリズムを作る装飾要素
メリット
- シンプルな形状でも動きで注目を集められる
- ページに動的な要素を加え、退屈さを軽減
- 実装が軽量でページ表示速度への影響が少ない
- 他のアニメーションやテキストと組み合わせやすい
スクロールで拡大するリング状の円は、シンプルながら動きで印象を与える演出です。ページ内で視線を誘導したり、アクセントとして活用するのに最適です。
まとめ
アニメーションは、派手さよりも 「適切な場面で、適切な動きを使うこと」が大切です。
ほんの少し動きを加えるだけでも、サイトの印象・読みやすさ・使いやすさは大きく変わります。
今回紹介したアニメーションはどれも 軽量・シンプル・汎用性が高い ものばかりです。
動きのあるレイアウトを少し加えるだけでも、サイト全体の雰囲気がぐっと明るくなることがあります。
ぜひ、制作されているプロジェクトの中で、合いそうな場面があれば取り入れてみてください。
