Aprende como hacer el famoso efecto parallax de la forma mas fácil y sencilla con HTML, CSS y JS

Share on Pinterest
Comparte con tus amigos










Enviar

Uno de los efectos que mas atraen de los sitios web es el efecto parallax, asi es como se le conoce al efecto de desplazamiento que podemos dar a los elementos de un sitio web al ir bajando en la pagina. Por ejemplo al ir bajando en una pagina y que el fondo se desplace a un tiempo diferente al resto del contenido.

Ejemplo: http://falconmasters.com/demos/parallax_sencillo/

Aquí en este tutorial aprenderás como hacer este efecto parallax sencillo con solo HTML, CSS y Javascript (Jquery). Debes tener conocimientos mínimos de HTML y CSS, de ser posible también de jquery pero si no, no hay problema que aquí tratare de explicarte el código.

Cosas que necesitaremos:

  • Una imagen muy grande o textura
  • 3 archivos:
    • index.html
    • estilos.css
    • parallax.js
  • Jquery

Recursos:

Jquery: http://code.jquery.com/jquery-latest.js

Texturas: 6 Sitios web donde conseguir texturas para tu sitio web

Yo comenzare bajo una estructura html y css ya creada, utilizare la del demo y te compartiré el código para que puedas seguir el tutorial sin problemas.

Primero que nada enlazamos nuestros archivos en nuestro head:

Ahora si pasamos a la estructura HTML, que es muy básica y consta de un div con una clase .contenedor que usaremos para centrar todo y dentro varios article con su titulo y texto.

En el código yo solo pongo un article, tu debes copiarlo y pegarlo cuantas veces quieras, el objetivo es tener el scroll (barra de desplazamiento) activo.

Estructura HTML:

Código CSS:

La parte importante a tomar en cuenta de nuestro codigo CSS son las propiedades background dentro de nuestro body porque con ella cargamos la imagen y le damos las propiedades necesarias.

Estas propiedades son las que usaremos si estamos trabajando con una imagen muy grande, como un paisaje ya que si trabajas con texturas necesitaras cambiar algunas propiedades.

Si trabajas con texturas tienes que cambiar las propiedades de background y dejar el body de la siguiente manera:

Lo único que hacemos es quitar background-size y cambiar el valor de background-repeat para que se repita la textura en todo el fondo.

Lo siguiente por hacer es lograr que el fondo de nuestro sitio baje mas lento a comparacion del contenido. Primero como recordaras, establecimos un position:fixed; a nuestra imagen, por lo que se queda fija a pantalla. Aunque esta fija, nosotros vamos a desplazarla con Jquery, esto mediante la propiedad background-position:;

Si recuerdas background-position nos permite mover el fondo de nuestro sitio mediante 2 valores, en el primer valor indicamos cuanto desplazaremos de izquierda a derecha y en el segundo cuanto desplazaremos de arriba a abajo.

Nosotros no tocaremos el primer valor, solo el segundo que nos permite desplazarlo de arriba a abajo.

Para desplazarlo lo haremos con un calculo y básicamente lo que haremos es tomar la posición en px del scroll y multiplicarla por un valor inferior al 1.

De esta forma el fondo se moverá mas despacio que el contenido.

Así que traducimos lo que hemos hablado a código jquery, quedándonos de la siguiente manera:

Lo importante aqui es que sepas que puedes cambiar la “velocidad” a la que se desplazara tu fondo, esto cambiando el 0.10 del codigo anterior por otro valor, entre mas grande sea el valor, mas px avanzara cada que muevas el scroll. Esto tiene una desventaja y es que si tienes mucho contenido puedes subir tanto la imagen que llegue un punto en el que ya no puedas mostrar mas imagen y se vea el fondo blanco. Yo te recomiendo que escojas un valor entre 0.40 y 0.10

Básicamente con el código anterior estamos diciéndole que la imagen va a ir subiendo cada que scrolleamos, porque es como si nuestra propiedad css estuviera establecida asi:

Donde # es el numero que va incrementando, como tenemos -# estamos diciendo que estaremos moviendo el fondo de abajo hacia arriba.

Por ultimo decirte que si trabajas con imágenes debes desabilitar el background-size:cover; cuando estés en dispositivos mas pequeños, esto lo hacemos con el siguiente código dentro de nuestro $(document).ready();

Ejemplo:

Mover el fondo de arriba hacia abajo usando texturas.

Si estas usando texturas puedes desplazar el fondo de arriba hacia abajo, para hacer esto es tan sencillo como borrar el signo de: - y cambiando el código css como vimos anteriormente.

Quedando nuestro js de la siguiente manera:

Video tutorial: Como hacer efecto Parallax (sencillo) con HTML, CSS y JS

Y de momento eso es todo por este tutorial, espero que te haya gustado, servido y nos vemos en el próximo.

Share on Pinterest
Comparte con tus amigos










Enviar

