コマ撮りアニメをHTML 5.1のpicture要素だけで作る方法(CSS、JavaScript不要)

HTML 5.1にて実装されるpicture要素を使うと、ビューポート（表示しているウインドウの大きさ）ごとに画像を出し分けることが可能です。今回はCSSやJavaScriptを用いずにpicture要素のみでコマ撮りアニメ（ストップモーション）を作ってみました。

▲ picture要素だけでコマ撮りアニメを実現している様子。ウインドウ幅を変更することで画像が切り替わる。

なお、picture要素の基本的な使い方は記事「HTML5.1の新要素picture入門」を参照ください。

ストップモーションの作り方

実装方法は次のとおりです。200枚の画像が、700px~899pxのビューポート幅で切り替わります。 picture要素に対応しているブラウザで動作します。

<picture>
  <!--source[media="(max-width: $$$@700px)"][srcset="images/frame_$$$.jpg"]*200-->
  <source media="(max-width: 700px)" srcset="images/frame_001.jpg">
  <source media="(max-width: 701px)" srcset="images/frame_002.jpg">
  <source media="(max-width: 702px)" srcset="images/frame_003.jpg">
  <source media="(max-width: 703px)" srcset="images/frame_004.jpg">
(中略)
  <source media="(max-width: 899px)" srcset="images/frame_200.jpg">
  <img src="images/frame_001.jpg" alt="">
</picture>

デモをCodepenにアップしました。ウインドウサイズ700px付近で、ゆっくりとブラウザのウインドウ幅を変更してみてください。

• デモ
• 全ソースコード

macOSのSafari 9.1で動作している様子は下記です。

昨日上げた記事の動画キャプチャー。
CSS、JavaScriptを使わずHTMLだけでコマ撮りアニメ（ストップモーション）を実現しています。 #HTML5https://t.co/zRfwnm99jZ pic.twitter.com/xzi88HaMrT

— 鹿野壮@CSSNite・frokan登壇 (@tonkotsuboy_com) 2016年7月15日

画像のプリロードのみJavaScriptを使っていますが、ウインドウリサイズ時の画像切替には使っていません。

picture要素は便利

picture要素はレスポンシブイメージを実現するために用いるものです。これまでJavaScriptを使わないとできなかったメディアクエリー別の画像の出し分けが、HTMLのみで可能になります。

現在では、デスクトップ・モバイル含む現在の主要ブラウザ全てでpicture要素が使えます(Can I use picture)。今秋勧告されるHTML 5.1の新要素を是非体験してみてください。

ちなみに素材は、多摩川大会の動画から持ってきました。
- 多摩川花火大会フィナーレ