jQuery UI Extra-5 : HTML要素のマウスホバー時に光源がカーソルに追従するエフェクト

【導入準備】概要

当サイトの…

「リンクボタン」「開閉ボタン」「ナビゲーション」
「検索フォーム」「サイドバータイトル」「パンくずリスト」

…などで実装している…

マウスホバー時にマウスに追従して光源が移動するエフェクトの解説です…

「jQuery」は制御部分にしか使用しませんので…

ページ読み込み時の…導入箇所の見た目の「形状」には影響が無く…

ページ読み込み時に見える部分には…このエフェクトの導入をお薦めします…

仮に…「Fantasic Light」として進めていきます…

「Fantasic Light」のネタ元は…

「Buttons like Windows 7 with JS & CSS」

…で検索して下さい…

スペイン語のサイトですが

コードは世界共通ですね…

(￣ー￣) 邪笑®

簡単に言うと…

「z-index」で重ねて…ホバー時に「jQuery」で透過を制御するという…

素晴らしいアイデアですが…私的には…少々不満な箇所がありました…

• 光源が大きすぎて固定幅のナビゲーションなど狭い幅の場所で使うとマウスに追従という感じが損なわれる…
• 光源の色は四色だけで…ナビゲーションのカテゴリー毎にテーマカラーを設定しているのでカテゴリー数と同数欲しい…
• リピートした状態の背景画像に光源を載せた画像をマウスに追従させているのでデザイン的に汎用性に乏しい…
• HTTPリクエストを減らすために「base64」変換するには画像サイズが大きすぎて膨大な文字列になりスタイルシート的に見辛くなる…

…という…4点です…古いブラウザの更新時期とも重なり…

実装はしていましたが…XP のサポートが終了したのを待って記事にしました…

検索して…配布先サイトでデモを触って…

上記…4点が然程気にならないって方は…以下を読む必要は無く…

ご自身のサイトで導入しているスクリプトの環境により…

「MooTools」「jQuery」の…2パターン用意されていますので配布先からどうぞ…

当サイトでは…光源を小さくして…

光源以外は透過する画像をマウスに追従する画像として使う事で…

上記…4点を解決しています…これにより…

サイドバーのタイトルのように…同じ高さならば…リピートじゃない背景画像にも…

光源画像はそのまま弄らずに…光源でマウスを追従出来るようになります…

「position」プロパティを使用していますので…例えば…

画像にテキストを回り込ませる場合など…記述位置によっては…

回り込み解除「<br style="clear:both;"/>」しなければ…

テキストとの位置関係が前後する事があります…

尚…テキストの改行には…対応していません…

【導入準備】画像作成

先ずは光源の透過画像を作成します…

実装している赤色の光源を例にして…

作成手順を画像にしました…

形式は圧縮も勘案して「png」です…

カラーチャートで同系他色を選べば統一感が出ます…地味目に作っています

当サイトではナビゲーションで使用している…

8色に白色を加えた…9色をカテゴリー毎のテーマカラーとして使用しています…

次に…光源の透過画像と同じ高さで…背景画像を作成します…

当サイトでは…サイドバーのタイトル画像 2種類と…

それ以外のリピート画像「 」(2x25 px) の…3種類の背景画像を使用しています…

お好みで作成して下さい…画像作成が完了したら…

圧縮してから「base64」の生データに変換しておいて下さい…

png 画像を最大70％圧縮「TinyPNG」  

画像をbase64エンコードするツール / Syncer  

【導入準備】JavaScript / CSS

動作制御に「jQuery」を使いますので…

未導入の方は…下部のページングの第１回「導入」を参照して…

「Fantasic Light」のカスタムコードとともに読み込んで下さい…

「Fantasic Light」のカスタムコード

$(function(){$(".light a").each(function(){var a=$(this);a.lightBG=$(document.createElement("div")).css({opacity:0});a.lightBG.insertBefore(a);a.mousemove(function(b){a.lightBG.css({"background-position":-((600/2)-(b.originalEvent.layerX||b.originalEvent.offsetX||0))+"px top"})});a.hover(function(){a.lightBG.stop().animate({opacity:1},300)},function(){a.lightBG.stop().animate({opacity:0},300)})})});

