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
1 |
<div id="contenedor1"></div> |
1 2 3 4 5 6 7 8 9 10 |
#contenedor1{ background: url("../images/espacio1.jpg") fixed; //Imagen de fondo max-height: 100%; height: 400px; //altura del fondo position: relative; margin: 0 auto; padding: 5%; background-size: cover; //ajusta el fondo a la imagen } |
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…
1 2 3 |
<div id="contenedor3"> <h1>Texto de prueba</h1> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#contenedor3 { background: url("../images/espacio3.jpg") fixed; //Imagen de fondo max-height: 100%; height: 400px; //altura del fondo position: relative; margin: 0 auto; padding: 5%; background-size: cover; //ajusta el fondo a la imagen } #contenedor3 h1{ text-align: center; margin-top: 150px; color: #fff!important; } |
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.
1 2 3 4 5 6 |
<div id="contenedor2"> <ul class="scene"> <li class="layer" data-depth="0.30"><img src="images/planeta-grande.png" alt="" /></li> <li class="layer" data-depth="1.00"><img src="images/planeta-pequeño.png" alt="" /></li> </ul> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
#contenedor2 { background: url("../images/espacio2.jpg") fixed; //Imagen de fondo max-height: 100%; height: 400px; //altura del fondo position: relative; margin: 0 auto; padding: 5%; overflow: hidden; background-size: cover; //ajusta el fondo a la imagen } #contenedor2 .scene img { display: block; width: 100%; //evitamos que las imagenes se desborden } #contenedor2 .layer:nth-child(1){ width: 250px; //Modificalo para cambiar el tamaño de la primera imagen de la lista } #contenedor2 .layer:nth-child(2){ width: 100px; //Modificalo para cambiar el tamaño de la segunda imagen de la lista } |
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.
1 2 3 4 5 6 7 |
<div id="contenedor4"> <ul class="scene"> <li class="layer" data-depth="0.30"> <h1>Texto de prueba</h1> </li> </ul> </div> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#contenedor4 { background: url("../images/espacio4.jpg") fixed; //Imagen de fondo max-height: 100%; height: 400px; //altura del fondo position: relative; margin: 0 auto; padding: 5%; background-size: cover; //ajusta el fondo a la imagen } #contenedor4 h1{ text-align: center; margin-top: 150px; color: #fff!important; } |
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.
Hola,
Esta misma tarde te lo vuelvo a resubir, disculpa la tardanza. Esperamos poder ponernos de nuevo a trabajar en la web.
Un saludo.
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!
hola como hago para descargar las fuentes??
Disculpa, el enlace estaba inhabilitado. Ya puedes descargarlas sin problemas!
cual es la llave e cifrado para ver las fuentes??
Disculpa, ya he actualizado el enlace para que no sea necesario!
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?
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!