こんにちは、UXデザイン室の松山です。 中学生の時のアダ名は「しょくぱんマン」と「青ジョリ」でした。 理由は色白なのとヒゲが濃いからです。2つのあだ名の割合は、ハーフハーフです。 さて前回のTips*Blogでは、jQueryで「卵をゆらゆら揺らす方法」を説明しました。 今回は、HTML5のvideoタグを使用し、マウスホバーでアニメーション(アコーディオン)した要素の中で動画を再生する方法を説明します。サンプルはjQuery版とCSS3版の2つ用意しました。 videoタグの再生・停止などの制御部分はCSS3版もjQueryを使用しています。 最近では動画を背景で再生させたりするサイトも多くなりました。 HTML5のvideoタグを使用すると動画の制御が凄く簡単なので覚えておくとかなり役に立つと思います。 今回作成したサンプル 【jQuery版】サンプルはこちら 【CSS3版】サンプルは