jQueryで自動ドアが開くような表示をさせるJavaScript「Image splitting effect with CSS and JQuery」

画像の見せ方にはいろいろあります。
Image splitting effect with CSS and JQueryでは、マウスオーバーすると画像が中央から左右に分かれて開くようなチュートリアルを紹介しています。
自動ドアが開くように表示することでユーザーに驚きを与えられるかもしれません。

使用方法

jQueryからjquery.jsをダウンロードします。


<script type="text/javascript" src="jquery-1.3.2.js"></script>

まずjqueryを読み込んだら以下のような記述をします。


<div class="box_container">
        <div class="images_holder">
            <div class="image_div left"><img class="box_image" src="画像パス"/></div>
            <div class="image_div right"><img class="box_image" src="画像パス"/></div>
            <div class="clear"></div>
        </div>
            <p>開いたときに表示されるコンテンツ</p>
</div>

ここで記述する画像はどちらも同じ画像を使用することがこのチュートリアルのポイントです。
次はCSSです。


.box_container{
    position:relative;
    width:300px;
    height:220px;
    overflow:hidden;
    background: black;
    color:white;
}
.images_holder{
    position:absolute;
}
.image_div {
    position:relative;
    overflow:hidden;
    width:50%;  //半分だけ見えるようにしています
    float:left; //2つの左右に並べています
}
.right img{
    margin-left: -100%; //左半分を見えなくしています
}
.clear{
    clear:both;   
}

上記のように書くと2つの画像が1枚の画像のように表示されます。
仕上げにJSを記述します。


<script type="text/javascript">
$(document).ready(function() {
     $('.box_container').hover(function(){ //box_containerにマウスを乗せた時
            var width = $(this).outerWidth() / 2; //box_containerの幅を取って半分にします
            $(this).find('.left').animate(  //class="left"にアニメーションを与えます
            	{right : width}, //上記で取ってきた半分のwidth分ずらします
            	{queue:false,duration:300});
            $(this).find('.right').animate( //上記の右側の処理です。
            	{ left : width },
            	{queue:false,duration:300});
        }, function(){  //マウスアウトの処理でオン時にずらした分を戻します
            $(this).find('.left').animate({ right : 0 },{queue:false,duration:300});
            $(this).find('.right').animate({ left : 0 },{queue:false,duration:300});
        });             
  });
</script>

ものすごく難しいことをやっているわけでもないのに、アイディアで印象的にしています。

サンプル

うぃーん

Javascriptサンプルページ一覧

skuare.net