マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
【JavaScript入門】はじめてのDOM操作・取得まとめ！ | 侍エンジニアブログ
こんにちは！Webコーダー・プログラマーの貝原（@touhicomu）です。 今回は、JavaScriptでHTMLを操作するために欠かせない「DOM」について学習をしていきましょう。DOMを学ぶには「ツリー構造」の基本や「イベント処理」などについて学習することも非常に重要になってきます。 そこでこの記事では、そもそもDOMとは何か？DOMの使い方は？という基本的な内容から学習を進めていき、さらに、 「DOM」とは？ それでは、まず最初に「DOM」について基本的な知識から学習を進めていきましょう！ 「DOM」は、簡単に言うとHTMLなどのドキュメントにJavaScriptからアクセスするための仕組みのこと言います。DOMの正式名称が「Document Object Model」と呼ばれることからも分かるように、HTML文書をオブジェクトデータのように考えます。 例えば、次のようなHTMLが
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
