3-2. Parallax Scrolling 기법 (With JS) - 이론

Shy·2023년 7월 29일

HTML, CSS, JS

목록 보기
14/14

Event

"시스템에서 일어나는 사건 또는 발생"으로 다음과 같은 요소들이 있다.

  • 클릭
  • 마우스 누르기
  • 마우스 떼기
  • 키보드 누르기
  • 키보드 키 떼기
  • 창의 크기를 조정
  • form이 제출되거나
  • 비디오가 재생됨
  • 멈추기
  • 스크롤을 하기

이벤트가 발생하면, EventListener가 발생했을 때, 그에 반응한다.

Event Listener

이벤트 리스너(Event Listener)는 웹 페이지에서 특정 이벤트(클릭, 키보드 입력, 페이지 로드 등)가 발생했을 때 그에 반응하는 코드다. 이벤트 리스너는 이벤트가 발생할 때마다 호출되는 함수 또는 메소드를 설정하는데 사용되며, JavaScript를 사용하여 웹 페이지의 동적 행동을 제어하는 데 필수적인 도구다.

JavaScript에서는 addEventListener 메소드를 사용하여 이벤트 리스너를 설정할 수 있다. 이 메소드는 첫 번째 인자로 이벤트의 유형(예: 'click', 'mouseover' 등)을, 두 번째 인자로 이벤트가 발생했을 때 호출되는 함수(이벤트 핸들러)를 받는다.

예를 들어, 사용자가 버튼을 클릭했을 때 메시지를 출력하는 이벤트 리스너를 설정하는 코드는 다음과 같을 수 있다:

document.querySelector('button').addEventListener('click', function() {
  console.log('버튼이 클릭되었습니다!');
});

위의 코드는 'button' 요소를 선택하고, 'click' 이벤트가 발생할 때마다 콘솔에 메시지를 출력하는 이벤트 리스너를 설정한다.

또한, 'removeEventListener' 메소드를 사용하여 이벤트 리스너를 제거할 수도 있다. 이는 같은 이벤트와 이벤트 핸들러를 가진 'addEventListener' 호출과 짝을 이루어야 한다. 이렇게 하면 특정 조건이 충족될 때 이벤트 리스너를 중지시킬 수 있다.

JavaScript Window Object

브라우저의 윈두우 또는 탭에 관련된 정보를 담고 있는 전역 객체

window.document//앞서 배운 document와 동일하게 사용
window.history//브라우저의 세션 기록을 조작할 때 사용
	history.back()//뒤로 가기

window.open()//새창, 탭을 엶
window.close() //현재 창이나 탭 닫음

window.scrollX //수평으로 얼마나 스크롤 됐는지 픽셀 단위 반환
window.scrollY //수직으로 얼마나 스크롤 됐는지 픽셀 단위 반환

자바스크립트의 Window 객체는 웹 브라우저 창에 대응하는 객체로서, 웹 페이지의 전역 객체 역할을 한다. 이 말은, 모든 전역 변수, 함수 등이 실제로는 Window 객체의 속성이거나 메소드라는 것을 의미한다.

Window 객체는 웹 페이지 자체를 제어하거나, 웹 페이지에 대한 정보를 가져오는데 사용되는 다양한 메소드와 속성을 제공합니다. 아래는 그 중 일부에 대한 설명이다

  1. Document 객체에 대한 접근: Window 객체의 가장 중요한 속성 중 하나는 Document 객체에 대한 참조를 제공하는 document 속성이다. 이를 통해 웹 페이지의 DOM에 접근하고 조작할 수 있다.
  2. 타이머 메소드: setTimeout 및 setInterval 메소드를 사용하여 코드를 특정 시간 후에 실행하거나 주기적으로 실행할 수 있다.
  3. 창 제어 메소드: open 메소드로 새 창을 열거나, close 메소드로 창을 닫을 수 있다. resizeTo 또는 moveTo 메소드를 사용하여 창의 크기를 조절하거나 위치를 이동시킬 수도 있다.
  4. 창 정보: 브라우저 창의 위치, 크기, 스크롤 위치 등에 대한 정보를 제공하는 속성들이 있다.
  5. 이벤트 핸들러: Window 객체는 여러 가지 이벤트에 대한 핸들러를 가지고 있다. 예를 들어, onload 핸들러는 웹 페이지가 완전히 로드되었을 때 호출되는 함수를 설정한다.
  6. 브라우저 정보: 사용자의 브라우저와 운영 체제에 대한 정보를 제공하는 navigator 객체, URL에 대한 정보와 조작을 위한 location 객체 등을 속성으로 가지고 있다.

