animation

Making a 3D Engine in jQuery

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

↑サンプル

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

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

rotate3Di – Flip HTML content in 3D

Sexy Opacity Animation with MooTools or jQuery

マウスオーバーしたときに要素の背景色の透明度がアニメーションで変わります。
Sexy Opacity Animation with MooTools or jQuery

スムーズにスクロールさせるjsはいろいろありますが、この jQuery Scroll to Top Controlは、スクロールしてページの上部へ戻る位置まで下にスクロールさせたとき、ページ上部へ戻るボタンが出てきます。

デモ

jQuery Scroll to Top Control