Un sitio web básico de React mejorado con Parallax Web Design

Explore nuestros cursos de enseñanza .

Construiremos esta página web en 3 partes.

1. Top — el saludo para nuestro cliente

2. Medio : un lugar para obtener información sobre la misión de nuestro negocio

3. Abajo : una opción de registro y un pie de página para obtener información sobre nuestro negocio.

La parte superior.

Todo lo que vamos a hacer aquí es colocar un montón de imágenes en su lugar y escribir un saludo.

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

Esto es importante para más adelante cuando usemos nuestro Parallax HOC Wrapper para hacer que estos elementos se desplacen a diferentes velocidades.

Este es nuestro resultado:

La mitad.

Para esta sección, crearemos bordes curvos y dividiremos la sección en un lado izquierdo y otro derecho.

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

Usamos el sitio Cubic Bezier Curve Generator para ayudarnos con la generación de código.

El fondo.

Una entrada de texto simple y listas desordenadas terminan nuestra sección inferior.

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

Manejemos el paralaje.

Creamos este HOC Wrapper en otro tutorial.

Puedes encontrarlo aquí .

Simplemente vamos a envolver cualquier cosa que queramos mover a una velocidad diferente en este envoltorio y colocaremos el nuevo componente en nuestro código.

Por ejemplo,

esto :

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

Hay muchos más matices en este proyecto.

Incluyendo el código para nuestro componente 'Botón' personalizado.

Puedes ver nuestro video tutorial abajo.

Puede obtener los archivos fuente aquí .

Todas las imágenes del espacio se obtuvieron de Flat Icon .

Todos los íconos de imágenes de contacto que recopilamos de Font Awesome .

Si desea una guía más detallada, consulte mi video tutorial completo en YouTube, An Object Is A .

Diseño de sitio web React Parallax