위의 내용 외에도 Window 객체는 브라우저와 상호작용하는데 필요한 많은 기능을 제공한다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div-1">1</div>
    <div id="div-2">2</div>
</body>

<script>
    window.addEventListener("scroll", () => {
        console.log(window.scrollY)
    })
</script>

</html>
body {
    height: 200vh;
}

div {
    height: 100px;
}

#div-1 {
    background-color: red;
}

#div-2 {
    background-color: blue;
}

이 JavaScript 코드는 사용자가 웹 페이지를 스크롤할 때마다 scrollY 값을 콘솔에 출력하는 이벤트 리스너를 설정한다.

자세한 설명은 다음과 같다.

  • window 객체: 웹 페이지의 전역 객체로, 웹 브라우저 창에 대한 정보를 담고 있다.
  • addEventListener: 이 메소드는 특정 이벤트가 발생했을 때 호출할 함수(리스너)를 설정한다. 첫 번째 인자로 이벤트 타입을 문자열로 전달하고, 두 번째 인자로 이벤트가 발생했을 때 호출할 함수를 전달한다.
  • "scroll": 이벤트 타입으로, 사용자가 웹 페이지를 스크롤할 때 발생한다.
  • () => { ... }: 화살표 함수로, "scroll" 이벤트가 발생했을 때 호출될 함수다.
  • console.log: 이 함수는 괄호 안의 값을 웹 브라우저의 콘솔에 출력한다.
  • window.scrollY: 이 속성은 웹 페이지의 수직 스크롤 위치를 픽셀 단위로 반환한다. 웹 페이지의 맨 위에서부터 현재 보이는 부분의 맨 위까지의 거리를 나타낸다.

따라서, 이 html코드는 사용자가 웹 페이지를 스크롤할 때마다 현재의 수직 스크롤 위치를 콘솔에 출력한다.

이 CSS 코드는 웹페이지의 body와 두 개의 div 요소에 스타일을 적용하는 규칙을 정의한다.

  • body: 이 선택자는 웹페이지의 전체 본문(body)에 스타일을 적용한다. height: 200vh;는 본문의 높이를 화면(viewport) 높이의 두 배로 설정한다. vh는 viewport height의 약자로, 1vh는 화면 높이의 1%를 나타낸다.
  • div: 이 선택자는 웹페이지 내의 모든 div 요소에 스타일을 적용한다. height: 100px;는 div 요소의 높이를 100픽셀로 설정한다.
  • #div-1: 이 선택자는 id 속성이 "div-1"인 요소에 스타일을 적용한다. background-color: red;는 배경색을 빨강색으로 설정한다.
  • #div-2: 이 선택자는 id 속성이 "div-2"인 요소에 스타일을 적용한다. background-color: blue;는 배경색을 파란색으로 설정한다.

따라서, 이 CSS 코드는 본문의 높이를 화면 높이의 두 배로, 모든 div 요소의 높이를 100픽셀로 설정하며, "div-1" id를 가진 요소의 배경색을 빨강색으로, "div-2" id를 가진 요소의 배경색을 파란색으로 설정한다.

스크롤이 움직일 때, 오른쪽 하단의 console창에 'window.scrollY'가 출력되는 것을 볼 수 있다.

HTMLElement.style

  • 해당 HTMLElement에 inline style로 정의된 속성들을 담고있는 객체
  • HTML요소의 인라인 스타일에 접근하고 조작하기 위해 사용

HTMLElement.style은 JavaScript에서 HTML 요소의 style 속성에 액세스하거나 변경하기 위해 사용하는 속성이다. style 속성은 해당 요소의 style 속성에 있는 인라인 CSS를 포함한 객체를 반환한다.

다음과 같이 사용할 수 있다.

// HTML 요소를 가져온다.
let element = document.getElementById('myElement');

// style 속성을 변경한다.
element.style.color = 'blue';  // 글자색을 파란색으로 변경
element.style.backgroundColor = 'yellow';  // 배경색을 노란색으로 변경

