jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
Posted: 2010.10.24 / Category: javascript / Tag: jQuery ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準備 はじめにボタンと
jQuery入門講座：サンプル目次
索引 └ サンプル目次 1章：短編集 ├ スイッチの作成 ├ キャプションの表示 ├ スムーススクロール(1) ├ スムーススクロール(2) ├ タブメニュー(1) ├ タブメニュー(2) ├ タブメニュー(3) ├ タブメニュー(4) ├ カテゴリ切替(1) ├ カテゴリ切替(2) └ カテゴリ切替(3) 2章：診断系コンテンツ ├ 選択肢の作成(1) ├ 選択肢の作成(2) ├ 選択肢の作成(3) ├ 質問の切替(1) ├ 質問の切替(2) ├ 点数計算 ├ 結果の表示 ├ 外部テキストの読込 └ もう一度ボタン 3章：製品抽出系コンテンツ ├ 構成の確認 ├ 回答の確認 ├ 点数表の作成 ├ 得点の集計(1) ├ 得点の集計(2) ├ 結果画面の作成(1) └ 結果画面の作成(2) 番外：Simulation Game ├ 地形データの読込 ├ ユニットの移動 ├ 敵ユニットの扱い
マウスホバーで動き出す動画ページの作り方 (1/2)
マウスホバーを基点とした動画再生 「CONTROL FILMS」は、一見するとサムネイルを並べただけの非常にシンプルなサイトだ。だが、サムネイル上にマウスホバーすると動画の再生が始まり、にぎやかなサイトに一変。コンテンツの魅力を引き出し、第一印象を覆すことに成功している。 今回はCONTROL FILMSを参考に、マウスホバーで動画を自在に制御するサイトを作ってみよう。 STEP 1：video要素の設置 最初に、動画を再生するためのvideo要素を設置する。video要素は、自動再生やループ、サムネイルの指定、コントローラーの表示/非表示等を属性値で設定できる。例では動画の自動再生（autoplay） / ループ（loop） / サムネイル画像（poster）を指定している。 ■ソースコード（HTML） <video autoplay loop poster="img/thumb.jpg
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
