마우스로 제어 된 시차 배경 효과 생성

Sep 16, 2025

어떻게

(이미지 크레디트 : Renaud Rohlinger)

시차 스크롤이있는 사이트는 이유로 계속 인기를 얻으 려합니다. 사용자에게 즐겁고 매력적인 브라우징 경험을 만듭니다. 우리는 이미 최고의 놀라운 것을 보았습니다 시차 스크롤 웹 사이트를 당신에게 영감을주는 웹 사이트,하지만 당신이 자신의 하나를 만들고 싶으면 무엇을합니까?

운 좋게도 프랑스의 크리 에이 티브 개발자 Renaud Rohlinger는 마우스로 제어 할 수있는 시차 스크롤 배경을 만드는 방법에 대한 로프를 보여 드리겠습니다. 놀라운 결과를 확인하십시오 그의 사이트 그리고 다음 프로젝트의 효과를 어떻게 복제 할 수 있는지 아래로 Rohlinger에서 자신을 배우십시오.

이들 중 하나를 시도 할 수도 있습니다 웹 사이트 빌더 및 귀하의 사이트 성과를 고려하는 동안 귀하의 웹 호스팅 서비스가 당신을 위해 일하고 있습니다. 미디어 무거운 사이트가 있습니까? 신뢰할 수있는 백업 클라우드 스토리지 ...에

01. HTML 문서 프레임 워크를 정의하십시오

첫 번째 단계는 HTML 문서의 프레임 워크를 정의하는 것입니다. 이것은 머리와 본문 섹션을 갖는 문서를 설명하는 HTML 컨테이너로 구성됩니다. 헤드 섹션에서는 외부 JavaScript 및 CSS 파일을 링크하는 동안 본문 섹션은 2 단계에서 페이지 내용 요소를 정의하는 데 사용됩니다.

 & lt; doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; 타이틀 & gt; 시차 배경 & lt; / title & gt;
& lt; 링크 rel = "스타일 시트"유형 = "text / css"
href = "styles.css"/ & gt;
& lt; script src = "code.js"& gt; & lt; / script & gt;
& lt; / head & gt;
& lt; body & gt;
   *** 2 단계
& lt; / body & gt;
& lt; / html & gt;

02. HTML 컨텐츠를 식별합니다

본문 콘텐츠는 디스플레이 텍스트와 DIV 컨테이너로 구성됩니다. 데이터 시차 속성. 이 컨테이너 요소는 시차 배경에 사용될이 컨테이너 요소이며 각 자식 요소는 필요한 백그라운드 이미지와 스타일링됩니다. 이 예에서 컨테이너에는 하위 Div 요소에서 생성 할 세 개의 이미지 레이어가 있습니다.

 & lt; h1 & gt; hello! & lt; / h1 & gt;
& lt; div 데이터 시차 & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
   & lt; div & gt; & lt; / div & gt;
& lt; / div & gt;

03. CSS 시차 컨테이너를 만듭니다

새 파일을 만듭니다 styles.css. ...에 이 파일의 첫 번째 단계는 기본 콘텐츠 색상을 흰색으로 설정하고 시차 배경 컨테이너의 설정을 설정합니다. Parallax 컨테이너에 고정 위치가 적용되어 콘텐츠 스크롤이있는 것과 동일한 위치에 남아있게합니다. 기본 색상이 페이지 색상으로 적용되는 반면 음수 z-index는 컨테이너가 페이지 내용 아래에 나타날 수 있습니다.

 HTML, BODY {
   색상 : #fff;
}
[데이터 시차] {
   위치 : 고정;
   너비 : 100VW;
   높이 : 100VH;
   TOP : 0;
   왼쪽 : 0;
   Z- 색인 : -1;
   배경색 : # 000;
}

04. CSS 시차 레이어를 설정합니다

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

 [데이터 - 시차] & gt; * {
   위치 : 절대;
   너비 : 100VW;
   높이 : 100VH;
   배경 - 반복 : 반복;
   배경 크기 : 20VW 20VW;
}

05. CSS 배경 레이어를 사용하십시오

