[ プログラミング ] 画像をふんわりフェードしながら表示させるjQueryプラグイン

最近は、アニメーションがたくさん使われているWebサイトも色々とありますね。

今回は、画像をふんわり縦方向にスライドしつつフェードしながら表示させる方法をご紹介します。

デモは以下からどうぞ。

DOMO

HTML5でコーティングしています。jQueryもCSSもHTMLのheadタグ内に書いています。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ふんわり表示</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(function(){
    $.fn.fade = function(options) {
        // オプション
        var defaults = {
            delayTime         : 600,
            animationTime     : 800,
            animationDistance : 15,
            positionMargin    : 200
        };
        var o = $.extend(defaults, options);

            $(this).each(function(){
                var $ele = $(this);
                var eleHeight = $ele.find('li').height() + o.animationDistance;
                $ele.css('height' , eleHeight + 'px');
                $ele.find('li').css({ marginTop: 0, opacity: 0 });
                $(window).on('load scroll', function(){
                    var position =$ele.offset().top + o.positionMargin;
                    var scrollBottom = $(window).scrollTop() + $(window).height();
                    if (scrollBottom > position) {
                        $ele.find('li').each(function(i){
                            $(this).delay(i * o.delayTime).animate({ marginTop: o.animationDistance, opacity: 1 }, o.animationTime);
                        });
                    }
                });
        });
    };
});
$(function(){
    $('.pickup').fade({delayTime : 500, animationTime : 1000, animationDistance : 30, positionMargin : 300});
})
</script>
<style type="text/css">
body {
    text-align:center;
}

.pickup {
    clear:both;
    width:1000px;
    margin:0 auto;
    padding:0;
}

.pickup li {
    float:left;
    margin:0 50px 0 0;
    padding:0;
    list-style:none;
}

.pickup li:last-child {
    margin-right:0;
}
</style>
</head>
<body>
<ol class="pickup">
    <li><a href="index.html"><img src="images/photo01.jpg" alt="" width="300" height="300"></a></li>
    <li><a href="index.html"><img src="images/photo02.jpg" alt="" width="300" height="300"></a></li>
    <li><a href="index.html"><img src="images/photo03.jpg" alt="" width="300" height="300"></a></li>
</ol>
<br style="clear:both;" />
↓<br>
<br>
・・・
↓<br>
<br>
<ol class="pickup">
    <li><a href="index.html"><img src="images/photo01.jpg" alt="" width="300" height="300"></a></li>
    <li><a href="index.html"><img src="images/photo02.jpg" alt="" width="300" height="300"></a></li>
    <li><a href="index.html"><img src="images/photo03.jpg" alt="" width="300" height="300"></a></li>
</ol>
<p>
photo by <a href="http://www.pakutaso.com/">写真素材・商用無料(フリー)ぱくたそ/PAKUTASO</a>
</p>
</body>
</html>

オプションで、『各要素が表示される間隔(delayTime)』、『アニメーションの時間(animationTime)』、『スライドする距離(animationDistance)』、『表示位置の補正(positionMargin)』が選べます。

表示位置の補正(positionMargin)』というのは何なのかと説明いたしますと、スクロールして、アニメーションをしたい要素の位置にきたら、アニメーションを開始してフェードインしながら表示する、という方法をとっています。そのため、要素が完全に表示される前にアニメーションが始まってしまうのを防ぐために、ある程度マージンを取っています。このマージン分を『positionMargin』というオプションで指定します。少なくとも要素の高さ以上のマージンを取ると、きれいにアニメーションが開始されると思います。

あと、CSSのmargin-topを動的に変化させているため、次の要素がそれに合わせてずれながら表示されてしまいます。それを防ぐために、要素の高さを『animationDistance』分も足した高さにしております。