マウスホバーで動き出す動画ページの作り方 (1/2)

マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg

[perry-tips]

“ あのサイトとはひと味違う！こだわりマウスオーバー20連発 マウスオーバーとマウスアウトで異なる動きを見せる、こだわりのマウスオーバーアニメーション。CSS3とjQueryを使って20個のバリエーションを作る。 ”

[kkeisuke]

“video”