【jQuery】手前にズームインして拡散するアニメーション

animation

今度は、手前にズームイン(したかのように見える)エフェクトです。


デモ


▼下記の画像をクリックすると動作します。ズームイン!
wackworks logoh80px 【jQuery】手前にズームインして拡散するアニメーション


コード


html

/*何か画像*/
<img id="example" src="http://wakana.me/wp/wp-content/uploads/2013/02/wackworks_logoh80px.png" />

javascript

$(function(){
    $('img').click(function(){
    var pos = $(this).position();
    $(this)
        .css({
        position:'absolute',
        top : pos.top,
        left : pos.left
        })
        .animate({
        opacity : 'hide',//hideとか設定できたのを今日まで知らなかったっていう。
        width : $(this).width() * 5 ,
        height : $(this).height() * 5,
        top : pos.top -($(this).height() * 5 / 2),
        left : pos.left - ($(this).width() * 5 / 2)
        },
        'slow');
    });
});

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>