마우스로 제어되는 시차 배경 효과 만들기

시차 마우스 사이트
(이미지 출처 : Renaud Rohlinger)

시차 스크롤링이있는 사이트는 사용자에게 즐겁고 매력적인 브라우징 경험을 제공하기 때문에 계속해서 인기를 얻고 있습니다. 우리는 이미 최고의 놀라운 시차 스크롤 영감을주는 웹 사이트이지만, 자신 만의 웹 사이트를 만들고 싶다면 어떻게해야합니까?

다행히 프랑스의 크리에이티브 개발자 Renaud Rohlinger가 마우스로 제어 할 수있는 시차 스크롤링 배경을 만드는 방법에 대한 로프를 보여줍니다. 놀라운 결과를 확인하십시오. 그의 사이트 을 클릭 한 다음, 다음 프로젝트에서 효과를 복제 할 수있는 방법에 대해 아래의 Rohlinger 자신으로부터 배웁니다.



다음 중 하나를 시도해 볼 수도 있습니다. 웹 사이트 빌더 , 사이트 성능을 고려하는 동안 웹 호스팅 서비스가 당신을 위해 일하고 있습니다. 미디어가 많은 사이트가 있습니까? 안정적인 백업 클라우드 스토리지 .



01. HTML 문서 프레임 워크 정의

시차 마우스 사이트

단색 스플래시 화면이 열리는이 사이트는 애니메이션 3D 배경과 일본 타이포그래피를 즉시 병치합니다.(이미지 출처 : Renaud Rohlinger)

첫 번째 단계는 HTML 문서의 프레임 워크를 정의하는 것입니다. 이것은 head와 body에 대한 섹션이있는 것으로 문서를 설명하는 HTML 컨테이너로 구성됩니다. 헤드 섹션은 외부 JavaScript 및 CSS 파일을 연결하지만 본문 섹션은 2 단계에서 페이지 콘텐츠 요소를 정의하는 데 사용됩니다.



애프터 이펙트 CC에서 애니메이션하는 방법
Parallax Background *** STEP 2 HERE

02. HTML 콘텐츠 식별

본문 내용은 표시 텍스트와 div 컨테이너로 구성됩니다. 데이터 시차 속성. 시차 배경에 사용되는 것은이 컨테이너 요소이며 각 하위 요소는 필수 배경 이미지로 스타일이 지정됩니다. 이 예에서 컨테이너에는 하위 div 요소에서 생성 할 3 개의 이미지 레이어가 있습니다.

Hello!

03. CSS 패럴 랙스 컨테이너 생성

시차 마우스 사이트

아래로 스크롤하면 고양이 캐릭터를 따라 가며 메인 포트폴리오로 이동하도록 격려하면서 사물이 더욱 화려 해집니다.(이미지 출처 : Renaud Rohlinger)

라는 새 파일을 만듭니다. styles.css . 이 파일의 첫 번째 단계는 기본 콘텐츠 색상을 흰색으로 설정하고 시차 배경 컨테이너에 대한 설정을 설정합니다. 고정 위치는 시차 컨테이너에 적용되어 콘텐츠가 스크롤 될 때 동일한 위치에 유지되도록합니다. 기본 색상이 페이지 색상으로 적용되고 음수 Z- 색인을 사용하면 컨테이너가 페이지 콘텐츠 아래에 표시됩니다.





html, body{ color: #fff; } [data-parallax]{ position: fixed; width: 100vw; height: 100vh; top: 0; left: 0; z-index: -1; background-color: #000; }

04. CSS 시차 레이어 설정

각 이미지 레이어는 브라우저 창과 일치하는 크기로 절대 위치 지정을 사용하도록 설정됩니다. 이 예제의 시차 이미지는 반복하도록 설정된 특정 크기 패턴을 기반으로합니다. repeat-y를 사용하여 이미지를 수직으로 만 반복하거나 repeat-x를 사용하여 수평으로 만 반복하도록 선택할 수 있습니다.



[data-parallax] > *{ position: absolute; width: 100vw; height: 100vh; background-repeat: repeat; background-size: 20vw 20vw; }

05. CSS 배경 레이어 사용

시차 마우스 사이트

디지털 아트를 더 잘하는 방법
사이트의 홍보에서 개발 작업을 찾고자하는 Renaud는 WebGL의 우수성을 보여줄 기회를 낭비하지 않습니다.(이미지 출처 : Renaud Rohlinger)

각 이미지 레이어는 4 단계에서 정의한 위치 및 크기 설정을 공유하지만 각 레이어는 고유 한 이미지를 사용합니다. n 번째 자식 선택기는 패럴 랙스 컨테이너 내의 각 개별 요소를 참조하는 데 사용됩니다. background-image 속성은 바둑판 식으로 배열 할 때 격자 효과를 만드는 두 개의 선을 그리는 데 사용됩니다. 낮은 레이어는 더 어두운 색상을 사용하여 깊이 인식을 제공합니다.



[data-parallax] > *:nth-child(1){ background-image: linear-gradient(to right, #333 1px, transparent 1px), linear-gradient(to bottom, #333 1px, transparent 1px); } [data-parallax] > *:nth-child(2){ background-image: linear-gradient(to right, #777 1px, transparent 1px), linear-gradient(to bottom, #777 1px, transparent 1px); } [data-parallax] > *:nth-child(3){ background-image linear-gradient(to right, #fff, transparent 1px), linear-gradient(to bottom, #fff 1px, transparent 1px); }

06. 자바 스크립트 레이어 초기화 수행

라는 새 파일을 만듭니다. code.js . 이 단계는 시차 컨테이너를 찾고 각 이미지 레이어를 데이터 인덱스 7 단계에서 사용할 속성입니다.이 작업은 브라우저 창의로드 이벤트에 연결된 함수에서 수행해야합니다. 그러면 페이지의 본문 콘텐츠가 준비된 경우에만 코드가 실행됩니다.

포토샵에서 마그네틱 올가미 도구를 사용하는 방법
window.addEventListener('load', function(){ var container = document. querySelector('[data-parallax]'); var childNodes = container.children; for(var n=0; n

07. JavaScript 마우스 움직임 계산

이 효과는 마우스 움직임에 따라 각 시차 레이어와 관련된 이미지를 이동하는 데 의존합니다. 6 단계에서 식별 된 시차 컨테이너에는 mousemove 이벤트 리스너가 연결되어 마우스 움직임이있을 때마다 시차 레이어의 배경 이미지를 재배치하는 함수를 트리거합니다. 각 레이어에는 6 단계에서 적용된 인덱스 번호를 기반으로하는 모션 계산이 있습니다.

container.addEventListener('mousemove', function(e){ var elms = this.children; for(var c=0; c

이 기사는 원래 크리에이티브 웹 디자인 잡지에 게재되었습니다. 웹 디자이너 . 지금 290 호를 구매하세요.

관련 기사: