Một trang web React cơ bản được làm mát hơn với Thiết kế web Parallax

Duyệt qua các khóa học Có thể dạy của chúng tôi .

Chúng tôi sẽ xây dựng trang web này thành 3 phần.

1. Top - lời chào cho khách hàng của chúng tôi

2. Middle - nơi cung cấp thông tin về sứ mệnh kinh doanh của chúng tôi

3. Dưới cùng - tùy chọn đăng ký và chân trang để biết thông tin về doanh nghiệp của chúng tôi

Đỉnh.

Tất cả những gì chúng ta sẽ làm ở đây là đặt một loạt các hình ảnh vào vị trí và viết lời chào.

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

Điều này quan trọng cho sau này khi chúng ta sử dụng Parallax HOC Wrapper để làm cho các phần tử này cuộn ở các tốc độ khác nhau.

Đây là kết quả của chúng tôi:

Miền Trung.

Đối với phần này, chúng tôi sẽ tạo các đường viền cong và chia phần thành bên trái và bên phải.

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

Chúng tôi đã sử dụng trang web Cubic Bezier Curve Generato r để giúp chúng tôi tạo mã.

Phần đáy.

Một đầu vào văn bản đơn giản và danh sách không có thứ tự kết thúc phần dưới cùng của chúng tôi.

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

Hãy xử lý Parallaxing.

Chúng tôi đã tạo HOC Wrapper này trong một hướng dẫn khác.

Bạn có thể tìm thấy nó ở đây .

Chúng tôi chỉ đơn giản là sẽ bọc bất cứ thứ gì chúng tôi muốn di chuyển với tốc độ khác trong trình bao bọc này và đặt thành phần mới vào mã của chúng tôi.

Ví dụ,

cái này :

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

Có nhiều sắc thái hơn cho dự án này.

Bao gồm mã cho thành phần 'Nút' tùy chỉnh của chúng tôi.

Bạn có thể xem video hướng dẫn của chúng tôi ở bên dưới.

Bạn có thể lấy các tệp nguồn tại đây .

Tất cả hình ảnh không gian đã được thu thập từ Biểu tượng phẳng .

Tất cả các biểu tượng hình ảnh liên hệ mà chúng tôi thu thập được từ Font Awesome .

Nếu bạn muốn có hướng dẫn chuyên sâu hơn, hãy xem video hướng dẫn đầy đủ của tôi trên YouTube, Đối tượng là A.

Thiết kế trang web React Parallax