풀페이지 만들기

스크롤이 될 섹션들을 만들어줍니다.

<div id="wrap">
    <section class="section" style="background:red;">section1</section>
    <section class="section" style="background:orange;">section2</section>
    <section class="section" style="background:yellow;">section3</section>
    <section class="section" style="background:green;">section4</section>
</div>

간단하게 스타일도 입혀줍니다.

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

#wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    background: gray;
}

#wrap .section {
    position: relative;
    width: 100%;
    height: 100%;
}

스크롤 이벤트를 이용하여 만들고 트윈맥스로 애니메이션을 주었습니다.

var sectionWrap = $('#wrap');
var section = $('.section');
var sectionLen = section.length;
var winHei = $(window).height();
var idx = 0;
var state = false;

section.css({'height': winHei});
section.on('mousewheel DOMMouseScroll', mouseWheel);

function mouseWheel(){

    if( state ) return;

    var delta = window.event.deltaY;
    var deltaFireFox = window.event.detail;

    ( delta > 0 || deltaFireFox > 0 ) ? idx++ : idx --;

    indexChk( idx );
}

function indexChk( $idx ){
    console.log( $idx, sectionLen )
    if( $idx < 0 ){
        idx = 0;
        return;
    }else if( $idx == sectionLen ){
        idx = sectionLen-1;
        return;
    }
	// 섹션의 처음이나 끝일 때는 이벤트 리턴
    state = true; // 스크롤 연속으로 했을때 빠르게 넘어가는 걸 막기위함
    showSection( $idx );

}

function showSection( $idx ){

    var posY = -( winHei * $idx );
    TweenMax.to( sectionWrap, 0.6, { top: posY, ease: Power4.easeInOut, onComplete:function(){
        state = false; // 애니메이션이 끝나면 다시 스크롤이 되도록 함
    } } );

}