스크롤링 "Alien Lander"웹 사이트를 코딩하는 방법

() translation by (you can also view the original English article)

이 튜토리얼에서는 두 번째 시리즈 인 두 번째 시리즈에서 율리아 소콜 로바 (Yulia Sokolova)의 "웹 사이트에서 긴 스크롤 배경을 만드는 방법"이라는 멋진 벡터 기반 일러스트레이션을 찍어 라이브 사이트로 코딩합니다.

Illustration

웹 사이트에 긴 스크롤 배경을 만드는 방법

Yulia Sokolova

우리는 무엇을 할 것인가?

우리는 당신이 페이지 상단에서 아래로 스크롤 할 때 "Alien Lander"가 아래로 내려가는 것을 보게 될 것입니다. 처음에는 우주에서 떠오르는 UFO를 보게됩니다.

Image: https://cms-assets.tutsplus.com/uploads/users/53/posts/26826/image/ufo.png

아래로 내려 가면서 UFO가 대기에 도달하여 "외계 혜성"이 됩니다.

Image: https://cms-assets.tutsplus.com/uploads/users/53/posts/26826/image/comet.png

그리고 마지막으로 나무 줄을 지날 때 땅에 착륙하는 "작은 초록색 남자"가 됩니다.

라이브 데모보기!

SVG 이미지

이 프로젝트에서는 SVG 이미지를 사용하여 유동적으로 크기를 조정할 수있는 능력과 작은 파일 크기를 활용할 수 있습니다.

코딩을 시작하기 전에 이 튜토리얼 시리즈의 첫 번째 파트에서 만든 이미지가 필요하며 이 이미지는 네 개의 SVG 파일로 구분됩니다.

UFO는 "ufo.svg"라는 이름의 파일로
"alien_comet.svg"라는 파일로 "외계 혜성"
"작은 녹색 남자"라는 파일은 "alien_landing.svg"
위의 세 가지 항목이 제거 된 배경 이미지는 "background.svg"파일로 제거됩니다.

원하는 SVG 이미지를 원하는 그래픽 응용 프로그램에서 직접 내보내거나 GitHub의 소스 파일에서 네 개의 이미지를 모두 사용할 수 있습니다.

기본 구조 설정

프로젝트에 사용할 새 폴더를 만들고 그 안에 "css"라는 하위 폴더와 "images"라는 하위 폴더를 만듭니다.

4개의 SVG 이미지를 복사하여 새로운 "이미지"폴더에 붙여 넣으십시오.

"css"폴더에서 "style.css"라는 파일을 만듭니다.

기본 폴더에서 "index.html"이라는 새 파일을 만듭니다.

이제 폴더 구조가 다음과 같아야 합니다.

"index.html" 파일에 다음 기본 HTML을 추가하여 스타일 시트를 가져 와서 스타일 시트를 로드하십시오.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrolling Alien Lander</title>
  <link rel="stylesheet" href="css/coding_style.css">
</head>
<body>


  
</body>
</html>

배경 추가

반 직관적인 것처럼 보일지 모르지만 실제로는 CSS 배경 이미지가 아닌 img 요소를 사용하여 백그라운드 이미지를 추가 할 것입니다. 우리는 이렇게하기 때문에 :

우리는 SVG의 크기 조정 기능을 활용하여 전체 뷰포트에 "background.svg" 이미지는 브라우저 창의 크기에 관계없이
스크롤링 기술이 작동하려면 배경 이미지의 높이를 알아야합니다.
우리는 배경 이미지가 유동적으로 크기 조정되도록 허용하기 때문에 높이를 미리 알 수있는 방법이 없습니다.
배경 이미지의 높이를 미리 알 수 없기 때문에 이미지가 로드된 후 이미지를 감지해야합니다.
"background.svg"를 CSS 배경 이미지로 설정하면 높이가 사이트 레이아웃에 영향을 주지 않으므로 높이를 감지하기 어렵습니다.
"background.svg"를 삽입 함으로써 그 대신 높이가 사이트 레이아웃에 영향을 미치므로 jQuery를 사용하여 상대적으로 높이를 쉽게 감지 할 수 있습니다.

우리가 왜 이 접근법을 사용하는지 이해 하셨으면 코딩을 시작하십시오!

"index.html" 파일에 코드를 추가하십시오 :

1	<img class="background" src="images/background.svg">