4 단계에서 정의 된 이미지 레이어 각각의 위치와 크기 설정을 공유하는 동안 각 레이어는 고유 한 이미지를 사용합니다. n 번째 자식 선택기는 시차 컨테이너 내의 각 개별 요소를 참조하는 데 사용됩니다. 배경 이미지 속성은 기와 일 때 그리드 효과를 생성하는 두 줄을 그리는 데 사용됩니다. 하위 레이어는 어두운 색상을 사용하여 깊이의 인식을 제공합니다.

 [데이터 - 시차] & gt; * : n 번째 자녀 (1) {
   배경 이미지:
      선형 그라디언트 (오른쪽, # 333 1px,
  투명한 1px),
      선형 그라데이션 (바닥, # 333 1px,
  투명한 1px);
}
[데이터 - 시차] & gt; * : n 번째 자녀 (2) {
   배경 이미지:
      선형 그라디언트 (오른쪽, # 777 1px,
투명한 1px),
      선형 구배 (아래쪽, # 777 1px,
투명한 1px);
}
[데이터 - 시차] & gt; * : n 번째 자녀 (3) {
   배경 이미지
      선형 그라데이션 (오른쪽, #fff,
투명한 1px),
      선형 그라디언트 (아래쪽, #fff 1px,
 투명한 1px);
}

06. JavaScript Layer Initiation을 수행하십시오

새 파일을 만듭니다 code.js. ...에 이 단계는 시차 컨테이어를 찾아서 이미지 레이어 각각을 데이터 색인 단계 7에서 사용할 속성은 브라우저 창의로드 이벤트에 첨부 된 함수에서 수행되어야하므로 코드의 본문 내용이 준비되었을 때만 코드가 실행됩니다.

 window.addeventListener ( "LOAD", 함수 () {
   var container = 문서.
QuerySelector ( "[데이터 - 시차]");
   var childnodes = container.children;
   for (var n = 0; n & lt; childnodes.length; n ++) {
      ChildNodes [n] .setAttribute ( "데이터 - index", n + 1);
   }
   **** 7 단계
});

07. 자바 스크립트 마우스 이동을 계산합니다

이 효과는 마우스 이동에 응답하여 각 시차 계층과 관련된 이미지를 이동시키는 것에 의존합니다. 6 단계에서 확인 된 시차 컨테이너는 A를 가지고 있습니다 쥐말 이벤트 리스너가 첨부되어 마우스 이동이있을 때마다 시차 층의 배경 이미지를 재배치하는 기능을 트리거합니다. 각 계층은 6 단계에서 적용된 인덱스 번호에 따라 모션 계산을 갖는다.

 Container.addEventListener ( "mousemove",
 기능 (e) {
   var elms = this.children;
   (varc = 0; C & lt; elms.length; c ++) {
      var motion = parseint (elms [c])
GetAttribute ( "데이터 - 색인") / 10;
      var x = ((e.clientx) * 모션) + "px";
      var y = ((e.clienty) * 모션) + "px"; elms [c]. style.backgroundposition = x +
""+ y;
   }
});

이 기사는 원래 크리에이티브 웹 디자인 잡지에 출판되었습니다. 웹 디자이너 ...에 지금 구매 290 번.

관련 기사:

2019 년 10 명의 최고의 CSS 프레임 워크
CSS로 SVG에 애니메이션을 추가하는 방법
52 2019 년에 더 똑똑한 일을 돕는 웹 디자인 도구

마우스로 제어 된 시차 배경 효과 생성

01. HTML 문서 프레임 워크를 정의하십시오

02. HTML 컨텐츠를 식별합니다

03. CSS 시차 컨테이너를 만듭니다

04. CSS 시차 레이어를 설정합니다

05. CSS 배경 레이어를 사용하십시오

06. JavaScript Layer Initiation을 수행하십시오

07. 자바 스크립트 마우스 이동을 계산합니다

어떻게 - 가장 인기있는 기사

보기 소스에서 JavaScript 코드를 숨기는 방법

Photoshop의 깊이를 추가하기 위해 펜 도구 및 텍스처를 사용하십시오

이 다섯 가지 요인과 반응을 주위에 반응 시키십시오

Unreal Engine에서 잔디를 만드십시오

3.JS로 3D 객체를 녹이는 방법

오일에서 브러시 스트로크를 개선하십시오

Unreal Engine 4

GIF에서 더 많은 것을 얻는 방법

카테고리