대화식 시차 이미지 생성

Sep 11, 2025

어떻게

시차 스크롤 더 이상 보장 된 관심이 없었지만 시차 기법을 사용하여 방문자를 참여시키고 귀하의 방문자를 향상시키는 다른 방법이 있습니다. 사용자 경험 ...에

보세요 미스터 Fisk의 사이트 , 에 의해 설계된 BMO. 그리고 당신은 다른 종류의 시차가 진행되는 것입니다. 밝은 색깔의 주요 이미지가 마우스 움직임에 응답하여 3D로 움직입니다.

슈퍼 패스트 CSS를위한 5 가지 팁

구현하기가 너무 어렵지 않은 인상적인 효과입니다. 단순히이 단계를 수행하여 사이트를 눈길을 끄는 깊이 감각을주십시오.

완벽한 눈길을 끄는 사이트를 만드십시오. 웹 호스팅 서비스 및 웹 사이트 빌더 수단. 그리고 길을 따라 디자인 파일을 최고로 저장하십시오. 클라우드 스토리지 ...에

01. HTML을 시작합니다

첫 번째 단계는 헤드 및 본문 섹션을 저장하기위한 HTML 컨테이너로 구성된 HTML 문서를 정의하는 것입니다. 헤드 섹션은 주로 외부 CSS 및 JavaScript 리소스를로드하는 데 주로 책임이 있지만, 본문 섹션은 단계 02에서 생성 될 콘텐츠 요소를 저장합니다.

& lt; doctype html & gt; & lt; html & gt; & lt; head & gt; & lt; 마우스 스크롤 & gt; 마우스 스크롤 & lt; 타이틀 & 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. 콘텐츠 요소

이 기술은 데이터 시차 속성을 사용하여 모든 콘텐츠 컨테이너를 사용하여 효과를 표시합니다. 각 첫 번째 레벨 자식 요소는 시차 프레젠테이션으로 표시됩니다. 이 예제는 시차를 위해 세 자식 레이어를 설정하지만 원하는 경우 더 많이 추가 할 수 있습니다. 텍스트 또는 이미지와 같은 이러한 레이어에 콘텐츠를 추가 할 수도 있습니다. 투명성이있는 PNG 또는 SVG가 가장 잘 작동합니다.

& lt; Article Data-Parallax & gt; & lt; div & gt; & lt; / div & gt; & lt; div & gt; & lt; / div & gt; & lt; div & gt; & lt; / div & gt; & lt; / 기사 & gt;

03. 시차 컨테이너 스타일

'Styles.css'라는 새 파일을 만듭니다. 이 파일의 첫 번째 규칙 세트는 시차 컨테이너의 기본 크기와 위치 모드를 설정합니다. 컨테이너가있는 곳마다 하위 요소가 배치 될 수 있도록 상대 위치를 사용하는 것이 중요합니다. 너비와 높이는 최대 화면을 덮기 위해 전체 화면을 덮도록 설정됩니다.

 [데이터 - 시차] {
  위치 : 상대;
  너비 : 100VW;
  높이 : 100VH;
}

04. 시차 어린이

데이터 시차 컨테이너 내부의 첫 번째 레벨 요소는 크기가 크기가되며 중앙에 표시됩니다. 부모와 관련하여, 비율은 측정 단위로 사용되므로 시차 컨테이너와 관련하여 크기 조정 및 위치 지정을 허용합니다. 이 예에서 투명한 빨간색 배경이 효과를 입증하는 데 사용됩니다 - @Background : URL (여기서 "이미지" ")를 사용하여 선택한 PNG 또는 SVG 이미지로 대체 할 수 있습니다.

 [데이터 - 시차] & gt; * {
  위치 : 절대;
  너비 : 50 %;
  높이 : 50 %;
  왼쪽 : 25 %;
  상단 : 25 %;
  테두리 : 1px 고체 # 000;
  배경 : RGBA (255,0,0, .25)
}

05. 자바 스크립트를 시작하십시오

'code.js'라는 새 파일을 만듭니다. JavaScript는 사용자의 마우스 상호 작용에 대한 응답을 제어하는 데 사용됩니다. 우리는 페이지가 완전히로드 될 때까지 JavaScript가 JavaScript 코드를 실행하기를 원하지 않으므로 Load 이벤트에 의해 트리거 된 함수를 배치하는 단계를 완전히로드 할 때까지 윈도우로드가 완료 될 때 활성화합니다.

 window.addeventListener ( "LOAD", 함수 () {
  *** 6 단계
});

06. 노드 검색

페이지가 준비된 직후에 실행되는 JavaScript의 첫 번째 활동은 모든 시차 레이어를 찾는 것입니다. 첫째, 시차 컨테이너가 발견되며 자녀가 뒤 따른다. 각 자식에는 '데이터 색인'속성 아래에 인덱스 번호가 적용됩니다.

 AR 노드 = document.querySelectorAll ( "[데이터 시차]");
for (var i = 0; i & lt; nodes.length; i ++) {
  VAR 어린이 = 노드 [i]. children;
  for (var n = 0; n & lt; children.length; n ++) {
  어린이 [n] .setAttribute ( "데이터 - 색인", n + 2);
  }
  *** 7 단계
}

07. 시차 청취자

마지막 단계는 시차 컨테이너를 통해 발생하는 모든 마우스 이동에 대한 이벤트 리스너를 적용하는 것입니다. 이러한 조치는 마우스 위치에 따라 시차 계층의 새로운 위치와 단계 06에서 정의 된 데이터 - 인덱스 속성을 계산하는 기능을 트리거하여 각 계층이 서로 다른 밧줄에서 업데이트됩니다. 각 계산의 결과는 스타일 속성을 통해 레이어에 적용됩니다.

 노드 [i] .addeventListener ( "mousemove", 함수 (e) {
  var elms = this.children;
  (varc = 0; C & lt; elms.length; c ++) {
  var divisor = perseint (elms [c] .getAttribute ( "데이터 - 색인"));
  var startx = this.offsetwidth / 4;
  var starty = this.offsetheight / 8;
  ELMS [c] .style.left = startx - ((((e.screenx / divisor) -e.clientx) / 3) + "px";
  ELMS [c] .style.top = starty - (((e. (e. (e.screeny / divisor) -e.clienty) / 3) + "PX";
  }
});

이 기사는 원래 Creative Web Design Magazine의 Issage 272에서 출판되었습니다. 웹 디자이너 ...에 여기 문제를 구입하십시오 또는 웹 디자이너를 구독하십시오 ...에

관련 기사:

자바 스크립트로 SVG 애니메이션
WebGL로 액체 효과를 만듭니다
브라우저 교차 호환성 문제를 피하는 10 가지 방법

대화식 시차 이미지 생성

01. HTML을 시작합니다

02. 콘텐츠 요소

03. 시차 컨테이너 스타일

04. 시차 어린이

05. 자바 스크립트를 시작하십시오

06. 노드 검색

07. 시차 청취자

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

맞춤 슬랙 봇 만들기

Jekyll과 블로그를 만드는 방법

PROCREATE가있는 고전적인 동화 장면 페인트

Zbrush에서 설득력있는 눈을 조각하는 방법

디지털 도구를 사용하여 손으로 그린 모양을 만드는 방법

사진을 VR 세트로 변환

모션에서 만화 스타일의 머리카락을 만드는 방법

손으로 그린 그림 기술을 개선하기위한 최고 팁

카테고리