画像が自動ドアのように分割してスライドanimate

マウスオーバーすると画像が自動ドアのように左右にスライドして背景を表示させます。

デモ

サンプルのhtml

<!--.box_containerサンプル-->
<div class='box_container'>
        <div class='images_holder'>
        <div class='image_div left'><img class='box_image' src='img/dammy.jpg' style='width:400px'/></div>
        <div class='image_div right'><img class='box_image' src='img/dammy.jpg' style='width:400px'/></div>
        <div class='clear'></div>
    </div>
<!--START THE TEXT-->
Dreamweaverが開いた。
<!--END THE TEXT-->
</div>

css

.box_container {
    position:relative;
/*画像のサイズ*/
    width:400px;
    height:320px;
    overflow:hidden;
/*開いたときの背景*/
    background:url(img/dw.jpg) no-repeat left top;
    color:white;
}
.images_holder{
    position:absolute;
}
.image_div {
    position:relative;
    overflow:hidden;
    width:50%;
    float:left;
}
.right img{
    margin-left: -100%;
}
.clear{
    clear:both;
}

javascript

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

jQueryを読み込んで
下のスクリプトを書きます。

<script type="text/javascript">
$(document).ready(function() {

//.box_container
    $('.box_container').hover(function(){
        var width = $(this).outerWidth() / 2;
        $(this).find('.left').animate({ right : 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>

jQuery Easing.jsも読み込むとeasing効果も追加できます。

サンプル２のjavascript

<script type="text/javascript">
$(document).ready(function() {
//easing.jsを使用↓
    $('.box_container').hover(function(){
    var width = $(this).outerWidth() / 2;
    $(this).find('.left').animate({ right : width },{easing: 'easeOutBounce', queue:false,duration:1000});
    $(this).find('.right').animate({ left : width },{easing: 'easeOutBounce', queue:false,duration:1000});
    }, function(){
    $(this).find('.left').animate({ right : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
    $(this).find('.right').animate({ left : 0 },{easing: 'easeOutBounce',queue:false,duration:1000});
    });
});
</script>

サンプル３のjavascript

<script type="text/javascript">
$(document).ready(function() {
//easing.jsを使用↓    
    $('.box_container').hover(function(){
    var width = $(this).outerWidth() / 2;
    $(this).find('.left').animate({ right : width },{easing: 'easeOutCirc', queue:false,duration:1100});
    $(this).find('.right').animate({ left : width },{easing: 'easeOutCirc', queue:false,duration:1100});
    }, function(){
    $(this).find('.left').animate({ right : 0 },{easing: 'easeOutCirc',queue:false,duration:1100});
    $(this).find('.right').animate({ left : 0 },{easing: 'easeOutCirc',queue:false,duration:1100});
    });
});
</script>

Image splitting effect with CSS and JQuery

Google曰く、関連すると思われる広告