React Parallax Website Design
Tags: react, javascript, webdev, design
Published: 2021-03-12 14:37:46

### <center>React Parallax Website Design</center>

------------

#### <center>Browse our [Teachable](http://anobject.teachable.com "Teachable") courses.</center>

------------

![React Parallax Website Design](https://user-images.githubusercontent.com/58220766/110365552-29442d80-8013-11eb-8081-e3bcb1253ead.png)

### We'll build this webpage in 3 parts.

1. **Top** - the greeting for our customer
2. **Middle** - a place for information about our business' mission
3. **Bottom** - a sign-up option and footer for information about our business

------------

### The Top.

#### All we're going to do here is set a bunch of images in place and write a greeting.

<br />

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

It's important in the CSS styles for all of these images that we make sure they have a ***position of 'fixed'*** and are positioned using the ***'top'*** property.

This important for later when we use our **Parallax HOC Wrapper** to make these elements scroll at different speeds.

This is our result:

<br />

![top](https://user-images.githubusercontent.com/58220766/107833819-71e52f80-6d62-11eb-8b60-33db57a54dea.png)

<br />

------------

### The Middle.

#### For this section we'll create curved borders and split the section into a left and right side.

<br />

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

The **svg** elements here create a nice curve effect on the top and bottom of this section.

We used the site [Cubic Bezier Curve Generator](https://sean.brunnock.com/SVG/SVGPathGenerator/ "Cubic Bezier Curve Generator") to help us with the code generation.

<br />

![middle](https://user-images.githubusercontent.com/58220766/107834192-8fff5f80-6d63-11eb-9195-6308efd95425.png)

<br />

------------

### The Bottom.

#### A simple text input and unordered lists finish our bottom section.

<br />

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

The '**Button**' is a custom component complete with an animation upon clicking.

<br />

![bottom](https://user-images.githubusercontent.com/58220766/107834920-baeab300-6d65-11eb-827d-a734c53d1b2b.gif)

<br />

------------

### Let's handle Parallaxing.

#### We created this HOC Wrapper in another tutorial.

You can find it [here](https://youtu.be/mehs92oAuYE "here").

We're simply going to wrap anything we wan to move at a different speed in this wrapper and place the new component into our code.

For example,

**this**:
```
<img src="./images/rocket.png" alt="" className="rocket-ship"/>
```

**becomes this**:
```
const RocketShip = JSX_withParallax(<img src="./images/rocket.png" alt="" className="rocket-ship" />, 0.04);
```

**and is placed in our code like this**:

```
<RocketShip />
```

<br />

Wrapping everything we want gives us this final effect:

![final](https://user-images.githubusercontent.com/58220766/107835964-62b5b000-6d69-11eb-99bf-fe0ddb23b897.gif)

------------

### There is much more nuance to this project.

#### Including the code for our custom 'Button' component.

You can view our video tutorial down below.

You can get the source files [here](https://github.com/an-object-is-a/react-webpage-01 "here").

All space imagery was gathered from [Flat Icon](https://www.flaticon.com/ "flat icon").

All contact image icons we're gathered from [Font Awesome](https://fontawesome.com/ "Font Awesome").

------------

#### <center>If you want a more in-depth guide, check out my full video tutorial on YouTube, **[An Object Is A](https://www.youtube.com/c/anobjectisa "An Object Is A")**.</center>

### <center>React Parallax Website Design</center>

{% youtube N0C8pwM5BGc %}