スクロールしたら画像が下からふぉあ〜んと出てくる効果を

参考にさせて頂いたサイトです

• DESIGNED & DEVELOPED by FREEHTML5.co
• Skeleton

効果を出すためのJavaScrptやCSS、レスポンシブデザインに対応するためにコードを使わせていただいたり、参考にさせていただいています。
ありがとうございます。

きっかけ

ブラウザを上にスクロールしたら下から出てくる画像やコンテンツなどが、ふぉあ〜ん、ふぉあ〜んと出てくる効果が面白いな〜、試しに作ってみたいなーと漠然と思っていたのですが、ちょっと機会があり勉強のために作ってみました。

まだ解析途中で（僕にはとても難しい・・・）すが、なんとかふぉあ〜んの効果が出来るようになりました。

Demo

Demoサイト

ダウンロード

copy_of_render

コードなど(抜粋)

Javascript

メニューが一番上に来たら固定にする処理も入っています。（navFix()）

;(function () {
    // Animations

    var contentWayPoint = function() {
        var i = 0;
        $('.animate-box').waypoint( function( direction ) {

            if( direction === 'down' && !$(this.element).hasClass('animated') ) {
                
                i++;

                $(this.element).addClass('item-animate');
                setTimeout(function(){

                    $('body .animate-box.item-animate').each(function(k){
                        var el = $(this);
                        setTimeout( function () {
                            el.addClass('fadeInUp animated');
                            el.removeClass('item-animate');
                        },  k * 200, 'easeInOutExpo' );
                    });
                    
                }, 100);
                
            }

        } , { offset: '85%' } );
    };
    
  var navFix = function() {
        $('#nav').waypoint( function() {  
            $('body #nav').removeClass('nav_init')
          $('body #nav').addClass('nav_fix')
        }, { offset: 0 } );
        $('#nav').waypoint( function() {  
          $('body #nav').removeClass('nav_fix')
            $('body #nav').addClass('nav_init')
        }, { offset: 1 } );
  };

    // Document on load.
    $(function(){

        contentWayPoint();
        navFix();

    });


}());

CSS

animate.cssが必要です。

あと以下のコードが意外と大切だった。

.animate-box {
  opacity: 0;
}

• animate-boxでクラスを定義してある要素を初めは透明にしておく
• offset: ‘85%’　上から見て85%の位置に来たらJavascriptの処理が実行される

こういう流れなのかな。

関連記事:

Flashのように文字を繰り返し表示、jQueryで Nivo Sliderのスライドショー（jQueryプラグイン） Tumblrでリブログした画像をブラウザ一杯に敷き詰めてみる