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

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

効果を出すための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();

    });


}());

;(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 {

opacity: 0;

}

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

こういう流れなのかな。

月	火	水	木	金	土	日
« 1月				3月 »
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28

サイバーまめカン鹿児島の出水市でプログラミングしてる人のブログ

MacとSwift, Ruby, Pythonと温い日常。Linuxも少々。