「Fantasic Light」の CSS です…

「Fantasic Light」の CSS

/* Fantasic  Light Button */
/* 基本設定 */
.light{font-size:12px;font-style:italic;float:left;background:url(「ボタン」用背景画像の生データ) repeat-x top left;width:100%;height:25px;line-height:25px;position:relative}
ul.light,ul.light li{padding:0;margin:0;list-style-type:none}
ul.light li{background:url(「ナビゲーション」用背景画像の生データ) repeat-x top left;height:25px;line-height:25px;display:inline;position:relative;float:left;text-align:center;border:1px solid #666}
h2.side-l .light {font-family:HG丸ｺﾞｼｯｸM-PRO,'HG Maru Gothic M-PRO','MS Pゴシック',sans-serif;font-size:12px;font-style:italic;float:left;background:url(「左サイドバー」用背景画像の生データ) no-repeat;width:180px;height:25px;line-height:25px;position:relative}
h2.side-r .light{font-family:HG丸ｺﾞｼｯｸM-PRO,'HG Maru Gothic M-PRO','MS Pゴシック',sans-serif;font-size:12px;font-style:italic;float:left;background:url(「右サイドバー」用背景画像の生データ) no-repeat;width:320px;height:25px;line-height:25px;position:relative}
/* 基本領域設定 */
.light div{position:absolute;top:0;left:0;width:100%;height:25px;background:url(光源「Blue」の生データ) no-repeat center;z-index:0}
/* オプション領域設定 */
.light-b div{width:100%;background-image:url(光源「Blue」の生データ);background-repeat:no-repeat}
.light-g div{width:100%;background-image:url(光源「Green」の生データ);background-repeat:no-repeat}
.light-y div{width:100%;background-image:url(光源「Yellow」の生データ);background-repeat:no-repeat}
.light-r div{width:100%;background-image:url(光源「Red」の生データ);background-repeat:no-repeat}
.light-p div{width:100%;background-image:url(光源「Purple」の生データ);background-repeat:no-repeat}
.light-rb div{width:100%;background-image:url(光源「Royalblue」の生データ);background-repeat:no-repeat}
.light-s div{width:100%;background-image:url(光源「Seagreen」の生データ);background-repeat:no-repeat}
.light-t div{width:100%;background-image:url(光源「Teal」の生データ);background-repeat:no-repeat}
.light-w div{width:100%;background-image:url(光源「White」の生データ);background-repeat:no-repeat}
/* リンク設定 */
.light a{color:#c0c0c0;text-decoration:none;text-align:center;display:block;z-index:2;position:relative;padding:0 15px;line-height:25px}
.light a:hover{color:#fff;font-weight:bold;text-decoration:none}
h2.side-l a,h2.side-r a{color:#1E90FF;text-decoration:none;text-align:center;display:block;z-index:2;position:relative;padding:3px 0 0;line-height:25px}
/* ラップ領域設定 */
span.light{width:auto;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #666;overflow:hidden;-moz-box-shadow: 1px 1px 3px #666;-webkit-box-shadow: 1px 1px 3px #666;box-shadow: 1px 1px 3px #666}
span.light div{-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #666;top:-1px;left:-1px}
.sidebar h2.side-l,.sidebar h2.side-r{margin:0;padding:0;}
h2.side-l span.light,h2.side-r span.light{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border:none;overflow:hidden;-moz-box-shadow: 0 0 0 #666;-webkit-box-shadow: 0 0 0 #666;box-shadow: 0 0 0 #666}
h2.side-l span.light div,h2.side-r span.light div{border:none;top:-1px;left:-1px}
/* Normal */
.normal a{margin:0 -10px;font-size:11px}
.normal a:hover{font-weight:normal}
/* Triangle */
.triangle-s > a::after{content:"";width:0;height:0;border-width:5px 3px;border-style:solid;border-color:#fff transparent transparent transparent;position:absolute;top:10px;left:8px}
.triangle-e > a::after{content:"";width:0;height:0;border-width:3px 5px;border-style:solid;border-color:transparent transparent transparent #fff;position:absolute;top:9px;left:8px}
.triangle-s a,.triangle-e a{margin-right:-10px;font-size:11px}
.triangle-s a:hover,.triangle-e a:hover{font-weight:normal}

「基本領域設定」は…「オプション領域」を指定する必要が無い基本色です

最も頻繁に使う光源色の生データを指定して下さい…

当サイトでは…光源「Blue」を指定しています…

「オプション領域設定」では…色名が分かり易いクラス名を指定して下さい…

「基本領域設定」で指定した光源色は不要…と思われるかもしれませが…

使用する場合もあるので…記述しておいて下さい…

【HTML マークアップ】ボタン

マークアップには…リンク要素を「span」要素でラップして使用します…

「position」プロパティを使用していますので…

要素の後には…適宜…改行を入れて下さい…

デフォルト状態のボタンではマウスホバーで…「font-weight」が…

「normal」から「bold」になる設定ですので…ご自身のフォント設定によっては…

英数字を含む文字列などでボタン幅が広がります…

デフォルト状態のボタンは…

「CSS Sprites」で「target="_blank"」のアイコン を表示して…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


外部サイトへのリンクで使用しています…

「基本領域設定」のボタン / デフォルト状態

「基本領域設定」のクラス名「light」だけ記述すれば OK です…

「基本領域設定」のボタン / 光源「Blue」

<span class="light"><a href="#">「基本領域設定」のボタン / 光源「Blue」</a></span>

「オプション領域設定」のボタン / デフォルト状態

「基本領域設定」のクラス名「light」に加え…

「オプション領域設定」のクラス名も記述します…

光源「Green」を例にすると…「class="light light-g"」…と…記述します…

「オプション領域設定」のボタン / 光源「Blue」「class="light light-b"」

「オプション領域設定」のボタン / 光源「Green」「class="light light-g"」

<span class="light light-g"><a href="#">「オプション領域設定」のボタン / 光源「Green」</a></span>

「オプション領域設定」のボタン / 光源「Yellow」「class="light light-y"」

「オプション領域設定」のボタン / 光源「Red」「class="light light-r"」

「オプション領域設定」のボタン / 光源「Purple」「class="light light-p"」

「オプション領域設定」のボタン / 光源「Royalblue」「class="light light-rb"」

「オプション領域設定」のボタン / 光源「Seagreen」「class="light light-s"」

「オプション領域設定」のボタン / 光源「Teal」「class="light light-t"」

「オプション領域設定」のボタン / 光源「White」「class="light light-w"」

「font-weight」を「normal」にするには…

マウスホバーしても「normal」のままですからボタン幅は変わりません…

クラス名「normal」を追加して記述します…「font-size」は「11px」で…

左右の「margin」も「10px」減らして設定してあります…

光源「Royalblue」を例にすると…

「normal」のボタン / 光源「Royalblue」「class="light light-rb normal"」

<span class="light light-rb normal"><a href="#">「normal」のボタン / 光源「Royalblue」</a></span>

CSS で三角形をボタンに付与するには…

過去記事のボタンと置き換えるために…

 「jQuery」「jQuery UI」第２回「Button」リンクとフォームをボタン化


CSS で表現する三角形も「擬似要素」を使って設定してあります…

クラス名「triangle-s」を追加すると南向き三角形が付与され…

クラス名「triangle-e」を追加すると東向き三角形が付与されます…

「font-size」は「11px」で…

右側の「margin」だけ「10px」減らして設定してあります…

リンクテキストの冒頭に「半角スペース」を入れています…

このボタンを…内部リンク用に…カテゴリー別に色を使い分けて使用しています…

光源「Seagreen」と「Teal」を…それぞれ例にすると…

 南向き三角形付与のボタン / 光源「Seagreen」「class="light light-s triangle-s"」

<span class="light light-s triangle-s"><a href="#">&nbsp;南向き三角形付与のボタン / 光源「Seagreen」</a></span>

 東向き三角形付与のボタン / 光源「Teal」「class="light light-t triangle-e"」

<span class="light light-t triangle-e"><a href="#">&nbsp;東向き三角形付与のボタン / 光源「Teal」</a></span>

開閉系のトリガーボタン

過去記事の開閉系のトリガーボタンも…

 「jQuery」「jQuery UI」第５回「Effects/Slide」ボタンクリックでコンテンツを開閉


この「normal」系のボタンで置き変える事が出来ます…

引用ボタンだけ光源「Purple」で置いておきます…

 Example for Collapse / Blockquote「class="light light-p triangle-s"」

(ボタンクリックで引用が開閉)

Example for Collapse / Blockquote_line1
Example for Collapse / Blockquote_line2
Example for Collapse / Blockquote_line3

<span class="light light-p triangle-s collapse2"><a>&nbsp;Example for Collapse / <span style="color:#1E90FF;">Blockquote</span></a></span>　(ボタンクリックで引用が開閉)

<blockquote style="display:none" class="collapse12 toggle ui-corner-all">
Example for Collapse / Blockquote_line1
Example for Collapse / Blockquote_line2
Example for Collapse / Blockquote_line3
</blockquote>

ポップアップ系のトリガーボタン

過去記事の…ダイアログなどの…ポップアップ系のトリガーボタンも…

 「jQuery」「jQuery UI」第７回「Dialog」ボタンクリックでコンテンツをポップアップ


同様に…「normal」系のボタンで置き変える事が出来ます…

記事中の「dialog0」ボタンだけ光源「Red」で置いておきます…

「CSS Sprites」でポップアップの画像 を表示しています…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】

驩驚れ礨栤 㦵ひょ奤ゞメ 榞妥堩焨稞 ぎゃヴィェチュ にゃ飌,
ぴゃ.夯䩵盨 むば㶣䧪㤣 み揣訦でぢゅ こべぬ 櫦갣 ぎょ㠣わ
ゝちゅ ラぽ誧禤ろ かこべぬギュ 榞妥堩焨稞, 㛥へ㠯焧ホゥ

Example Modal Dialog「class="light light-r normal"」

<div class="dialog0" title="You can drag this dialog!">
驩驚れ礨栤 㦵ひょ奤ゞメ 榞妥堩焨稞 ぎゃヴィェチュ にゃ飌,
ぴゃ.夯䩵盨 むば㶣䧪㤣 み揣訦でぢゅ こべぬ 櫦갣 ぎょ㠣わ 
ゝちゅ ラぽ誧禤ろ かこべぬギュ 榞妥堩焨稞, 㛥へ㠯焧ホゥ
</div>
<span class="light light-r normal show-dialog0"><a><span class="id211"></span> Example Modal Dialog</a></span>

【HTML マークアップ】ナビゲーション

マークアップには…「ul」要素を使用します…

記事領域幅の関係で「normal」系で解説しますが

「デフォルト」系でも…勿論…問題ありません…

「normal」だけで…「width」を指定しない…

領域一杯を使うタイプは…こんな感じになります…

• Blue
• Green
• Yellow
• Red
• Purple
• Royalblue
• Seagreen
• Teal
• White

<ul class="light">
<li class="light-b normal"><a href="#">Blue</a></li>
<li class="light-g normal"><a href="#">Green</a></li>
<li class="light-y normal"><a href="#">Yellow</a></li>
<li class="light-r normal"><a href="#">Red</a></li>
<li class="light-p normal"><a href="#">Purple</a></li>
<li class="light-rb normal"><a href="#">Royalblue</a></li>
<li class="light-s normal"><a href="#">Seagreen</a></li>
<li class="light-t normal"><a href="#">Teal</a></li>
<li class="light-w normal"><a href="#">White</a></li>
</ul>

「triangle-e」で東向き三角形を付与して…

余分な領域をなくすために…

「style="width:auto"」を指定すると…こんな感じ…

• Blue
• Green
• Yellow
• Red
• Purple
• Royalblue
• Seagreen
• Teal
• White

<ul class="light" style="width:auto">
<li class="light-b triangle-e"><a href="#">Blue</a></li>
<li class="light-g triangle-e"><a href="#">Green</a></li>
<li class="light-y triangle-e"><a href="#">Yellow</a></li>
<li class="light-r triangle-e"><a href="#">Red</a></li>
<li class="light-p triangle-e"><a href="#">Purple</a></li>
<li class="light-rb triangle-e"><a href="#">Royalblue</a></li>
<li class="light-s triangle-e"><a href="#">Seagreen</a></li>
<li class="light-t triangle-e"><a href="#">Teal</a></li>
<li class="light-w triangle-e"><a href="#">White</a></li>
</ul>

実装しているナビゲーションは…

更に…ちょこまかやっていますので解説は別途…記事にします…

 マウスホバーで光源が追従しスクロールでページトップに固定される3階層ナビゲーション


「パンくずリスト」も別途…CSS が必要なので同様です…

 パンくずリストをHTML要素のマウスホバー時に光源がカーソルに追従するエフェクトで実装

【HTML マークアップ】検索フォーム

ヘッダーの検索フォームの HTML だけ置いておきます…

肝は…背景に「transparent」を指定する事です…

「CSS Sprites」でサイトのアイコンを付与しています…

 Google Bloggerで絵文字を使うためのTips【CSS Sprites 編】


ヘッダーの検索フォームの HTML

<span class="light light-w"><a style="margin:0 -10px;"><form id="searchform" action="/search" method="get" title="Search This Site : Please enter your search text..."><span class="id15"></span>
<input id="s"  style="background:transparent;color:#fff;font-size:90%; font-style:italic;border:none" value="Enter : Your Search Text..." name="q" size="40" type="text"  onclick="this.value=''" /> <input id="searchsubmit" style="background:transparent;color:#8AC75A;font-size:90%;font-style:italic;border:none" value="Search" type="submit" />
</form></a></span>

【HTML マークアップ】サイドバータイトル

サイドバータイトルに限らず…違う背景画像を使いたい場合は…

「25px」の高さで背景画像を作成して下さい…

マークアップは…これまでと構造は同じですので…

左サイドバー「Search」ガジェットの HTML を置いておきます…

左サイドバー「Search」ガジェットの HTML

<b:widget id='HTML3' locked='false' title='Search : Dégustation?' type='HTML'>
  <b:includable id='main'>
    <!-- only display title if it's non-empty -->
    <b:if cond='data:title != &quot;&quot;'>
      <h2 class='side-l'>
        <span class='light light-g'>
          <a>
            Search
          </a>
        </span>
      </h2>
      <br style='clear:both;'/>
    </b:if>
    <div class='widget-content ui-corner-bottom'>
      <data:content/>
    </div>
  </b:includable>
</b:widget>

【HTML マークアップ】立体的リボン

過去記事をアレンジすれば…

 CSSだけで作るパステル調の立体的リボン(CSS-3D-Ribbon)


…にも適用できますのでバリエーションの一つとして書いておきます…

Hover me!! / Fantasic Light Title / Blue

テキスト

Hover me!! / Fantasic Light Title / Yellow

テキスト

<div class="ribbon-back0">
<h4 class="ribbon01 light" style="padding:0;width:110.5%;">
<span class="light-b"><a href="#">Hover me!! / Fantasic Light Title / Blue</a></span><span class="triangle1-l"></span><span class="triangle1-r"></span></h4>
<br style="clear:both;"/>テキスト
<h4 class="ribbon1 light" style="padding:0;">
<span class="light-y"><a href="#">Hover me!!  / Fantasic Light Title / Yellow</a></span><span class="triangle1-l"></span></h4>
<br style="clear:both;"/>テキスト
</div>

おわりに…

「jQuery」が大好きで…至る所に使っていますが…最大の問題は…

ページ読み込みが完了するまでの間…構造がネタバレする事です…

なので…読み込み時に見える範囲は…広告を除いて…

このエフェクトを使っています…

HTML マークアップは…定型文管理ソフトに登録しておくとお便利です…

 Clibor / クリップボード履歴と定型文管理ソフト


最後まで…お読みいただきましてありがとうございます…

Prev 1 2 3 4 5 6 7 8 9 Extra Next

Design jQuery JavaScript Current-Label : jQuery / Extra