스크롤을 내리면 변화하는 웹페이지 만들기
웹 서핑을 하다보면 스크롤을 올렸다 내렸다하는 동작에 따라 변화하는 웹페이지를 심심치 않게 발견할 수 있습니다.
특히 제가 좋아하는 사이트 중 하나인 Apple 홈페이지의 제품 설명 페이지는 이런 효과가 잘 나타나 있지요.
최근 출시한 아이폰X의 소개 페이지 또한 마찬가지로 스크롤 변화에 따라 멋진 화면이 나타납니다!
저도 이런 작품을 아무렇지도 않게 만들고 싶습니다
“그냥 뭐, 심심해서 만들어봤어~”.
비록 이런 것은 아니지만 스크롤을 내려 본문을 읽을 때 변화하여 본문 가독성과 페이지 사용성을 높일 수 있는 메뉴를 만들고 싶었고, 부족하지만 구상했던 형태를 어느 정도 구현한 것이 현재의 메뉴 모습입니다.
오늘은 이를 만드는 방법에 대한 기록을 남겨보려 합니다.
아래는 현제 제 블로그 메뉴의 JavaScript 코드입니다. jQuery를 이용한 것인데, jQuery는 DOM
요소나 브라우저를 제어하기 위해 자주 사용하거나 유용한 기능을 가진 JavaScript 함수를 미리 만들어 두어, 보다 쉽고 간편하게 함수를 사용할 수 있게 해주는 JavaScript Library입니다. 일종의 특별 함수 모음집이지요.
$
는 jQuery
의 약어 입니다. jQuery
를 사용하겠다고 선언하는 것이지요.
$
다음에 선택할 DOM 요소
나 클래스, 혹은 id 이름을 적고 그 뒤에 실행할 jQuery
함수를 적는 것이 기본 jQuery
사용법입니다.
클래스나 아이디 이름은 제 임의로 적은 것이며, 코드 이해를 돕기 위해 적어두었습니다.
$( document ).ready( function() { $( window ).scroll( function() { if ( $( this ).scrollTop() > 45 ) { $( '.menu__column-center' ).addClass('menu__logo-on'); $('#main-title').html('<i class="fa fa-hand-o-up fa-lg" aria-hidden="true"></i>'); $('.menu__column-left').addClass('menu__column-on'); $('.menu__column-right').addClass('menu__column-on'); } else { $( '.menu__column-center' ).removeClass('menu__logo-on'); $('.menu__column-left').removeClass('menu__column-on'); $('.menu__column-right').removeClass('menu__column-on'); $('#main-title').text("Zzolain's deV-log"); } } ); $( '.menu__column-center' ).click( function() { $( 'html, body' ).animate( { scrollTop : 0 }, 300 ); return false; } );} );
내용을 하나 하나 살펴보자면,
$(document).ready()
: 함수가 언제부터 실행 준비를 하고 있을 것인지를 정의합니다. 선택자를 입력하는$
다음 란, 즉(
와)
사이에document
를 입력했으니, 문서 로딩이 되었을 때 부터 이 함수를 준비시킨다는 뜻의 코드가 됩니다.$(window).scroll()
: 웹 브라우저에서 사용자가 스크롤을 사용했는지 여부를 확인합니다. 만약 스크롤을 사용한다면, 함수에 선언된 내용을 실행합니다.if ( $(this).scrollTop() > 45 )
:scrollTop()
함수는 현재 스크롤이 상단에서 얼마나 떨어져 있는지를 측정합니다.if
조건문 조건에scrollTtop() > 45
를 입력했으니 해당 조건문은 스크롤이 상단에서부터 45px을 벗어났는지 여부를 확인합니다. 벗어났다면 이후에 적인 내용을 실행하고 그렇지 않다면,else
이후에 적힌 내용을 실행합니다.$( '.menu__column-center' ).addClass('menu__logo-on')
:menu__column-center
라는 클래스를 가진 요소에menu__logo-on
이라는 클래스를 추가합니다.menu_logo-on
과 같이 원하시는 클래스 이름을 미리 선언해 두시고 그 클래스에 변화했으면 하는 속성과 값들을 선언해두시면 됩니다.저는 배경색과 글씨색, 마우스 커서 모양이 바뀌도록 아래와 같은 속성과 값들을 선언했습니다.
.menu__logo-on {background-color: #4BA2AC;color: white;cursor: pointer;}
$('#main-title').html('<i class="fa fa-hand-o-up fa-lg" aria-hidden="true"></i>')
:main-title
이라는 id를 가진 요소의 태그 내용을<i ...></i>
로 바꿉니다.저는 ‘zzolain’s dev-log’라는 텍스트를 awesome font 아이콘으로 바꾸고 싶어 해당 함수를 사용했습니다.
$( '.menu__column-center' ).removeClass('menu__logo-on')
:menu__column-center
라는 클래스를 가진 요소에서menu__logo-on
라는 클래스를 삭제합니다. 45px을 벗어나지 않았을 때, 혹은 다시 스크롤이 상단으로 올라갔을 때 추가한 클래스를 제거함으로써, 메뉴를 원래 모습으로 복원시키기 위한 것입니다.
$( '.menu__column-center' ).click( )
:menu__column-center
라는 클래스를 가진 요소를 클릭했을 때 하위 내용이 실행되는 함수입니다.$( 'html, body' ).animate( { scrollTop : 0 }, 300 )
: 스크롤 위치를 상단에서 0px이 되는 지점으로 300ms에 걸쳐 바꿉니다(1000ms = 1초).
제가 사용한 것은 몇 가지 되지 않는 함수들이지만 이들만이라도 잘 활용하면 꽤나 많은 효과들을 만들 수 있겠다는 생각이 들었습니다.
jQuery와 CSS는 웹페이지를 개발하는 개발자들에게는 종이에 그림을 그리는 연필과 지우개와 같이 꼭 필요한 도구가 아닐까라는 생각을 해봅니다. 정말 강력한 무기 같은 것이지요. 필히 익히고 아껴야겠다는 생각이듭니다. :)
이번 글도 읽어주셔서 감사하고,
다시 저는 연필을 깎고 그림을 그리도록 하겠습니다!