Uizeのマウス・ホバー機能を使いこなす

　今回はUizeライブラリのクラスの一つであるHover Faderを利用して、 グラフィカルなメニューやサムネイルの表示機能を試してみます。

マウスホバーでクールな演出

演出にもさまざまなバリエーション

サムネイルにマウスを乗せるとタイトルが表示される

こちらのページで画像ギャラリーを組み合わせる方法を紹介してますので参考にしてください。

まずはセッティング

　UIZEを利用するためには、まずここからライブラリをダウンロードします。
　パッケージには多くのフォルダとファイルが入っていて、今回使用するファイルはJSフォルダのなかにあります。 なお、REFERENCEフォルダはUIZEクラス群の仕様について、EXPLAINERSフォルダには具体的な使い方が、 EXAMPLESフォルダはサンプルが豊富に用意されているの参考にしてください。

　JSファイルを開くと膨大の量のJSファイルが入っていますが、これらを全部アップロードする必要はありません。 まず~experimentalフォルダと~sourceフォルダは不要でしょう。また、UizeDotCom で始まるJSファイル群もサンプル用のスクリプトなのでアップロードする必要はありません。その他、Uizeフォルダ、 Uize_Widget_Bar_Progressフォルダなどにはウィジェットに使用する画像が入っています。これらはスライドバーなど Uizeの他の機能を利用するときに使うようです。

　そしてUize.Color.js⇒Uize.Xml.jsまでがUizeのJSライブラリです。 いずれも軽量なので一つのフォルダにまとめてアップロードしておくのがいいと思います。Hover Faderクラスを使用するために最低限必要となるのは Uize.jsと、Uize.Widget.Page.js、Uize.Widget.HoverFader.jsです。 さらに高度な機能を使うためにUize.Curve.jsと、Uize.Curve.Mod.jsも必要です。

　なおスライドショーと違って、今回はパッケージ内のCSSファイルは使いません。

headタグに書くJSファイルはUize.jsだけでOK

Uizeフレームワークでは、headタグに埋め込むJSファイルはUize.jsひとつで済みます。他のJSファイルに関しては、 スクリプト内で呼び出す仕組みになっているからです。

<script type="text/javascript" src="js/uize/Uize.js"></script>  

サンプル別のCSSとスクリプト

フェード効果のあるメニュー

　上のサンプルでは同じエフェクトで横に並ぶタイプのメニューと、縦並びのメニューが出ていますが、縦横の違いはCSSの内容が 違うだけであり、スクリプトは一箇所を除いて全く同じものです。それではCSSがそれぞれどうなっているかを見ていきます。

/* 横並び用（4項目）のスタイルシート */ #menu_design1 { /* メニュー全体のブロック */ margin: 15px 30px; text-align: center; /* 行揃えはデフォルトで中央揃えに */ position: relative; width: 552px; /* width(120*4) + padding(7*2*4) + border(2*2*4) */ } #menu_design1 a.menuLink, #menu_design1 a.menuLink:link, #menu_design1 a.menuLink:visited, #menu_design1 a.menuLink:hover, #menu_design1 a.menuLink:active { display: block; font-size: 14px; letter-spacing: 4px; color: #bbb; /* 文字色 */ background-color: #000; border: 2px solid #555; float: left; width: 120px; /* 個々のメニュー幅 */ padding: 5px 7px; text-decoration: none; } /* 縦並び用のスタイルシート */ #menu_design2 { /* メニュー全体のブロック */ margin: 15px 30px; text-align: center; /* 行揃えはデフォルトで中央揃えに */ position: relative; width: 200px; /* width(182) + padding(7*2) + border(2*2) */ } #menu_design2 a.menuLink, #menu_design2 a.menuLink:link, #menu_design2 a.menuLink:visited, #menu_design2 a.menuLink:hover, #menu_design2 a.menuLink:active { display: block; font-size: 14px; letter-spacing: 4px; color: #bbb; /* 文字色 */ background-color: #000; border: 2px solid #555; width: 182px; /* 個々のメニュー幅 */ padding: 5px 7px; margin-bottom: 5px; /* メニューの上下間隔 */ text-decoration: none; } /* floatプロパティを解除するためのクラス名 */ .clearFloatLeft { clear:left; height:0; }  

　またHTMLに記述する部分は、横並び用と縦並び用で分けると次のようになります。

<!-- 横並び用のHTML --> <div id="menu_design1"> <a href="javascript://" class="menuLink">HOME</a> <a href="javascript://" class="menuLink">ABOUT</a> <a href="javascript://" class="menuLink">SCRIPT</a> <a href="javascript://" class="menuLink">LINK</a> </div> <!-- 横並びメニューはfloatプロパティを解除する必要がある --> <div class="clearFloatLeft"></div> <!-- 縦並び用のHTML --> <div id="menu_design2"> <a href="javascript://" class="menuLink">HOME</a> <a href="javascript://" class="menuLink">ABOUT</a> <a href="javascript://" class="menuLink">SCRIPT</a> <a href="javascript://" class="menuLink">LINK</a> </div>  

