13. [jQuery] Scroll Animation

이번 포스팅에서는 스크롤 애니메이션에 대해서 배워보도록 하겠습니다. 

 

오늘의 Target

스크롤 이전에는 최상단의 navbar 를 웹사이트의 대문과 색을 동일하게 유지한다. 

스크롤 이후에는 최상단의 navbar 를 회색의 배경에 글씨를 검은색으로 만들어주고 오른쪽에 위치한 Our Products의 font-size 를 줄여준다. 

 

[스크롤 이전]

[스크롤 이후] 

 

애니메이션 제작 방법

1. CSS로 애니메이션 동작 이전의 화면을 미리 제작한다. 

2. CSS로 애니메이션 동작 이후의 화면을 미리 제작한다. 

3. CSS로 transition : all 1s; 로 변경할 때 몇 초에 걸려서 변경할 지 설정한다. 

4. 자바스크립트 혹은 제이쿼리로 언제 변경할 지 변경point(Trigger) 를 설정한다. 

 

 

HTML

   <!--   스크롤 내리면 nav-scroll 클래스 추가 -->
    <div class='nav-menu'>
        <h4 style='margin:0'>Fashion Mall</h4>
        <p style='flex-grow: 1'></p>
        <a id='show-nav'>Our Products</a>
    </div>

 

1. 동작 이전의 화면을 미리 제작 & 3. transition : all 1s; 

CSS .nav-menu

 

▷ background-color : transparent 

: navbar의 색깔을 투명한 색깔로 하여 점보트론의 배경과 동일하게 한다. 

 

▷ position: fixed;

: 페이지의 상단에 navbar를 fix하여 user 가 스크롤 함과 상관 없이 위치를 유지시켜 준다. 

 

▷ z-index : 3;

: position 속성을 사용할 때 겹친다면 어떤 것을 상위로 올릴지 결정하는 속성, 값이 클 수록 위로 올라온다. 

 

▷ transition : all 0.5s;

:  변경 이전의 화면에서 변경 이후의 화면으로 넘어 갈 때 0.5 초에 걸쳐서 변경해주는 속성

 

.nav-menu {
	/*UI요소들*/
    width : 100%;
    display: flex;
    align-items: center;
    padding : 15px;
    cursor: pointer;
    
    /*변화 이전의 애니메이션 화면*/
    background-color: transparent; /*transparent : 투명한*/
    position: fixed;
    color : #eee; 
    z-index : 3; 
    transition : all 0.5s;
}

 

2. 동작 이후의 화면을 미리 제작

CSS .nav-scroll

: 이 클래스를 스크롤 될 때 nav-menu 클래스에 추가해주면 되겠죠?!

.nav-scroll {
    background-color: #f6f6f6;
    color : rgba(0,0,0,0.7);
    font-size : 5px;
}

 

4. 제이쿼리로 언제 변경할 지 변경point(Trigger) 를 설정

 

▷ scroll 을 하여 상위로 부터 90px 이상일 때는 애니메이션 이후 클래스('nav-scroll')을 추가해줍니다. 

▷ 다시 올렸을 때 ( 90px 이하 ) 일 때는 애니메이션 이후 클래스를 다시 제거해 줍니다. 

$(window).on('scroll', function() {
	if ($(window).scrollTop() > 90) { // 마우스 기준 한번 스크롤 하니까 scroll 값이 90이 나옴
		$('.nav-menu').addClass('nav-scroll');
	} else if ($(window).scrollTop() < 90) {
		$('.nav-menu').removeClass('nav-scroll');
	}
});

 

스크롤을 활용하여 애니메이션을 주기 위해서는 몇 가지 알아야 하는 개념들이 있습니다. 

 

 

1. $(window).on('scroll', function(){})

스크롤을 할 때 이벤트를 어떻게 캐치해야 할까요?

☞ $(window).on('scroll', function(){}) 를 사용 하면 됩니다. 

window 는 viewport를 의미합니다. 

예시를 통해서 알아봅시다. 다음의 코드는 viewport가 scroll 되었을 때 콘솔 창에서 '스크롤 중입니다' 를 출력하는 코드입니다. 

$(window).on('scroll', function() {
	console.log('스크롤중입니다');
})

스크롤 할 때 마다 문장을 출력합니다.

 

 

2. $(window).scrollTop()

스크롤 될 때 유저가 스크롤을 상위로 부터 몇 px 내렸는지 알려주는 메서드입니다.

콘솔 창에는 px단위는 나오지 않습니다. 

$(window).on('scroll', function() {
            console.log($(window).scrollTop());
})