React Parallax Website Design

Browse our Teachable courses.

We'll build this webpage in 3 parts.

Top - the greeting for our customer
Middle - a place for information about our business' mission
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.

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

The Middle.

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

<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 to help us with the code generation.

The Bottom.

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

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

Let's handle Parallaxing.

We created this HOC Wrapper in another tutorial.

You can find it 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 />

Wrapping everything we want gives us this final effect:

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.

All space imagery was gathered from Flat Icon.

All contact image icons we're gathered from Font Awesome.

Blog

React Parallax Website Design

an-object-is-a