Tutorial de proyecto JavaScript con efecto de desplazamiento de imagen de fondo

Archivos completos del proyecto

Créalo a partir del código fuente

Crea los archivos del proyecto, copia el código y abre el archivo HTML en tu navegador.

1Crea 3 archivos
→
2Copia el código
→
3Ejecuta index.html

Antes de ejecutarlo

Mantén todos los archivos del proyecto juntos en la misma carpeta.

Estructura del proyecto

background-image-scroll-effect/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Background Image Scroll Effect</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="bg-image" id="bg-image"></div>
    <div class="container">
      <h1>Welcome to our website</h1>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
        provident veritatis quos dolorum repellendus officia voluptate veniam id
        pariatur, maiores dolore libero nemo repudiandae facere reiciendis
        quisquam? Deleniti, eius.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
        provident veritatis quos dolorum repellendus officia voluptate veniam id
        pariatur, maiores dolore libero nemo repudiandae facere reiciendis
        quisquam? Deleniti, eius.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
        provident veritatis quos dolorum repellendus officia voluptate veniam id
        pariatur, maiores dolore libero nemo repudiandae facere reiciendis
        quisquam? Deleniti, eius.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
        provident veritatis quos dolorum repellendus officia voluptate veniam id
        pariatur, maiores dolore libero nemo repudiandae facere reiciendis
        quisquam? Deleniti, eius.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
        provident veritatis quos dolorum repellendus officia voluptate veniam id
        pariatur, maiores dolore libero nemo repudiandae facere reiciendis
        quisquam? Deleniti, eius.
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae suscipit,
        provident veritatis quos dolorum repellendus officia voluptate veniam id
        pariatur, maiores dolore libero nemo repudiandae facere reiciendis
        quisquam? Deleniti, eius.
      </p>
    </div>
    <script src="index.js"></script>
  </body>
</html>

Efecto de desplazamiento de imagen de fondo

Efecto de desplazamiento de imagen de fondo

Créalo a partir del código fuente

Practica con proyectos relacionados

Animación de efecto de texto automático

Animación del rastro del corazón

Barra de búsqueda animada

Animación de efecto de texto automático

Animación del rastro del corazón

Barra de búsqueda animada