브라우저에서 파일을 미리보기 하면 뷰포트를 가득 채우는 이미지가 보입니다. 그러나 가장자리에는 여전히 공백이 있습니다.

이것은 브라우저가 기본적으로 body 요소에 약간의 여백을 포함하기 때문입니다. 이를 무시하려면 "style.css" 파일을 CSS에 추가합니다 :

1	body {
2	margin: 0;
3	}

우리가 오버라이드 할 필요가 있는 또 다른 브라우저 기본값, inline으로 설정되는 이미지의 display 속성에 대한 기본값이 있습니다. 페이지 하단으로 스크롤하면 이 기본값으로 인해 이미지 아래에 작은 공백이 있음을 알 수 있습니다. 다음을 추가하여 변경하십시오.

1	img {
2	display: block;
3	}

이제 "background.svg" 가 보일 것입니다 이미지가 가장자리로 플러시 된 창을 채우고 창 너비의 크기를 조정하면 새 크기에 맞게 SVG 이미지의 크기가 다시 조정됩니다. 사이트 레이아웃의 높이도 "background.svg"에 대한 올바른 종횡비를 유지하도록 변경됩니다. 이미지

전경 컨테이너 추가

방금 배치한 이미지를 배경 이미지로 사용하려면 콘텐츠의 나머지 부분을 전경 그라운드에서 맨 위에 놓아야 합니다. 컨테이너 역할을하는 div 요소를 추가한 다음 position 및 z-index속성을 수정하여 이 작업을 수행 할 수 있습니다.

“index.html” 파일에서 방금 추가한 이미지 뒤에 이 새 div를 삽입하십시오.

1	<div class="foreground">
2	</div>

“style.css” 에 CSS 추가 :

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

위의 코드를 통해 우리가 하고있는 것을 실행해 봅시다.

첫째, position을 absolute로 설정하면 일반 문서 플로우에서 요소를 가져옵니다 (그렇지 않으면 백그라운드 이미지 아래에 배치됩니다). 그래서 우리는 어디에서나 선택할 수 있습니다.

그런 다음 위 및 왼쪽 속성을 0으로 설정하여 요소를 창의 맨 위로 이동하고 배경 이미지와 가로로 맞춥니다.

그런 다음 요소에 높이와 너비를 100%로 지정합니다. 이렇게하면 요소가 무언가로 축소되지 않고 내용이 숨겨집니다.

마지막으로 z-index를 1로 설정하여 요소를 앞으로 가져 와서 배경 이미지 앞에 놓습니다 (자동의 기본z-index에 있음). 이렇게하면 요소 내부의 내용이 배경 이미지에 의해 가려지지 않게됩니다.

이제 전경 컨테이너에 내용을 추가 할 준비가되었습니다.

UFO 패널 추가

바닥에 UFO "땅"을 만들려는 방법은 각 "착륙"단계마다 하나씩 세 개의 패널을 만드는 것입니다. 그런 다음 각 패널에 해당하는 SVG 이미지 예 : "ufo.svg" 예를 들어 고정 된 위치의 배경 이미지로 배경이 뒤에서 움직이는 동안 이미지는 스크롤하는 동안 그대로 유지되어 하강의 환상을 만듭니다.

"foreground" div 안에 이 새 div를 추가하십시오.

1	<div class="ufo_section"></div>

이제 다음 코드를 CSS에 추가하십시오.

