React Parallax 웹 사이트 디자인

Parallax Web Design으로 더 멋진 기본 React 웹사이트

Teachable 과정을 살펴 보세요 .

우리는 이 웹페이지를 3부분으로 만들 것입니다.

1. Top — 고객을 위한 인사말

2. 중간 - 우리 사업의 사명에 대한 정보를 제공하는 곳

3. 하단 — 비즈니스에 대한 정보를 위한 가입 옵션 및 바닥글

상단.

여기서 우리가 할 일은 많은 이미지를 제자리에 설정하고 인사말을 작성하는 것입니다.

<div className=”section1" >
<img src=”./images/space.png” alt=”” className=”space-background”/>
<img src=”./images/earth.png” alt=”” className=”earth”/>
<img src=”./images/rocket.png” alt=”” className=”rocket-ship”/>
<img src=”./images/planet1.png” alt=”” className=”planet1"/>
<img src=”./images/satellite.png” alt=”” className=”satellite”/>
<div className=”greeting”>[Welcome]</div>
</div>

이것은 나중에 Parallax HOC Wrapper 를 사용하여 이러한 요소를 다른 속도로 스크롤할 때 중요합니다.

결과는 다음과 같습니다.

중간.

이 섹션에서는 곡선 테두리를 만들고 섹션을 왼쪽과 오른쪽으로 분할합니다.

<div className=”section2" >
<svg className=”svg_curve_top” xmlns=”http://www.w3.org/2000/svg" fill=”orange” viewBox=”0 0 100 100" preserveAspectRatio=”none” >
<path d=”M0,100 C65,93 76,10 100,100" />
</svg>
<div className=”section2_container”>
<div className=”left_side”>
// text here
</div>
<div className=”right_side”>
// image here
</div>
</div>
<svg className=”svg_curve_bottom” xmlns=”http://www.w3.org/2000/svg" fill=”orange” viewBox=”0 0 100 100" preserveAspectRatio=”none” >
<path d=”M0,0 C65,20 90,5 100,0" />
</svg>
</div>

우리 는 코드 생성을 돕기 위해 Cubic Bezier Curve Generato r 사이트를 사용했습니다 .

바닥.

간단한 텍스트 입력과 정렬되지 않은 목록으로 하단 섹션을 마칩니다.

<div className=”section3" >
Sign up to receive our newsletter!
<input className=”input_email” type=”text” name=”email” id=”email” />
<MyButton text=”Sign Up” />
<div className=”contacts” >
<section className=”contact_section” >
<ul>
// your items here
</ul>
</section>
<section className=”contact_section” >
<ul>
// your items here
</ul>
</section>
<section className=”contact_section” >
<ul>
// your items here
</ul>
</section>
</div>
</div>

Parallaxing을 처리합시다.

다른 자습서에서 이 HOC 래퍼를 만들었습니다.

여기에서 찾을 수 있습니다 .

우리는 단순히 이 래퍼에서 다른 속도로 이동하려는 모든 것을 래핑하고 새 구성 요소를 코드에 배치할 것입니다.

예를 들어,

이 :

<img src=”./images/rocket.png” alt=”” className=”rocket-ship”/>

const RocketShip = JSX_withParallax(<img src=”./images/rocket.png” alt=”” className=”rocket-ship” />, 0.04);

<RocketShip />

이 프로젝트에는 훨씬 더 많은 뉘앙스가 있습니다.

사용자 정의 'Button' 구성 요소에 대한 코드를 포함합니다.

아래에서 비디오 자습서를 볼 수 있습니다.

여기 에서 소스 파일을 얻을 수 있습니다 .

모든 우주 이미지는 Flat Icon 에서 수집했습니다 .

모든 연락처 이미지 아이콘은 Font Awesome 에서 수집 합니다.

더 자세한 가이드가 필요하면 YouTube에서 제 전체 비디오 자습서인 An Object Is A 를 확인하세요 .