コニファ・ロゴ

csstest:jQueryプラグインrotate3di.jsを使って、簡単に作るフリップアニメーション

フリップアニメーションを使う場合、CSS3で既述するのが一般的ですが、古めのブラウザにも対応させるとなると、CSS3だけでは難しいものがあります。そういうケースでは、javascriptを使ったほうが、比較的容易に実装できます。このjQueryプラグイン rotate3di.jsもその中の一つです。

パネルにマウスオーバーすると、立体的なアニメーションで裏返ります。マウスアウトすると、元に戻ります。設置は、「class="front"」(表側)を指定したdivと「class="back"」(裏側)を指定したdivを入れたliタグを並べています。

$(document).ready(function () {
    $('#nav-list-example li div.back').hide().css('left', 0);    
    function mySideChange(front) {
        if (front) {
            $(this).parent().find('div.front').show();
            $(this).parent().find('div.back').hide();           
        } else {
            $(this).parent().find('div.front').hide();
            $(this).parent().find('div.back').show();
        }
    }    
    $('#nav-list-example li').hover(
        function () {
            $(this).find('div').stop().rotate3Di('flip', 250, {direction: 'clockwise', sideChange: mySideChange});
        },
        function () {
            $(this).find('div').stop().rotate3Di('unflip', 500, {sideChange: mySideChange});
        }
    );
});

 

 

戻るボタン