JavaScriptライブラリjQueryで、ちらみせエフェクト

過去2度、ちらみせJavaScriptを紹介しましたが、もっと簡単に実現してみましょう。
JavaScriptライブラリjQueryを使用したサンプルです。
via:Simple Page Peel Effect with jQuery & CSS
JavaScriptライブラリjQueryで、ちらみせエフェクトサンプル

使用方法
jQueryからjquery.jsをダウロードします。
また、めくる感じの画像を用意します。
こんな感じです。

これを以下あのように記述します。
<div id="pageflip">
<img src="page_flip.png" />
<div class="msg_block"></div> //ちらりと見せる要素
</div>

ちらりと見せる要素を後ろに置くためCSSで背景画像を指定します。
<style type="text/css">
img {border:none;}
#pageflip {position: absolute;right: 0; top: 0;} //右上にくっつけます
#pageflip .msg_block {width: 50px; height: 50px;overflow: hidden;
position: absolute;right: 0; top: 0;
background: url(画像パス) no-repeat right top;}
// ちらりと見せる要素に背景画像を指定
#pageflip img {width: 50px; height: 52px;
z-index: 99;position: absolute;right: 0; top: 0;} // ちらみせ要素の上にめくる画像がくるようにz-indexの数値を指定
</style>

最後に以下のようにJavaScriptを記述します。
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#pageflip").hover( //#pageflipにマウスオーバーしたら
function() {
$("#pageflip img , .msg_block").stop()
.animate({width: '307px', height: '319px'}, 500);} , //要素を動かします
function() { //マウスアウトしたら
$("#pageflip img").stop()
.animate({width: '50px', height: '52px'}, 220); //もとの大きさに戻します。
$(".msg_block").stop()
.animate({width: '50px' height: '50px'}, 200);
});
});
</script>

JavaScriptライブラリjQueryで、ちらみせエフェクトサンプル

sponsors

「JavaScriptライブラリjQueryで、ちらみせエフェクト」をシェアする

記事作成:
記事URL:

TOP > > > JavaScriptライブラリjQueryで、ちらみせエフェクト