[jQuery] 풀페이지 스크롤 애니메이션

안녕하세요. 오늘은 풀페이지 스크롤 이벤트 소스를 공유해드리겠습니다.

fullPage.js를 통해 간단하게 구현이 가능하지만, 유료 라이센스입니다.

그럼 fullPage.js를 대체할 소스를 알려드리겠습니다.

 

 

[HTML]

<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>

 

[CSS]

 div {
	position: relative;
	height: 100vh;
	width: 100%;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
    }
div:nth-child(1){background: red}
div:nth-child(2){background: yellow}
div:nth-child(3){background: green}
div:nth-child(4){background: #ddd}

 

[JS]

$(function() {
            var divs = $('div');
            var div = 0;
            div = -1
            divs.each(function(i) {
                if (div < 0 && ($(this).offset().top >= $(window).scrollTop())) {
                    div = i;
                }
            });
            $(window).on('mousewheel DOMMouseScroll', function(e) {
                if (e.originalEvent.wheelDelta > 0 || e.originalEvent.detail < 0) {
                    if (div > 0) {
                        div--;
                    }
                } else {
                    if (div < divs.length) {
                        div++;
                    }
                }
                $('html,body').stop().animate({
                    scrollTop: divs.eq(div).offset().top
                }, 200);
                return false;
            });
            $(window).resize(function() {
                $('html,body').scrollTop(divs.eq(div).offset().top);
            });

        });

 

-참조

https://codepen.io/furkanyanbas/pen/VeQmNQ