Podstawowa strona Reacta schłodzona dzięki Parallax Web Design

Przejrzyj nasze kursy do nauki.

Zbudujemy tę stronę w 3 częściach.

1. Góra — powitanie dla naszego klienta

2. Middle — miejsce na informacje o misji naszej firmy

3. Dół — opcja rejestracji i stopka z informacjami o naszej firmie

Szczyt.

Wszystko, co zamierzamy tutaj zrobić, to ustawić kilka obrazów i napisać pozdrowienia.

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

Jest to ważne na później, gdy użyjemy naszego Parallax HOC Wrapper , aby te elementy przewijały się z różnymi prędkościami.

Oto nasz wynik:

Środek.

W tej sekcji stworzymy zakrzywione obramowania i podzielimy sekcję na lewą i prawą stronę.

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

Wykorzystaliśmy witrynę Cubic Bezier Curve Generator , aby pomóc nam w generowaniu kodu.

Dół.

Proste wprowadzanie tekstu i nieuporządkowane listy kończą naszą dolną sekcję.

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

Zajmijmy się paralaksowaniem.

Stworzyliśmy ten HOC Wrapper w innym samouczku.

Znajdziesz go tutaj .

Po prostu zapakujemy w to opakowanie wszystko, co chcemy przenieść z inną prędkością, i umieścimy nowy komponent w naszym kodzie.

Na przykład,

to :

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

W tym projekcie jest znacznie więcej niuansów.

Łącznie z kodem naszego niestandardowego komponentu „Przycisk”.

Poniżej możesz obejrzeć nasz samouczek wideo.

Możesz pobrać pliki źródłowe tutaj .

Wszystkie obrazy kosmiczne zostały zebrane z Flat Icon .

Wszystkie ikony kontaktów, które zebraliśmy z Font Awesome .

Jeśli chcesz uzyskać bardziej szczegółowy przewodnik, zapoznaj się z moim pełnym samouczkiem wideo na YouTube, Obiekt to A .

React Parallax Projektowanie stron internetowych