マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
FlashからEdge?Adobe Edgeを使ってみる！ 『インストール方法からサンプルコンテンツ作成まで』 | HTML5でサイトをつくろう
FlashからEdge?Adobe Edgeを使ってみる！ 『インストール方法からサンプルコンテンツ作成まで』 Adobe Edgeとは 先月の1日(※現在は2011年9月)アドビがHTML5対応のインタラクションデザインツール「Adobe Edge」のパブリックプレビュー版をリリースしましたが、皆さんはもう使ってみましたか？ リリース後、私の周りでもとても話題になっていました。 この「Adobe Edge」はFlashで行っていたアニメーションなどのインタラクティブコンテンツを『 HTML5・CSS3・JavaScript 』などの標準規格を使用して制作することができるツールになっているようです。 思えば、去年ぐらいから私自身もFlashを使う機会が減ってきたように思います。今後どうなっていくのだろう？と考えていたところでのリリースでしたのでとても興味があります。 また「Adobe Ed
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
