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で動作している様子は下記です。
昨日上げた記事の動画キャプチャー。
— 鹿野壮@CSSNite・frokan登壇 (@tonkotsuboy_com) 2016年7月15日
CSS、JavaScriptを使わずHTMLだけでコマ撮りアニメ（ストップモーション）を実現しています。 #HTML5https://t.co/zRfwnm99jZ pic.twitter.com/xzi88HaMrT
画像のプリロードのみJavaScriptを使っていますが、ウインドウリサイズ時の画像切替には使っていません。
picture要素は便利
picture要素はレスポンシブイメージを実現するために用いるものです。これまでJavaScriptを使わないとできなかったメディアクエリー別の画像の出し分けが、HTMLのみで可能になります。
現在では、デスクトップ・モバイル含む現在の主要ブラウザ全てでpicture要素が使えます(Can I use picture)。今秋勧告されるHTML 5.1の新要素を是非体験してみてください。
ちなみに素材は、多摩川大会の動画から持ってきました。