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

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

効果を出すための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の処理が実行される

こういう流れなのかな。

鹿児島県の出水市という所に住んでいまして、インターネット周辺で色々活動して行きたいと思ってるところです。 Webサイト作ったり、サーバ設定したり、プログラムしたりしている、釣りと木工好きなMacユーザです。 今はデータサイエンスに興味を持って競馬AI予想を頑張ってます。

コメントを残す

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


The reCAPTCHA verification period has expired. Please reload the page.

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください