animation Archive

Making a 3D Engine in jQuery

jQuery Plugin – Feature List

ページがめくれるような効果をつける

↑サンプル

jQuery Plugin – Page Peel

画面を上下にスクロールさせるときにメニューも一緒についてくるフローティングメニュー(floating menu)

↑デモ

導入方法

続きはこちら

残像を残してスクロール　jQuery Effect Spectrum
要素から要素へ移動させるときに、四角の残像を残して移動する。
移動先がわかりやすくていいです。

jQuery Effect Spectrum

ページ下のタブにマウスオーバーするとdockがでてきます。

jQuery Dock Menu Tutorial Revisit – Dock at Bottom

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