FalconMasters Carlos Arturo

  • Javier Pulcini

    Muy bueno. Gracias!!

  • Javier Rodriguez

    como pones html dentro de tu web

  • ALENICO

    Sabes q no me kere cargar la imagen
    necesito ayudaaa. grcs.

  • Andrex Baldion

    no me craga el fondo no se si es por el jquery

  • alvarogabrielgomez

    Tengo una duda, si quiero hacer ese mismo efecto pero en un DIV que este a tantos px del tope y de la izquierda como se hace? E intentado y funciona tal cual, pero cuando es un fondo normal que esta en 0 0, pude hacer que funcione unos pixeles a la derecha pero de arriba no

  • Alain Barrios

    ese fondo pesa un quintal. Deberias reducir el peso optimizar la imagen

  • Juan Arturo Cruz Cardona

    No me carga el fondo D:

    • Brayan Tonathiu

      jajajajaja a mi me cargo con la mente :V:V:V:V:V

    • Kinz01

      es que tienes que ponerle url(…/images/tufondo.jpg) y listo asi carga.

  • kevin

    no me carga el fondo de imagen porfas ayuda…

  • Diana Juárez

    como puedo poner un menu despegable en la pagina ….

  • AlexisRuiz1989

    tengo problemas con el codigo javascript$’ was used before it was defined.$(document).ready(function(){1Expected exactly one space between ‘function’ and ‘(‘.$(document).ready(function(){1Expected exactly one space between ‘)’ and ‘{‘.$(document).ready(function(){1Missing space between ‘)’ and ‘{‘.$(document).ready(function(){3Missing ‘use strict’ statement.$(window).scroll(function(){3Expected exactly one space between ‘function’ and ‘(‘.$(window).scroll(function(){

  • Fran BerCa

    Fantástico Carlos Arturo. ¿Podrías realizar un tutorial sobre una web completa (menú, section, aside, footer…) con este efecto parallax? Muchas gracias por enseñar y hacerlo tan bien!

  • jairo

    muchas gracias por el tuto,, como puedo hacer el efecto en sentido horizontal,,te agradeceria

  • César Miranda

    Hola que tal, muy buen tutorial!! Tengo una pregunta, cómo se puede hacer un parallax de este estilo? Que maneja un mapa dentro de un canvas y que aparte es responsivo. No he podido encontrar una forma de poder desarrollarlo y me gustaría que me pudieran dar una orientación. Gracias
    http://www.nytimes.com/interactive/2015/10/27/world/greenland-is-melting-away.html?emc=edit_na_20151027&nlid=57890975&ref=cta&_r=1

  • Ioce Velasco

    Hola como hago el efecto parallax en un div con un imagen o textura de fondo, Saludos

  • Oliver

    Hola, gracias por el tutorial, me ha funcionado a la perfeccción. Pero tengo una duda,
    ¿Cómo puedo hacer el efecto parallax al interior de un contenedor rectagular, es decir, hacer un rectagulo sin relleno y sin borde, colocarle una imagen de fondo, y aplicarle a esta imagen el efecto, que se encuentra de fondo en el rectangulo?.

    adjunto imagenes: previsulización del navegador, codigo html y css.
    Espero que puedan ayudarme con esto.

    • Oliver

      Imágenes

  • Ivan Leonardo Albarr

    tengo una duda es la siguiente: como le puedo cambiar el color a la caja que contiene el texto del articulo?

  • Alan Aguirre

    Se puede poner una foto al contenedor?

  • Esteban

    Buenas como podira colocarle un menu a este tipo de pagina? he intentado con varios y se distorciona completamente el formato parallax….

  • Christopher Maxi Pereira

    como hago si modifique el código de una textura, pero esta ya no hace la función de parallax. https://uploads.disquscdn.com/images/d2fbbb58e2a1de3a28f98e49be381f86546c2031a10f0c6c726e6e68ad6d6b1b.png

  • Harvey Herrera

    oye tengo una duda si en mi parallax yo lo quiero hacer responsive para adaptarlo al tamano de cualquier dispositivo

    como seria.?!

  • Miguel Arturo Malaver Fajardo

    Disculpa Falcon siempre lo he admirado eres un excelente bloguero pero en esta oportunidad el fondo no me sale sino blancooo
    la imagen no aparece…

  • distancia2

    pues a mi no me funciona u.u me manda un error en la linea 1 una variable no definida ya hasta copie y pegue el codigo pero me sigue mandando ese error,que podria ser?


Aprende con nuestros cursos

Diseño Web Profesional El Curso Completo, Practico y desde 0

Bienvenido al Curso de Diseño Web, el curso en el que aprenderás paso por paso y desde cero todo lo que necesitas para convertirte en un diseñador web.

Inicia el curso

Bootstrap 4: El Curso Completo, Práctico y Desde Cero

Aprende Bootstrap 4, el framework de diseño web mas importante del mundo.

Inicia el curso
PHP y MYSQL: El Curso Completo, Practico y Desde Cero

PHP y MYSQL: El Curso Completo, Practico y Desde Cero

Aprende a crear cualquier Aplicacion y Sitio Web!. Aprende PHP y MySQL.

Inicia el curso
Escribe CSS como un PRO, Curso Básico de SASS

Escribe CSS como un PRO, Curso Básico de SASS

Optimiza, Organiza y escribe tu código CSS como un profesional con SASS.

Inicia el curso