스크롤을 내리면 변화하는 웹페이지 만들기

Nov 04, 2017 by zzolain

웹 서핑을 하다보면 스크롤을 올렸다 내렸다하는 동작에 따라 변화하는 웹페이지를 심심치 않게 발견할 수 있습니다.

특히 제가 좋아하는 사이트 중 하나인 Apple 홈페이지의 제품 설명 페이지는 이런 효과가 잘 나타나 있지요.

최근 출시한 아이폰X의 소개 페이지 또한 마찬가지로 스크롤 변화에 따라 멋진 화면이 나타납니다!

300

저도 이런 작품을 아무렇지도 않게 만들고 싶습니다~~“그냥 뭐, 심심해서 만들어봤어~”~~ .

비록 이런 것은 아니지만 스크롤을 내려 본문을 읽을 때 변화하여 본문 가독성과 페이지 사용성을 높일 수 있는 메뉴를 만들고 싶었고, 부족하지만 구상했던 형태를 어느 정도 구현한 것이 현재의 메뉴 모습입니다.

오늘은 이를 만드는 방법에 대한 기록을 남겨보려 합니다.

아래는 현제 제 블로그 메뉴의 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는 웹페이지를 개발하는 개발자들에게는 종이에 그림을 그리는 연필과 지우개와 같이 꼭 필요한 도구가 아닐까라는 생각을 해봅니다. 정말 강력한 무기 같은 것이지요. 필히 익히고 아껴야겠다는 생각이듭니다. :)

이번 글도 읽어주셔서 감사하고,

다시 저는 연필을 깎고 그림을 그리도록 하겠습니다!

#Dev #JavaScript #jQuery

<< 목록