CodePenで公開されている、静止画に動きを加えて演出するKen Burns Effectのアイデアを8個セレクトしました。CSSのみで完結するシンプルな実装から、GSAPやSVGレイヤーを使った本格的な演出まで、幅広いバリエーションを集めています。各スニペットには実装のポイントも添えているので、どんな仕組みで動いているのか、どこを見ればカスタマイズできるのかが把握しやすくなっています。気になる表現が見つかったら、実際のサイト制作の参考にしてみてください。
Ken Burns Effectのアイデア
Ken Burns Effect (Pure CSS)
CSSのみで作られた画像切替のKen Burns Effect
See the Pen Ken Burns Effect (Pure CSS) by alphardex (@alphardex) on CodePen.
- Author : alphardex
- Link : CodePen – Demo
💡 実装のポイント
SCSSの$total-slides（枚数）と$interval（切替間隔）という2つの変数だけで全体のタイミングが決まる構成。@forループで各<li>にanimation-delayを自動割り当てしているので、画像を増減する際は変数の数値と#slideNのブロックを揃えて追加・削除すればOK。
Ken Burns slider
JSを使用したぼかしも入ったKen Burns Effect
See the Pen Ken Burns slider by George (@georgeivan) on CodePen.
- Author : George
- Link : CodePen – Demo
💡 実装のポイント
各<section>のdata-background属性からJS（GSAPのTweenLite/TimelineMax）が背景用の<img>を動的生成する仕組み。画像はCSSではなくJS側で組み立てられるため、差し替えは属性値の書き換えのみで完結する一方、パンや拡大の演出タイミングを変えたい場合はJS内のburnsDuration等の数値を触る必要がある。
CSS Gallery
CSS・JSを使用したKen Burns Effectのアニメーション
See the Pen CSS Gallery by Ana Travas (@anatravas) on CodePen.
- Author : Ana Travas
- Link : CodePen – Demo
💡 実装のポイント
Pug＋LESSの組み合わせで、kenburns-top/bottom/left/rightの4方向分のキーフレームを用意し、@delay1〜@delay7のLESS変数で表示タイミングを数珠つなぎに管理している。JS側はcreatejsのLoadQueueで画像をプリロードしてから.loadedクラスを付与する仕組みなので、画像を差し替える場合はHTML・CSS・JSの3箇所を揃える必要がある。
Parallax Ken Burns Effect in SVG
視差効果を入れたKen Burns Effect
See the Pen Parallax Ken Burns Effect in SVG by Alex (@alexmwalker) on CodePen.
- Author : Alex
- Link : CodePen – Demo
💡 実装のポイント
1枚の写真を.front・.mid・.backの3レイヤーに手動で切り分け、SVGの<image>要素ごとに異なるscaleキーフレームを当てて疑似3D視差を作る構成。<feGaussianBlur>フィルターで奥行きのボケも表現しているが、レイヤー分割の下準備が必要な分、通常の2点パン型Ken Burnsより手間がかかる点に注意。
Ken Burns Carrousel with GSAP
GSAPを使用したKen Burns Effect
See the Pen [ W.I.P. ] Ken Burns Carrousel with GSAP by Cedrick (@Cedrick) on CodePen.
- Author : Cedrick
- Link : CodePen – Demo
💡 実装のポイント
jQuery＋GSAP（TimelineMax）で画像ごとにimgAnim()関数を呼び出し、randomIntFromInterval・randomFloatFromIntervalでパン先の座標と拡大率を毎回ランダム化している。画像を切り替えるたびに動きが変わって見えるのはこのランダム関数のおかげで、transitionSpeedやslideDurationを変えれば全体の速度感も調整できる。
Play/Pause Animations
コントロール(再生/停止)のあるKen Burns Effect
See the Pen <details> Play/Pause Animations by Mads Stoumann (@stoumann) on CodePen.
- Author : MADS STOUMANN
- Link : CodePen – Demo
💡 実装のポイント
JS不要（コード内コメントにも”JavaScript Not Required!”と明記）で、<details>要素の開閉状態をdetails[open]セレクタで検知し、CSSカスタムプロパティ--animps/--img-animpsを切り替えて再生・一時停止を制御している。8方向分のkenburns-◯◯キーフレームを<figure>のインラインスタイル--animnで指定する設計なので、方向違いのバリエーションも作りやすい。
List Background Hover
Ken Burns Effectを使用したホバーエフェクト
See the Pen List Background Hover by Ema (@emared) on CodePen.
- Author : Ema
- Link : CodePen – Demo
💡 実装のポイント
リスト項目のidと対応するパネルの#◯◯-panelを命名規則で紐づけ、jQueryのhover()で.is-hoverクラスを付け外しする仕組み。Ken Burns自体はscale(1)→scale(1.1)のシンプルなkeyframesだが、常時再生ではなくホバー中だけ発火する点が他の事例と異なる。
Ken Burns Style Hover Animation
Ken Burns Effectを使用したホバーエフェクト
See the Pen Ken Burns Style Hover Animation by Alan Fung (@wailun) on CodePen.
- Author : Alan Fung
- Link : CodePen – Demo
💡 実装のポイント
JS不要のピュアCSS構成。SCSSの.cardを@extendして.one〜.nineの9枚分の背景画像クラスを作り、:hover時に.imageへopacityとtransform: scale(1.5)を適用しているだけのシンプルな仕組み。新しいカードを増やす場合は@extend .cardしたクラスを1つ追加すればよい。
Ken Burns Effectとは？
Ken Burns Effectとは、静止画像に動きを加えてドラマチックな演出をする手法のことです。名前は、アメリカのドキュメンタリー映像作家であるケン・バーンズに由来します。
静止画像を縮小・拡大・移動させることで、画像が動いているような印象を与える手法は、映画やテレビ番組、プレゼンテーション、ビデオマーケティングなどでも多く使用されています。
CodePenとは？
CodePenは、HTML、CSS、JavaScriptを使ってウェブページのプロトタイプや実装を行うことができるオンラインの開発環境です。
CodePenでは、ウェブ開発者やデザイナーが、ブラウザ上でコードを書きながら、すばやく試行錯誤することができます。ユーザーは自分のプロジェクトを公開し、他のユーザーによるフィードバックを受けたり、共有することもできます。
CodePenには、エディター機能が搭載されており、HTML、CSS、JavaScriptのコードを入力することができます。また、ユーザーが公開したプロジェクトは、フロントエンドの技術を利用して動的な表現やアニメーションを作ることができます。
よくある質問
-
SCSS・LESS・Pugで書かれているコードはそのまま使えますか？
そのままでは動作しません。プリプロセッサはコンパイルが必要なため、ビルド環境がない場合はCodePen上の「View Compiled CSS／HTML」から通常のコードを書き出して使用してください。
-
GSAP（TweenMax・TimelineMax）を使ったサンプルを動かすには何が必要ですか？
GSAPのCDN読み込みが必要です。掲載事例の一部はGSAP2系以前のTweenMax/TimelineMax構文を使用しており、GSAP3以降ではAPIが統合されているため、最新版を使う場合は
gsap.to()形式への読み替えが必要になる点にご注意ください。 -
Ken Burns Effectはアクセシビリティ的に問題ありませんか？
常時ズーム・パンし続けるアニメーションのため、動きに敏感なユーザー向けに
prefers-reduced-motionメディアクエリでアニメーションを無効化する配慮を加えるのがおすすめです。 -
画像の枚数を増減したい場合、どこを直せばいいですか？
CSSのみの実装ならスライド用の要素と対応するキーフレーム／delay設定をセットで追加・削除してください。JS駆動の実装（GSAP・jQuery系）の場合は、画像を保持している配列やDOM要素の数に応じてループ処理が自動対応するものと、個別に記述が必要なものがあるため、各スニペットの実装のポイントを参考にしてください。
