[JS]面白いコンテンツが作れそう！動画とCSS3アニメーションを同調させるスクリプト -charlie.js

動画とCSS3アニメーションを同調させ、動画を表示しているページに要素をCSS3アニメーションで動かすことができるスクリプトを紹介します。

動画とコンテンツを連動させてプロダクトやサービスを紹介したり、教育コンテンツでも面白そうですね。

charlie.js -GitHub

デモページは、こちら。

デモページ（※音出ます）

左下の矢印で、動画がスタートし、コンテンツのショーが始まります。

動画のお兄さんが指でひょいっとやると、左下の矢印がそれに合わせてCSS3アニメーションでジャンプします。

コンテンツはを全面に表示することもできます。
この間も動画から、音声が流れています。

ダウンロードできるファイルにはデモファイルもあり、こちらのデモはシンプルです。
数秒ごとに、数字と異なるアニメーションが表示されます。

ダウンロードできるデモファイル

ローカル環境でデモファイルを見る時は、Chromeでは「file://」で読み込むとフレームレートの変更する時のバグがあるため動作しません。オンラインかFirefoxでご覧ください。

実装は、詳しいドキュメントが公開されていませんが、コードを見ると簡単にできそうです。

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="charlie.js"></script>

Step 2: HTML

まずは、動画をvideo要素で配置。

<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png" muted>
      <source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
      <source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
      <source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
      <p>Your user agent does not support the HTML5 Video element.</p>
</video>

動画のフレームレートに対応した要素を設定するHTMLはこんな感じです。
「data-times」で動画のフレームレートを指定し、要素を配置します。

      <div>
        <h2 class="animated" data-animations="fade" data-times="0">One</h2>
        <h2 class="animated circle" data-animations="grow" data-times="0"></h2>
      </div>
      
      <div>
        <h2 class="animated" data-animations="fade" data-times="5.5">Two</h2>
        <h2 class="animated circle" data-animations="grow" data-times="5.5"></h2>
      </div>
      
      <div>
        <h2 class="animated" data-animations="fade" data-times="8">Three</h2>
        <h2 class="animated circle" data-animations="grow" data-times="8"></h2>
      </div>