Awwward: 마우스 휠 이벤트 + CSS 투시도, 반응.JS
Awwward: 마우스 휠 이벤트 + CSS 투시도, 반응.JS
나는 연구awwward.com에 걸린 멋진 사이트를 좋아한다. 항상 인상적이고 고무적인 효과가 있다.
이 자습서에서, 우리는 React를 사용하여 상호작용식 비닐 카트리지를 구축할 것이다.
원시 웹 사이트here
계획
1. React, SASS 설치...
React를 사용하려면 먼저 NPM을 사용하여 설치해야 합니다.
npx create-react-app nameOfYourProject
npm install [email protected]
cd nameOfYourProject
npm start
2. 폴더 구조 만들기
/src에 다음 폴더를 추가합니다.
3. 홈 페이지 및 구성 요소 만들기
현재 우리는 홈 페이지를 만들어야 하기 때문에 홈 페이지를 추가합니다.페이지 폴더의 jsx** 입니다./styles**에 홈 폴더를 만들고 홈 폴더에 추가하는 것을 잊지 마세요.scss
색인에 있습니다.css** 당신의 신체 라벨에 몇 줄을 추가합니다
그런 다음 ** 애플리케이션에 ** 홈 페이지를 추가합니다.**js
간단하잖아!*/components**에 새 폴더/vinyleBox*를 만들고 **vinyleBox에 추가합니다.jsx.비닐 상자.jsx**에는 데이터라는 매개 변수가 포함되어 있습니다.** 홈 페이지에 **비닐 카트리지 ** 구성 요소를 추가합니다.jsx**CSS에 대해 이전과 같은 작업을 수행합니다
**/components**에 새 폴더/vinyles를 만들고 **vinyles에 추가합니다.jsx** 및 다음 그림을 저장합니다. 예를 들어 ** 표지입니다.jpg에서 당신의 폴더/자산으로.비닐.jsx**는 두 개의 매개 변수 id와 스타일을 포함합니다!그런 다음 **에틸렌 ** 어셈블리를 **에틸렌 상자에 추가합니다.jsx
다음과 같은 결과를 얻어야 합니다.
4. Create data and setup vinyls with CSS
우선 랜덤 ID와 배경색을 만드는 두 가지 함수가 필요합니다.따라서 비닐 첨가 서비스.js to/services
새 상태 데이터를 초기화하고 새 함수인 initData를 만듭니다.모든 위치와 비닐 파라미터는 id를 포함합니다.
CSS를 사용하여 그림에 비닐을 설치하려면property transform과three transform 함수를 사용해야 합니다.첫 번째는 투시도입니다. 각 비닐기의 투시도는 모두 비슷하여 사용자와 z=0 평면 사이의 거리를 설정하는 데 사용됩니다.다시 말하면, 만약 당신의 물건이 당신과 매우 멀거나 가깝다면 논리적으로 축소해야 한다.두 번째는translateZ입니다. z축을 따라 엔티티를 이동하는 데 사용되고 마지막은translateY입니다. 엔티티를 수직으로 이동하는 데 사용됩니다
우리 집에서 합시다.jsx는 이전의 두 가지 새로운 서비스 기능을 포함한다.VinylesBox** 구성 요소로 데이터를 전송합니다
**VinylesBox에 매핑 함수를 추가합니다.js
지금 너는 반드시 이 결과를 얻어야 한다.
Read the rest of the article on medium
Reference
이 문제에 관하여(Awwward: 마우스 휠 이벤트 + CSS 투시도, 반응.JS), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/thecodingfreak/awwward-mouse-wheel-event-css-perspective-react-js-38a9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