// style 속성을 액세스합니다.
let color = element.style.color;  // 현재 글자색을 가져온다.
let bgColor = element.style.backgroundColor;  // 현재 배경색을 가져온다.

이렇게 style 속성을 사용하여 CSS 속성을 직접 변경할 수 있지만, 이는 인라인 스타일을 변경하므로 CSS 파일이나 ＜style＞ 태그 내에 정의된 CSS 스타일은 덮어씌우지 않는다. CSS 규칙의 우선순위 때문에, 일반적으로 style 속성보다는 CSS 클래스를 사용하여 스타일을 변경하는 것이 좋다.

예제

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div-1">1</div>
    <div id="div-2">2</div>
</body>

<script>
    console.log(document.getElementById("div-1").style)
</script>

</html>
body {
    height: 200vh;
}

div {
    height: 100px;
}

#div-1 {
    padding-top: 20px;
    background-color: red;
}

#div-2 {
    background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div-1" style="padding-top: 20px;">1</div>
    <div id="div-2">2</div>
</body>

<script>
    console.log(document.getElementById("div-1").style)
</script>

</html>
body {
    height: 200vh;
}

div {
    height: 100px;
}

#div-1 {
    background-color: red;
}

#div-2 {
    background-color: blue;
}

JavaScript에서 HTMLElement.style 객체는 오직 해당 HTML 요소에 직접 정의된 인라인 스타일에만 액세스할 수 있다. 이 말은, HTML 태그 내에 style 속성으로 정의된 스타일만을 의미한다.

따라서, 첫 번째 예제에서는 CSS 파일 내부에 #div-1에 대한 스타일이 정의되어 있기 때문에, JavaScript에서 document.getElementById("div-1").style로는 패딩에 관한 정보를 얻을 수 없다.

두 번째 예제에서는 #div-1 태그 내부에 직접 style="padding-top: 20px;"이라고 인라인 스타일로 작성되었기 때문에, document.getElementById("div-1").style로 패딩에 관한 정보를 얻을 수 있다. 이 경우는 인라인 스타일이 적용되었기 때문에 가능한 것이다.

결론적으로, HTMLElement.style은 HTML 요소에 직접 작성된 인라인 스타일만을 대상으로 하며, 외부 CSS 파일이나 ＜style＞ 태그 내부에 정의된 스타일에 대해서는 액세스할 수 없다. CSS 파일이나 ＜style＞ 태그 내부에 정의된 스타일을 얻기 위해서는 다른 방법을 사용해야 한다. 그 방법 중 하나로 window.getComputedStyle() 함수를 사용할 수 있다.

예제2

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./index.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="div-1">1</div>
    <div id="div-2">2</div>
</body>

<script>
    window.addEventListener("scroll", () => {
        document.getElementById("div-1").style.transform = `translateY(${window.scrollY * 1.5}px)`;
    })
</script>

</html>
body {
    height: 200vh;
}

div {
    height: 100px;
}

#div-1 {
    background-color: red;
}

#div-2 {
    background-color: blue;
}

이 JavaScript 코드는 웹 페이지에서 스크롤 이벤트가 발생할 때마다 실행되는 이벤트 리스너를 등록하고 있다.

window.addEventListener("scroll", () => {...}) 부분은 '스크롤' 이벤트가 발생하면 뒤따라오는 함수를 실행하도록 브라우저에 지시한다. 이 함수는 화살표 함수(arrow function)로서, 스크롤 이벤트가 발생할 때마다 실행된다.

document.getElementById("div-1").style.transform = translateY(${window.scrollY * 1.5}px); 부분은 "div-1"라는 id를 가진 HTML 요소의 style.transform 속성을 변경한다.

translateY(${window.scrollY * 1.5}px)는 Y 축을 따라 이동(translate)하는 CSS 함수다. 여기서는 window.scrollY 값을 사용하여 스크롤의 현재 위치를 가져오고, 이 값을 1.5배 해서 픽셀 단위로 이동 거리를 지정한다.

따라서 이 코드의 결과로서, 웹 페이지를 스크롤할 때마다 "div-1" 요소는 스크롤한 거리의 1.5배만큼 Y축으로 이동하게 된다. 이는 일종의 스크롤에 따른 애니메이션 효과를 만들어낸다.

profile
Shy
신입사원...
이전 포스트

3-1. Parallax Scrolling & Responsive Web

0개의 댓글