Базовый веб-сайт React стал круче с Parallax Web Design

Просмотрите наши обучаемые курсы.

Мы построим эту веб-страницу в 3 частях.

1. Верх — приветствие для нашего клиента

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 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 в другом уроке.

Вы можете найти его здесь .

Мы просто обернем в эту оболочку все, что хотим, чтобы двигаться с разной скоростью, и поместим новый компонент в наш код.

Например,

это :

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

В этом проекте гораздо больше нюансов.

Включая код для нашего пользовательского компонента «Кнопка».

Вы можете просмотреть наш видеоурок ниже.

Вы можете получить исходные файлы здесь .

Все космические снимки были собраны с Flat Icon .

Все значки изображений контактов мы собрали из Font Awesome .

Если вам нужно более подробное руководство, посмотрите мой полный видеоурок на YouTube An Object Is A .

React Parallax Дизайн веб-сайта