image

Create a Stunning Sliding Door Effect with jQuery

jQueryとjQuery Easing.jsを使っています。
マウスオーバーで画像が4つに割れて背景が表示されます。

Create a Stunning Sliding Door Effect with jQuery

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

デモ

サンプルの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

フォーカスしていない要素の透明度を変える。

上記サンプルのhtmlは、

<ul class="fade">
<li><a href="#"><img src="img/01.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/02.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/03.jpg" alt="" /></a></li>
<li><a href="#"><img src="img/04.jpg" alt="" /></a></li>
</ul>

普通に画像を並べる。

ここでは、クラス名 fadeをつけました。

あとは、jQueryを読み込み

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

<script type="text/javascript">
$(document).ready(function() {
 $('.fade').children().hover(function() {
 $(this).siblings().stop().fadeTo(500,0.5);
 }, function() {
 $(this).siblings().stop().fadeTo(500,1);
 });
});
</script>

このように書くと、上記サンプルのようにフォーカスされていない要素の透明度が変わります。
fadeTo(ミリ秒,透明度);
なので、数値を変えると変化する秒数、透明度を変えることが出来ます。

mootoolsを使ったイメージギャラリーmooflow

MooFlow

クリックするとフリップが反転する

rotate3Di – Flip HTML content in 3D

サムネイルの表示・自動スライド・next and prev・説明文の表示などcoolなスライドショー

mb.ideas

AnythingSlider

↑デモ

AnythingSlider

（追記しました）背景リピートについて

IE6でPNG画像を表示させると

PNG画像の透過部分がグレーに表示されてしまいます。
で、そんなときは、IE PNG Fixとかを使っていますが、
最近、jQueryを使う機会が多いので、どうせならjQueryを使う方法はないかと探していたらありました。

[htmlで画像表示サンプル]

<img src="img/png-hand.png" width="150" height="150" alt="png-hand" />

[cssで背景画像として表示サンプル]

<div style="background:url(img/png-hand.png) no-repeat;height:150px;width:150px;">
pngの背景画像です。<br />サンプル画像が気持ち悪くてスイマセン。。。
</div>

How To Use

jQuery.png.fix.jsのサイトから
jquery.pngFix.jsをダウンロード

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

のようにjsファイルを読み込み。

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

document readyを書いて読み込みが終わったらすぐpngfixを作動させると。
これだけでIE6でもpngが透過されます。

（追記）IE6で背景としてpng画像をリピートさせると画像が1つ拡大されて表示された。で、IE PNG Fix以外で他の方法を追記しました。
「png IE6でも背景画像をリピートできる　DD_belatedPNG」

Sliding door effect with JQuery

デモ

ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Sliding door effect - TutsValley.com - DEMO</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.box_container').hover(function(){
var distance = $(this).outerWidth();
$(this).find('.box_image').animate({ left : distance },{queue:false,duration:300});
}, function(){
$(this).find('.box_image').animate({ left : '0px' },{queue:false,duration:300});
});

$('.box_container2').hover(function(){
var distance = $(this).outerWidth();
$(this).find('.box_image2').animate({ left : '-'+distance },{queue:false,duration:300});
}, function(){
$(this).find('.box_image2').animate({ left : '0px' },{queue:false,duration:300});
});

$('.box_container3').hover(function(){
var distance = $(this).outerHeight();
$(this).find('.box_image3').animate({ top : distance },{queue:false,duration:300});
}, function(){
$(this).find('.box_image3').animate({ top : '0px' },{queue:false,duration:300});
});

$('.box_container4').hover(function(){
var distance = $(this).outerWidth();
$(this).find('.box_image4').animate({ top : '-' + distance },{queue:false,duration:300});
}, function(){
$(this).find('.box_image4').animate({ top : '0px' },{queue:false,duration:300});
});
});
</script>
<style>
.box_container{position:relative; width:300px; overflow:hidden; height:220px; background: black; color:white;}
.box_image{ position:absolute; }
.box_info { margin:10px; font-family: 'Georgia'; font-weight: bold; }

.box_container2{position:relative; width:300px; overflow:hidden; height:220px; background: black; color:white;}
.box_image2{ position:absolute; }
.box_info2 { margin:10px; font-family: 'Georgia'; font-weight: bold; }

.box_container3{position:relative; width:300px; overflow:hidden; height:220px; background: black; color:white;}
.box_image3{ position:absolute; }
.box_info3 { margin:10px; font-family: 'Georgia'; font-weight: bold; }

.box_container4{position:relative; width:300px; overflow:hidden; height:220px; background: black; color:white;}
.box_image4{ position:absolute; }
.box_info4 { margin:10px; font-family: 'Georgia'; font-weight: bold; }

</style>
</head>
<body>
<h2>Sliding door effect - TutsValley.com - DEMO</h2>
<h4>Hover over the images to see the effect.</h4>
<br />
<h2>Slide Right</h2>
<div class='box_container'>
<img class='box_image' src='img.jpg' style='width:300px'/>
Effect from the tutorial

</div>

<h2>Slide Left</h2>
<div class='box_container2'>
<img class='box_image2' src='img.jpg' style='width:300px'/>
<p>This effect is made by changing the inside of the animate function in JQuery.</p>
<p><b>animate({ left : '-'+distance }</b></p>
<p>Just making it into negative number, everything else is same as the normal effect.</p>
</div>

<h2>Slide Down</h2>
<div class='box_container3'>
<img class='box_image3' src='img.jpg' style='width:300px'/>
<p>This is effect is made slightly different then in the tutorial.</p>
<p><b>var distance = $(this).outerHeight();</b><br />and<br />
<b>animate({ top : distance }</b></p>
<p>As you can see, the distance variable is now the height of the div instead of it's width.</p>
</div>

<h2>Slide Up</h2>
<div class='box_container4'>
<img class='box_image4' src='img.jpg' style='width:300px'/>
<p>This is effect is made slightly different then in the tutorial.</p>
<p><b>var distance = $(this).outerHeight();</b><br />and<br />
<b>animate({ top : '-' + distance }</b></p>
<p>Same as sliding down effect, but we are making it into a negative number.</p>
</div>

</body>
</html>

Sliding door effect with JQuery

画像にタイトルとキャプションを表示させます

Create a Thumbnail Gallery with Slick Heading and Caption Effect with jQuery