React Parallax 웹사이트 디자인

React Parallax 웹사이트 디자인

Teachable 과정을 찾아보십시오.

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

Top - 고객님을 위한 인사말

가운데 - 비즈니스 사명에 대한 정보를 제공하는 곳

하단 - 당사 비즈니스 정보에 대한 가입 옵션 및 바닥글

상단.

여기서 할 일은 많은 이미지를 제자리에 놓고 인사말을 쓰는 것뿐입니다.

<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>

이러한 모든 이미지의 CSS 스타일에서 '고정' 위치를 지정하고 'top' 속성을 사용하여 배치하는 것이 중요합니다.

이는 나중에 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> 

여기서 svg 요소는 이 섹션의 상단과 하단에 멋진 곡선 효과를 만듭니다.

코드 생성에 도움이 되는 사이트Cubic Bezier Curve Generator를 사용했습니다.

바닥.

간단한 텍스트 입력과 정렬되지 않은 목록이 하단 섹션을 마무리합니다.

<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>

'버튼'은 클릭 시 애니메이션으로 완성되는 사용자 지정 구성 요소입니다.

패럴랙싱을 처리해 봅시다.

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

찾을 수 있습니다here.

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

예를 들어,

이것:

<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 />

원하는 모든 것을 래핑하면 다음과 같은 최종 효과가 나타납니다.

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

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

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

소스 파일here을 가져올 수 있습니다.

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

우리가 수집한 모든 연락처 이미지 아이콘은 Font Awesome 입니다.

보다 심층적인 가이드를 원하시면 YouTube에서 전체 비디오 자습서를 확인하십시오.

React Parallax 웹사이트 디자인