DEV Community

Cover image for React Parallax Website Design
an-object-is-a
an-object-is-a

Posted on • Updated on • Originally published at anobjectisa.com

React Parallax Website Design

React Parallax Website Design


Browse our Teachable courses.


React Parallax Website Design

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.

<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>
Enter fullscreen mode Exit fullscreen mode

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:

top


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> 
Enter fullscreen mode Exit fullscreen mode

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.

middle


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>
Enter fullscreen mode Exit fullscreen mode

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

bottom


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"/>
Enter fullscreen mode Exit fullscreen mode

becomes this:

const RocketShip = JSX_withParallax(<img src="./images/rocket.png" alt="" className="rocket-ship" />, 0.04);
Enter fullscreen mode Exit fullscreen mode

and is placed in our code like this:

<RocketShip />
Enter fullscreen mode Exit fullscreen mode

Wrapping everything we want gives us this final effect:

final


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.


If you want a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.

React Parallax Website Design

Top comments (0)