[jQuery]マウスオーバー時に画像をフェードもしくはスライドさせ、テキスト表示する
[jQuery]マウスオーバー時に画像をフェードもしくはスライドさせ、テキスト表示する
概要
ポータルサイト作り替えのために色々と技術調査を行っております。
今回は、jQueryを利用して、マウスオーバー時に画像をフェードもしくはスライドさせ、テキスト表示する方法を実装してみました。
仕様・前提条件・備考
・(仕様)通常は、画像表示されており、マウスを画像に重ねると、ひとつの画像はフェードアウト、もうひとつの画像は右下にスライドします。画像に重ねたマウスを画像以外のところに移動させると元に戻ります。
・他にも色々な効果を設定することが出来るようですが、割愛します。
・jQueryについては筆者もこれから勉強するレベルです。
・HTML/CSSについても復習を兼ねております。こう書いたほうが良いよ！という指摘大歓迎です。
参考サイト
jQueryで画像にマウスオーバーした際見出しをスライド表示する | CSS Lecture
jQueryでマウスオーバー時に画像やテキストを透過させる – fctale
jQuery – Wikipedia
☆有難うございました。
コーディング(1)jQuery読み込み
・<head>〜</head>内に記述します。
・Googleの運用するCDNを利用します。
<script type=”text/javascript” src=”http://www.google.com/jsapi”></script>
<script type=”text/javascript”>google.load(“jquery”, “1”);</script>
コーディング(2)JavaScript記述
<script type=”text/javascript”>
$(document).ready(function(){
//マウスオーバー時に中央にスライド
$(‘.boxgrid.thecombo’).hover(function(){
$(“.cover”, this).stop().animate({top:’500px’, left:’500px’},{queue:false,duration:1000}); //マウスを画像に重ねた際に、画像が上から500px、左から500pxの位置に、1000msecかけて移動します。
}, function() {
$(“.cover”, this).stop().animate({top:’0px’, left:’0px’},{queue:false,duration:1000}); //マウスが画像から離れた際に、画像が上から0px、左から0pxの位置に(つまり元の位置に)、1000msecかけて戻ります。
});
//マウスオーバー時に画像をフェードさせ、テキスト表示する
$(‘.boxgrid.fade’).hover(function(){
$(“.cover”, this).fadeTo(1000,0.2);//マウスを画像に重ねた際に、1000msec(数値指定や”slow”、”normal”、”fast”の指定が可能)かけて、透明度0.2の状態に変化します。
}, function() {
$(“.cover”, this).fadeTo(“normal”,1.0); //マウスが画像から離れた際に、normalの時間(数値指定や”slow”、”normal”、”fast”の指定が可能)かけて、透明度1の状態に戻ります。
});
});
</script>
コーディング(3)HTML記述
<div class=”sample”<p>マウスオーバー時に画像がフェードする例</p>
<div class=”boxgrid fade cambodia”>
<a href=”http://diary.nakamurayuji.com/cambodia_vietnam_photo”><img src=”images/Cambodia.jpg” alt=”” class=”cover cambodia”>
<h3>マウスオーバー時に画像がフェード<BR>カンボジア・ベトナム旅行写真集</h3></a>
</div>
</div>
<div class=”sample”><p>マウスオーバー時に画像がスライドする例</p>
<div class=”boxgrid thecombo claptrap”>
<a href=”http://diary.nakamurayuji.com/cats-photo-of-claptrap”><img src=”images/claptrap.JPG” alt=”” class=”cover claptrap”>
<h3>マウスオーバー時に画像がスライド<BR>クラップトラップの猫写真集</h3></a>
</div>
</div>
コーディング(4)CSS記述
.boxgrid {
background: #161613;
margin: 0 10px 20px 0;
border: solid 5px #555;
overflow: hidden;
position: relative;
float:left;
}
.boxgrid img{
position: absolute;
top: 0;
left: 0;
}
.boxgrid h3 {
position:absolute;
font-size: 1.2em;
line-height:1.5em;
top:50%;
margin-top:-1.2em;
color:#FFF;
visibility:hidden; //マウスが画像から離れている時は、h3見出しは表示しない
}
.boxgrid:hover h3 {
position:absolute;
font-size: 1.2em;
line-height:1.5em;
top:50%;
margin-top:-1.2em;
color:#FFF;
visibility:visible; //マウスが画像に重なった時、h3見出しを表示する
}
.cambodia {//画像サイズ指定
width:512px;
height:288px;
}
.claptrap {//画像サイズ指定
width:500px;
height:500px;
}
結果のスクリーンショットと実装したサイトへのリンク
●結果のスクリーンショット
●実装したサイトへのリンク
マウスオーバー時に画像をフェードもしくはスライドさせ、テキスト表示するデモ
最後に、今後の展開
・ポータルサイトは画像のウエイトを高めようと思っておりますが、今回の投稿の技術によって少し実現の可能性が出てまいりました。
・以前紹介した、[Google Feed API]サイトのRSSフィードを取得し画像付きで記事の内容を表示すると組み合わせて使用しようと思っています。
