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

グリッチエフェクト

CodePenからKen Burns Effectのアイデアをまとめました。

 

 

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.

Ken Burns slider

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

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

CSS Gallery

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

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

Parallax Ken Burns Effect in SVG

視差効果を入れたKen Burns Effect

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

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.

Play/Pause Animations

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

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

List Background Hover

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

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

Ken Burns Style Hover Animation

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

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

Ken Burns Effectとは?

 

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

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

CodePenとは?

 

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

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

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



\ Webデザインに関するお役立ち情報を定期的に配信中 /

Follow @webclips_jp

PopularPosts
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • 漢字が使える日本語フリーフォント97選(商用利用可)
  • 無料で使えるデジタル風フォント13選
  • ビジネス系イラストをダウンロードできるフリー素材サイト7選
  • 無料で使用できるフリー動画素材・映像素材サイト15選
  • フォントを調べる時に役に立つツール・サイト10選
WordPress対応! 初心者におすすめのレンタルサーバー特集
RecentPosts
  • 【2024年7月版】WordPress対応のおすすめレンタルサーバー比較 ( 初心者向け )
  • 【2024年7月】Adobeのセール時期はいつ頃? Adobeセールの最新情報
  • 【2024年度】Adobe CC(Creative Cloud)を安く買う方法
  • Photoshopで使用できる“水しぶき系”ブラシ8選
  • 無料で使えるフリーイラスト素材サイト55選(商用利用可)
  • アイソメトリックイラストをダウンロードできるフリー素材サイト6選