【CodePen】Ken Burns Effectのアイデア8選

CSSのみで作られた画像切替のKen Burns Effect

See the Pen Ken Burns Effect (Pure CSS) by alphardex (@alphardex) on CodePen.

JSを使用したぼかしも入ったKen Burns Effect

See the Pen Ken Burns slider by George (@georgeivan) on CodePen.

CSS・JSを使用したKen Burns Effectのアニメーション

See the Pen CSS Gallery by Ana Travas (@anatravas) on CodePen.

視差効果を入れたKen Burns Effect

See the Pen Parallax Ken Burns Effect in SVG by Alex (@alexmwalker) on CodePen.

GSAPを使用したKen Burns Effect

See the Pen [ W.I.P. ] Ken Burns Carrousel with GSAP by Cedrick (@Cedrick) on CodePen.

コントロール(再生/停止)のあるKen Burns Effect

See the Pen <details> Play/Pause Animations by Mads Stoumann (@stoumann) on CodePen.

Ken Burns Effectを使用したホバーエフェクト

See the Pen List Background Hover by Ema (@emared) on CodePen.

Ken Burns Effectを使用したホバーエフェクト

See the Pen Ken Burns Style Hover Animation by Alan Fung (@wailun) on CodePen.

Ken Burns Effectとは、静止画像に動きを加えてドラマチックな演出をする手法のことです。名前は、アメリカのドキュメンタリー映像作家であるケン・バーンズに由来します。

静止画像を縮小・拡大・移動させることで、画像が動いているような印象を与える手法は、映画やテレビ番組、プレゼンテーション、ビデオマーケティングなどでも多く使用されています。

CodePenは、HTML、CSS、JavaScriptを使ってウェブページのプロトタイプや実装を行うことができるオンラインの開発環境です。

CodePenでは、ウェブ開発者やデザイナーが、ブラウザ上でコードを書きながら、すばやく試行錯誤することができます。ユーザーは自分のプロジェクトを公開し、他のユーザーによるフィードバックを受けたり、共有することもできます。

CodePenには、エディター機能が搭載されており、HTML、CSS、JavaScriptのコードを入力することができます。また、ユーザーが公開したプロジェクトは、フロントエンドの技術を利用して動的な表現やアニメーションを作ることができます。