Como crear efecto parallax con CSS y JS

Con la llegada de los diseños responsive y el afán por la creación de webs dinámicas hemos obtenido distintos efectos que impresionan nada más verlos. Uno de los que más sensación ha creado es el llamado parallax. Este efecto se consigue al mezclar varias capas que se mueven a diferentes velocidades creando así una sensación mucho más dinámica en nuestra web.

En este tutorial os explicaré cuatro pequeños ejemplos de lo que podemos llegar a conseguir con parallax.

 

Demostración Fuentes

Efecto Parallax CSS


Este efecto es el más simple, tan solo debemos agregar la propiedad fixed a nuestro fondo para que se quede fijo y así no haga scroll con nuestra web. Ten en cuenta que para realizar este efecto vamos a utilizar la propiedad background y no img por lo que el código es tan sencillo como crear un div con una imagen de fondo.

 

Efecto Parallax CSS Simple





Lo único que debemos hacer es agregar el div con la clase o id a la que le vayamos a agregar estilos y darle un poco de estilo. Establecemos el fondo con background y le damos el toque de magia que hara que se quede estatico aunque hagamos scroll con fixed, creando el llamado efecto parallax. Una vez hecho esto agregamos las propiedades max-height para establecer el máximo que tendrá nuestra imagen para que no sobrepase el alto que le hemos dado al contenedor con height. Por ultimo utilizamos background-size para que se ajuste la imagen al ancho del contenedor, este y los otras propiedades no son obligatorias pero si recomendadas, si llegaras a tener algún problema con ellas no tengas problemas con eliminarlas.

 

Efecto Parallax CSS con Texto

Es cierto que un parallax con una imagen en si queda bastante agradable a la vista pero hay veces que necesitaremos transmitir algo con palabras. Para ello solo debemos agregar una etiqueta de texto, ya sea cualquiera de los h, span o p…





Una vez tengamos nuestro HTML, lo único que queda es colocar nuestro texto donde más nos guste, en mi caso lo he querido centrar agregando text-align: center y margin-top: 150px, jugando con los margenes podrás colocarlo donde más te convenza. Recuerda que estos ejemplo están hechos en paginas sin estilos heredados por lo que si por alguna razón no te funcionase como debe será que algún estilo de tu web agrega estilos indeseados, para cualquier duda o problema no dudes en comentar.

 

Efecto Parallax JS con Parallax.js


Parallax.js es una fantástica librería creada por Matthew Wagerfield & Claudio Guglieri. Con ella podremos interactuar con el parallax más allá del simple scroll y jugar con la posición de nuestro cursor ¿Qué es lo mejor? Que es totalmente funcional con telefonos moviles y tablets que estén equipados con giroscopio (todos los smartphones) ¿Y para que sirve el giroscopio? Es el encargado de que nuestro smartphone pueda medir y mantener la orientación, por lo que si movemos el movil de de horizontal a vertical por ejemplo, nuestro parallax le seguirá.

 

Efecto Parallax JS Compuesto

En este ejemplo hemos superpuesto dos imágenes a nuestro fondo creando así un efecto de profundidad, obviamente podemos crear ejemplos tan increíbles como el mostrado en la página de sus creadores pero dependerá del efecto que quieras conseguir y el tiempo que tengas disponible para hacerlo.





Para la correcta integración de nuestros dos nuevos elementos será necesario la incorporación de la etiqueta ul y sus correspondientes li, si quieres agregar más objetos superpuestos deberás agregar nuevas etiquetas. Para acelerar o ralentizar la velocidad con la que se mueven los objetos aumenta o disminuye el valor de data-depth.

En cuanto al CSS lo unico a destacar es la incorporación de un width para establecer el ancho de las imagenes y un display: block para mantenerlas dentro de nuestro div.

 

Efecto Parallax JS con Texto

Nos encontramos con exactamente el mismo efecto parallax que nuestro anterior ejemplo, solo que de nuevo le hemos agregado una etiqueta de texto. Tal y como hemos hecho en el ejemplo de Parallax CSS con texto lo único que debemos hacer es alinear el texto donde quieras.





9 Comentarios
  1. Luis 2 años

    Hola, me parece interesantem podrias subir el codigo completo, porque al descargar de la fuente redirecciona a mediafire y lo a eliminado.
    Gracias, un saludo.

    • Imagen de perfil de Abel Cabeza Román Autor

      Hola,

      Esta misma tarde te lo vuelvo a resubir, disculpa la tardanza. Esperamos poder ponernos de nuevo a trabajar en la web.

      Un saludo.

  2. Link 1 año

    En este articulo, vamos a implementar el uso de una sencilla tecnica con la que podremos lograr un efecto muy interesante, parecido al famoso Parallax para nuestras paginas web, y lo mejor es que todo lo lograremos usando solo CSS, sin jQuery o algun otro recurso externo, te vas a sorprender de lo sencillo que es! 

  3. Imagen de perfil de Esteban Salazar Ciro

    hola como hago para descargar las fuentes??

  4. Alfonso 1 año

    cual es la llave e cifrado para ver las fuentes??

  5. Jo 10 meses

    Funciona bien en desktop pero en mi movil android 6.1 con chrome no hace ningún efecto, se ve plano. ¿habrá alguna solución fácil que se aprecie en smartphones?

    • Imagen de perfil de Abel Cabeza Román Autor

      Hola! 🙂

      Es cierto que en móvil no funciona debido a que este no soporta la propiedad “fixed” en el background. Voy a darle una vuelta a ver si consigo encontrar una solución y te comento. En cualquier caso, puedes probar a utilizar la librería que comento en la entrada que es compatible con el estereoscopio de móvil, cosa bastante interesante cuando lo pones en practica.

      Un saludo!

Contesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

©2017 Codictados Comunidad libre para el aprendizaje de codigo Online

o

Inicia Sesión con tu Usuario y Contraseña

o    

¿Olvidó sus datos?