.ufo_section {
  height: 100%;
  background: url(../images/ufo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  background-attachment: fixed;
}

위 코드의 첫 번째 줄에서 요소의 높이를 100%로 지정하여 해당 내용을 볼 수 있게합니다. 그런 다음 "ufo.svg" 이미지를 배경으로 사용합니다. UFO가 하나만 나타나기를 원하는 것처럼 background-repeat를 no-repeat으로 설정하고, background-position를 중심에서 수평 및 수직으로 모두 배치합니다.

background-size 속성을 사용하여 폭을 백분율 기준 값으로 설정하고 높이를 자동으로 계산할 수있게합니다. 이 폭은 UFO의 너비가 전체 그림의 너비의 약 40% 인 원본 벡터 이미지에서 가져옵니다.

폭을 설정함으로써 “ufo.svg” 이미지를 백분율로 표시합니다. 창의 크기가 조절되고 "background.svg" UFO 이미지는 의도 한 비율을 유지하기 위해 너비를 조정합니다.

마지막 줄에서 우리는 background-attachment를 fixed로 설정했습니다. 즉, 스크롤 할 때 이미지가 고정되어 고정 된 채로 우리에게 하강 환상이 있음을 의미합니다.

페이지를 새로 고침하고 지금 스크롤하면 UFO가 행성 사이를 수직으로 움직이는 것을 볼 수 있습니다.

혜성 및 랜딩 패널 추가

사이트를 아래로 스크롤하면 멀리 떨어지면 UFO가 사라지는 것을 알 수 있습니다. 이것은 ufo_section 패널의 높이를 지나서 스크롤하기 때문에 발생합니다. 그래서 그 시점에서 배경을 더 이상 볼 수 없습니다.

서로 3개의 패널을 쌓아서 지나치게 스크롤하면 배경이 사라지고 다음 패널의 배경이 나타나 다음 이미지로 대체됩니다.

이제 우리는 위에서 사용 된 프로세스를 반복하여 "alien_comet.svg" 및 "alien_landing.svg" 이미지입니다.

HTML에 ufo_section div 바로 다음에 foreground div 안에 여전히 다음을 추가하십시오.

1	<div class="comet_section"></div>
2	<div class="landing_section"></div>

그런 다음 CSS에 다음 새 클래스를 추가합니다.

.comet_section {
  height: 100%;
  background: url(../images/alien_comet.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
}

.landing_section {
  height: 100%;
  background: url(../images/alien_landing.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
  position: relative;
}

우리는 방금 추가한 더 좁은 이미지에 맞게 이미지 파일 이름만 변경하고 background-size 속성의 너비를 15%로 설정하여 모든 코드와 기법을 사용합니다.

완성된 CSS

당신의 "style.css" 파일은 이제 끝났으며 다음 코드를 포함해야 합니다.

body {
  margin: 0;
}

img {
  display: block;
}

.foreground {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}

.ufo_section {
  height: 100%;
  background: url(../images/ufo.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 40% auto;
  background-attachment: fixed;
}

.comet_section {
  height: 100%;
  background: url(../images/alien_comet.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
}

.landing_section {
  height: 100%;
  background: url(../images/alien_landing.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15% auto;
  background-attachment: fixed;
  position: relative;
}

이제 당신의 사이트로 돌아가서 아래로 스크롤하면 UFO가 혜성으로 변한 것을 볼 수 있습니다. 그리고 나서 "작은 녹색의 인간"으로 조금 더 내려갑니다.

패널 높이 계산 추가

스크롤 할때 해결해야 할 몇 가지 문제가 있음을 알게 될 것입니다.

세 패널은 각각 충분히 높지 않습니다. 이것은 외계인 착륙선이 한 형태에서 다른 형태로 너무 빨리 변경되어 결코 땅에 들지 않는 것처럼 보입니다.
"alien_comet.svg" 이 보일 것입니다. "ufo.svg" 전에 나타나는 이미지가 시작됩니다. 이미지가 완전히 사라져서 이상하게 보입니다.

왜나하면 "background.svg" 이미지의 크기가 고정되어 있지 않으면 로드하기 전에 각 패널의 픽셀 높이를 정확히 알 수 없습니다. 그러나 앞에서 결정할 수있는 것은 각 패널이 "background.svg"높이의 백분율이어야 하는 높이입니다.

jQuery를 사용하여 이 프로세스를 구현할 수 있습니다.

각 패널의 높이를 "background.svg"의 백분율 (또는 분수)로 정의하십시오. 이미지의 높이.
"background.svg"의 높이 감지 로드 된 후.
위의 두 가지 정보를 기반으로 패널의 높이를 계산하고 설정하십시오.

이제는 각 패널 사이에 스페이서 역할을하고 jQuery를 사용하여 높이를 설정하는 두 개의 여분의 빈 div도 추가 할 것입니다. 패널 사이에 공간을 추가하면보다 원활한 전환이 가능해지며 "alien_comet.svg" "ufo.svg" 앞에있는 이미지 이미지가 사라졌습니다.

HTML을 업데이트하여 기존 div 사이에 spacer div가 있도록 합니다.

<div class="foreground">
  <div class="ufo_section"></div>
  <div class="spacer_one"></div>
  <div class="comet_section"></div>
  <div class="spacer_two"></div>
  <div class="landing_section"></div>
</div>

그리고 head 섹션에서 다음을 추가하여 jQuery를 로드하십시오.

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

JavaScript 함수 설정

</body> 태그를 닫기 전에 <script></script> 태그를 만들고 다음과 같이 새 함수 기능을 설정하십시오.

<script>

  function set_section_heights(){

  }
  
</script>

페이지를 처음로드 할 때이 함수를 실행하고 크기를 변경할 때마다 이 작업을 수행하려면 이 작업을 수행하기 위해 여는 script 태그 뒤에 다음 코드를 추가하십시오.

$(document).ready(function(){
  set_section_heights();
});

$(window).resize(function(){
  set_section_heights();
});

배경 이미지의 높이 가져 오기

set_section_heights() 함수 안에서 가장 먼저해야 할 일은 우리의 배경 이미지가 현재 어떤 높이인지 알아 내서 변수로 저장하는 것입니다. 이렇게하려면 이 코드를 추가하십시오.

1	var doc_height = $(".background").height();

코드의 첫 번째 부분인 $(".background")를 사용하여 jQuery는 클래스 이름 background를 가진 요소를 찾습니다. 추가된 .height() 함수는 그 요소의 픽셀 높이를 정수로 가져옵니다. 이것은 우리의 "background.svg" 이미지는 doc_height 변수에 저장됩니다.

의도된 섹션 높이 정의

이제 우리가 정의 할 수있는 객체를 설정할 것입니다 :

높이를 설정하려는 각 요소의 클래스 이름입니다.
그 요소가 배경 높이의 몇 분의 일 정도로 되어야 합니다.

우리는이 객체를 반복하고 포어 그라운드의 섹션 크기를 조정하기 위해 포함 된 값을 사용합니다.

객체에서 하나의 항목으로 시작해 보겠습니다.

1	var section_heights = {
2	"ufo_section": 0.25
3	}

여기에서는 첫 번째 섹션의 클래스 이름과 일치하도록 ufo_section으로 색인 (왼쪽 값)을 설정했습니다.

그런 다음 값을 0.25로 설정했는데 이는 25%를 표현하는 또 다른 방법입니다. 잠시 후이 값에 doc_height 변수에 저장된 수, 즉 배경 이미지의 높이를 곱합니다. 이렇게하면 ufo_section 패널이 "background.svg"의 현재 높이의 25%가 되도록 하려는 것입니다.

예를 들어, "background.svg" 높이가 1000px 인 경우 ufo_section의 높이가 250px로 나옵니다.

1000 * 0.25 = 250

이제 이 객체가 어떻게 작동하는지 살펴 보았습니다. 높이를 설정하려는 다른 요소에 대한 항목을 추가해 봅시다. 개체를 다음과 같이 업데이트하십시오.

var section_heights = {
  "ufo_section": 0.25,
  "spacer_one": 0.03,
  "comet_section": 0.36,
  "spacer_two": 0.06,
  "landing_section": 0.298
}

참고 : 시행 착오에 따라 이 값을 선택 했으므로 이 튜토리얼을 완료 한 후에도 숫자를 가지고 놀고 효과를 확인하십시오.

`section_heights` 객체 반복하기

객체가 완성되면 이를 반복하고 패널 크기를 조정할 준비가 되었습니다.

먼저 $.each() 함수를 사용하여 section_heights 객체를 반복하고 포함된 각 항목에서 색인 및 값 (클래스 이름과 높이를 각각 나타냄)을 추출합니다.

section_heights 객체 뒤에 다음 코드를 추가하십시오.

1	$.each( section_heights, function( index, value ) {
2	console.log( "Index: " + index, "\| Value: " + value );
3	});

위의 반복 함수가 index 및 value 변수를 출력하는 방법을 알기 위해 console.log()를 사용하여 section_heights 객체의 각 항목에 대해 콘솔에 약간의 메시지를 씁니다.

사이트를 새로 고침하고 Chrome Web Developer Tools (또는 원하는 브라우저에서 이에 해당하는 도구)을 열고 콘솔을 확인하십시오. 이렇게 보여야 합니다:

인덱스 뒤에 각 메시지의 왼쪽에 각 항목의 index, 즉 크기를 조정할 요소의 클래스 이름을 볼 수 있습니다.

밸류 다음의 각 메시지 오른쪽에 각 항목의 value, 즉 각 패널의 전체 높이의 비율을 볼 수 있습니다.

단면 높이 계산 및 설정

이제는 이 데이터를 콘솔에 로깅하는 대신 전경 섹션의 크기를 설정하는 데 사용합시다. console.log() 삭제 줄을 바꾸고 이것을 다음으로 대체하십시오 :

1	$( "." + index ).height( Math.floor(value * doc_height) );

이 선이하는 것을 무너뜨립시다.

먼저 $( "." + index)가 있습니다. 이것을 사용하여 크기를 조정할 요소를 찾습니다. 예를 들어 객체의 첫 번째 항목에서 index는 ufo_section으로 설정됩니다. 이 경우 코드의 첫 번째 부분은 $.(".ufo_section")으로 평가됩니다. 이 코드를 사용하면 jQuery가 페이지에서 ufo_section 클래스가있는 요소를 검색하라는 메시지가 표시됩니다.

다음으로 .height(...)를 추가합니다. 이 코드를 사용하면 jQuery는 발견 한 요소의 높이를 설정하여 대괄호 사이에 전달된 값으로 변경합니다.

괄호 사이에 value * doc_height가 표시됩니다. 여기서 의도한 패널 높이를 계산하기 위해 앞서 언급한 곱셈을 수행하는 곳입니다. 예를 들어 객체의 첫 번째 항목의 값은 0.25입니다. 이 숫자는 doc_height 변수에 저장된 숫자로 곱해집니다.

이 두 변수를 곱하면 Math.floor()가 표시됩니다. 이것은 곱셈의 결과를 가장 가까운 정수로 반올림 합니다.

그래서 모든 것을 합치면, doc_height의 값이 5197이면 객체의 첫 번째 항목에 0.25가 곱해져 1299.25의 결과가됩니다.

Math.floor()는 해당 금액을 1299로 반올림합니다. 즉, 코드가 다음과 같이 평가됩니다. $.(".ufo_section").height (1299);

이 줄로 jQuery는 ufo_section 클래스로 요소를 찾고 높이를 1299px로 설정합니다.

완성된 HTML 및 자바 스크립트

그건 당신의 HTML과 자바 스크립트를 마무리합니다. 완성 된 "index.html" 파일에 다음 코드가 포함되어야 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Scrolling Alien Lander</title>
  <link rel="stylesheet" href="css/coding_style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
</head>
<body>

  <img class="background" src="images/background.svg">

  <div class="foreground">
    <div class="ufo_section"></div>
    <div class="spacer_one"></div>
    <div class="comet_section"></div>
    <div class="spacer_two"></div>
    <div class="landing_section"></div>
  </div>

<script>

  $(document).ready(function(){
    set_section_heights();
  });

  $(window).resize(function(){
    set_section_heights();
  });

  function set_section_heights(){

    var doc_height = $(".background").height();

    var section_heights = {
      "ufo_section": 0.25,
      "spacer_one": 0.03,
      "comet_section": 0.36,
      "spacer_two": 0.06,
      "landing_section": 0.298
    }

    $.each( section_heights, function( index, value ) {
      $( "." + index ).height( Math.floor(value * doc_height) );
    });

  }
  
</script>

</body>
</html>

작동중인 코드를 보려면 지금 사이트를 다시로드 하십시오. HTML을 검사 할 때 새로 계산 된 크기가 인라인으로 표시되어야 합니다.

브라우저 창 크기를 조정하면 이러한 값이 다시 계산되고 업데이트 되어야합니다 (예 :

잘 끝내셨습니다!

최종 결과를 살펴보십시오! 이제 페이지의 맨 위에서 시작하여 스크롤을 시작하면 UFO가 내려 오기 시작합니다. 그것이 대기에 도달하면 그것은 조금씩 사라지고 "외계 혜성"이 그 자리를 잡고 강하를 계속합니다. 나무의 꼭대기에서 그것은 한번 더 사라지고 "작은 녹색의 남자"는 땅으로의 여행을 완료합니다.

앞에서 언급했듯이 section_heights 객체에 설정된 값을 가지고 놀아서 다양한 단계를 거쳐 어떻게 착륙선의 흐름에 영향을 주는지를 볼 수 있습니다.

이 튜토리얼을 즐겁게 사용하고 SVG 이미지 및 고정 배경으로 할 수있는 멋진 아이디어에 대한 아이디어를 얻었으면 합니다.

Yulia에게 독창적인 벡터 일러스트레이션을 읽어 주셔서 감사 드리며, 곧다시 만나길 바랍니다!