　A要素のクラス名はすべて"menuLink"とし、divブロックのID名はCSSと対応させるようにします。次にスクリプト部分に入りますが、 下記のようにUize.moduleというメソッド内に記述する形になります。requiredプロパティには呼び出すUizeライブラリを配列と して渡します。ここでは、Uize.NodeとUize.Widget.Page、Uize.Widget.HoverFader、 また高度なエフェクトを使用するためUize.Curve、Uize.Curve.Modが必要です。そしてメニュー機能のスクリプトはbuilderメソッド内に記述します。

Uize.module ({ required: [ 'Uize.Node', 'Uize.Widget.Page', 'Uize.Widget.HoverFader', 'Uize.Curve', 'Uize.Curve.Mod' ], builder: function () { var page = window.page = new Uize.Widget.Page; //横並びメニューのスクリプト page.addChild( //ページにウィジェットを追加するメソッド 'menuHoverFader1', //これはウィジェット名を表す。名前は任意に決定 Uize.Widget.HoverFader, { //ID名が"menu_design1"という要素の子要素で、"menuLink"というクラス名を持つ要素を対象とする nodes: Uize.Node.find({ root: 'menu_design1', className: /\bmenuLink\b/ }), //マウスを乗せる前、もしくはマウスが離れた後のCSS設定 defaultStyle: { color: 'bbb', backgroundColor: '000', borderColor: '555' }, //マウスを乗せた後、最終的に移行するCSS設定 hoverStyle: { color: 'fff', backgroundColor: '4682B4', borderColor: '000' }, //マウスホバー時のエフェクト時間（ミリ秒単位）と遷移の仕方を指定 fadeIn: { duration:300, deceleration:1 }, //マウスアウト時のエフェクト時間（ミリ秒単位）と遷移の仕方を指定 fadeOut: { duration:500, acceleration:1 } } ); //縦並びメニューのスクリプト page.addChild( //ページにウィジェットを追加するメソッド 'menuHoverFader2', //これはウィジェット名を表す。名前は任意に決定 Uize.Widget.HoverFader, { //ID名が"menu_design2"という要素の子要素で、"menuLink"というクラス名を持つ要素を対象とする nodes: Uize.Node.find({ root: 'menu_design2', className: /\bmenuLink\b/ }), //マウスを乗せる前、もしくはマウスが離れた後のCSS設定 defaultStyle: { color: 'bbb', backgroundColor: '000', borderColor: '555' }, //マウスを乗せた後、最終的に移行するCSS設定 hoverStyle: { color: 'fff', backgroundColor: '4682B4', borderColor: '000' }, //マウスホバー後のエフェクト時間（ミリ秒単位）と遷移の仕方を指定 fadeIn: { duration:300, deceleration:1 }, //マウスアウト後のエフェクト時間（ミリ秒単位）と遷移の仕方を指定 fadeOut: { duration:500, acceleration:1 } } ); page.wireUi(); //ウィジェットをページに反映させるメソッド } });  

　エフェクトの細かい指定はdefaultStyleプロパティと、hoverStyleプロパティに設定します。上の例ではマウスを乗せると 文字色が灰色から白に変化し、背景色が黒から青に、枠線が灰色から黒に変わるようにしています。また、エフェクトの効果時間を fadeIn、fadeOutプロパティで設定しています。これらが最低限必要な設定です。

　さらに複雑なエフェクトにしたいときは、UizeのホームページからHover Fader Color Effectsの サイトを参考にするといいと思います。サンプルのエフェクトが"Blue Border Ghost Tail That Wobbles / Oscillates"から"Wobbly Shape Fade Out"まで20種類、 すべてが実用的なものとは限りませんが、豊富に用意されています。

　もしこのなかで利用したいエフェクトがあれば、そのエフェクトにセットしてからPARAMというタブをクリック。 すると下のテキストエリアにdefaultStyleやhoverStyleなど見覚えのあるプロパティを含んだオブジェクト{}が表示されるので、 一番外側の中カッコ以外の部分をコピーします。

PARAMタブをクリックしてテキストエリアの内容をコピーする

 

ペースト前のコード page.addChild( 'menuHoverFader1', Uize.Widget.HoverFader, { nodes: Uize.Node.find({ root: 'menu_design1', className: /\bmenuLink\b/ }), //このコード四行分とコピーした内容を入れ替える defaultStyle: { color: 'bbb', backgroundColor: '000', borderColor: '555' }, hoverStyle: { color: 'fff', backgroundColor: '4682B4', borderColor: '000' }, fadeIn: { duration:300, deceleration:1 }, fadeOut: { duration:500, acceleration:1 } } );  

ペースト後のコード page.addChild( 'menuHoverFader1', Uize.Widget.HoverFader, { nodes: Uize.Node.find({ root: 'menu_design1', className: /\bmenuLink\b/ }), //"Blue Border Ghost Tail That Wobbles / Oscillates"のコードを入れてみたところ defaultStyle:{ color:'b', backgroundColor:'0', borderTopColor:'0', borderLeftColor:'0', borderRightColor:'0', borderBottomColor:'0' }, hoverStyle:{ color:'b', backgroundColor:'0', borderTopColor:'5af', borderLeftColor:'5af', borderRightColor:'5af', borderBottomColor:'5af' }, fadeIn:{duration:500}, fadeOut:{ duration:2000, curve:{ borderLeftColor: Uize.Curve.Mod.blend ( 10, 1, Uize.Curve.Mod.bend ( Uize.Curve.Mod.repeat (1,25,0,1), 4 ) ), borderTopColor: Uize.Curve.Mod.blend ( 10, 1, Uize.Curve.Mod.bend ( Uize.Curve.Mod.repeat (1,25,0,1), 3.5 ) ), borderRightColor: Uize.Curve.Mod.blend ( 10, 1, Uize.Curve.Mod.bend ( Uize.Curve.Mod.repeat (1,25,0,1), 3 ) ), borderBottomColor: Uize.Curve.Mod.blend ( 10, 1, Uize.Curve.Mod.bend ( Uize.Curve.Mod.repeat (1,25,0,1), 2.5 ) ) } } } );  

マウスホバーでサムネイルのタイトルを表示させる

　次にサムネイルのサンプルを見ていきます。ここでは三種類のサンプルが用意されていますが、Uizeが用意しているサンプルは 全部で七つあり、このうち実用性の高そうな三つを紹介することにしました。すべてのサンプルはこのページ で確認できます。

CSSの共通する部分 /* サムネイル全体のブロック */ .thumbnails { width:678px; /* width(105*6) + margin(4*2*6) */ margin:0 auto; } /* サムネイル画像用スタイルシート */ .thumbnails .thumbnail { position:relative; cursor:pointer; display:block; float:left; font-size:12px; /* タイトルの文字サイズ */ width:105px; /* 画像の横サイズ */ margin:10px 4px; background-position:left 20px; background-repeat:no-repeat; white-space:nowrap; overflow:hidden; } .clearFloatLeft { clear:left; height:0; }  

　スタイルシートの内容は画像のサイズや、表示する枚数によって細かく変更する必要があります。最初のクラス"thumbnails"の widthプロパティは、サムネイル画像の横幅×表示枚数＋横マージン×表示枚数で計算した値を入れます。次のクラスは個別のサムネイル画像の 設定でwidthプロパティに一枚分の画像の横幅を指定します。

サムネイルセット１の設定

HTML記述部分（サムネイルが3枚のタイプ） <div id="thumbnails" class="thumbnails"> <div id="thumbnails1" class="thumbnailsSet"> <div style="background-image:url(images/sample1.jpg);" class="thumbnail">TITLE1</div> <div style="background-image:url(images/sample2.jpg);" class="thumbnail">TITLE2</div> <div style="background-image:url(images/sample3.jpg);" class="thumbnail">TITLE3</div> <div class="clearFloatLeft"></div> </div> </div>  

サムネイルセット１のCSS部分 /*** thumbnails set 1 ***/ #thumbnails1 .thumbnail { line-height:380px; /* height(180*2) + 20 */ height:180px; /* image height(160) + 20 */ text-align:center; /* 行揃えはデフォルトで中央になっています */ }  

　サムネイルセット１は、マウスを乗せると画像が20pxほど上に上がり、タイトルが下から浮上する仕組みになっています。 スタイルシートで修正する部分は二箇所のみで、heightプロパティには「サムネイル画像の縦幅+20」くらいを目安として指定します。 そしてline-heightプロパティは先ほど指定したheightプロパティを二倍にし、さらに20を加えた数値を指定します。若干ずれが 出る可能性があるので、ローカルで確認しながら行ってください。

サムネイルセット１のスクリプト Uize.module ({ required: [ 'Uize.Node', 'Uize.Widget.Page', 'Uize.Widget.HoverFader' ], builder: function () { var page = window.page = new Uize.Widget.Page; page.addChild( 'thumbnailsHoverFader1', //ウィジェット名は自由に設定する Uize.Widget.HoverFader, { nodes:{root:'thumbnails1',className:/\bthumbnail\b/}, defaultStyle:{backgroundPosition:'left 20px',lineHeight:380,color:'#f'}, hoverStyle:{backgroundPosition:'left 0px',lineHeight:335,color:'#0'}, fadeIn:{duration:400,deceleration:1}, fadeOut:{duration:400,deceleration:1} } ); page.wireUi(); } });  

　スクリプトで修正する箇所は、ウィジェット名（任意）とdefaultStyle、hoverStyleです。 defaultStyleはlineHeightプロパティの380をCSSで設定したline-heightプロパティと同じ数値にします。 また、hoverStyleのlineHeightプロパティはCSSのline-heightプロパティから40～45を引いた数値にします。 こちらもおかしな動きになっていないかローカルで確認しながら行ってください。

サムネイルセット２の設定

HTML記述部分（サムネイルが3枚のタイプ） <div id="thumbnails" class="thumbnails"> <div id="thumbnails2" class="thumbnailsSet"> <div style="background-image:url(images/sample1.jpg);" class="thumbnail">TITLE1</div> <div style="background-image:url(images/sample2.jpg);" class="thumbnail">TITLE2</div> <div style="background-image:url(images/sample3.jpg);" class="thumbnail">TITLE3</div> <div class="clearFloatLeft"></div> </div> </div>  

サムネイルセット２のCSS部分 /*** thumbnails set 2 ***/ #thumbnails2 .thumbnail { background-position:left top; background-color:#fff; padding:160px 0 0 0; /* 160 = image height */ line-height:20px; height:0; margin-bottom:20px; text-align:center; }  

　サムネイルセット２は、マウスを乗せると下側にタイトルが出てくる仕組みになっています。 スタイルシートで修正する部分は一箇所で、paddingプロパティのtopだけサムネイル画像の縦幅分に指定します。

サムネイルセット２のスクリプト Uize.module ({ required: [ 'Uize.Node', 'Uize.Widget.Page', 'Uize.Widget.HoverFader' ], builder: function () { var page = window.page = new Uize.Widget.Page; page.addChild( 'thumbnailsHoverFader2', //ウィジェット名は自由に設定する Uize.Widget.HoverFader, { nodes:{root:'thumbnails2',className:/\bthumbnail\b/}, defaultStyle:{height:0,marginBottom:20,backgroundColor:'#fff',color:'#000'}, hoverStyle:{height:20,marginBottom:0,backgroundColor:'#000',color:'#fff'}, fadeIn:{duration:400,deceleration:1}, fadeOut:{duration:700,deceleration:1} } ); page.wireUi(); } });  

　スクリプトで修正する箇所は、ウィジェット名（任意）以外に特にありません。またタイトルの背景色と文字色は任意で変更できる ので、hoverStyleのbackgroundColorプロパティとcolorプロパティをそれぞれ好きな色に変えてください。

サムネイルセット３の設定

HTML記述部分（サムネイルが3枚のタイプ） <div id="thumbnails" class="thumbnails"> <div id="thumbnails3" class="thumbnailsSet"> <div style="background-image:url(images/sample1.jpg);" class="thumbnail">TITLE1</div> <div style="background-image:url(images/sample2.jpg);" class="thumbnail">TITLE2</div> <div style="background-image:url(images/sample3.jpg);" class="thumbnail">TITLE3</div> <div class="clearFloatLeft"></div> </div> </div>  

サムネイルセット３のCSS部分 /*** thumbnails set 3 ***/ #thumbnails3 .thumbnail { border:3px solid #000; /* 枠線の色はデフォルトで黒となっています */ background-position:left top; background-color:#000; padding:160px 0 0 0; /* 160 = image height */ line-height:20px; height:0; margin:0 1px 20px 1px; text-align:center; }  

　サムネイルセット３は、セット２に似たエフェクトで枠線が追加されます。 スタイルシートで修正する部分はセット２と同様に一箇所で、paddingプロパティのtopだけサムネイル画像の縦幅分に指定します。

サムネイルセット３のスクリプト Uize.module ({ required: [ 'Uize.Node', 'Uize.Widget.Page', 'Uize.Widget.HoverFader' ], builder: function () { var page = window.page = new Uize.Widget.Page; page.addChild( 'thumbnailsHoverFader3', //ウィジェット名は自由に設定する Uize.Widget.HoverFader, { nodes:{root:'thumbnails3',className:/\bthumbnail\b/}, defaultStyle:{height:0,marginBottom:20,borderColor:'#000',color:'#000'}, hoverStyle:{height:20,marginBottom:0,borderColor:'#ffa200',color:'#fff'}, fadeIn:{duration:400,deceleration:1}, fadeOut:{duration:400,acceleration:1} } ); page.wireUi(); } });  

　　スクリプトで修正する箇所は、ウィジェット名（任意）以外に特にありません。タイトルの背景色と文字色、枠線の色は任意で 変更できるのでhoverStyleのbackgroundColorプロパティとcolorプロパティ、borderColorプロパティをそれぞれ好きな色に 変えてください。