Como hacer el efecto Parallax
Hola jóvenes, hoy les quiero mostrar como hacer el efecto parallax. Quizá algunos lo hayan visto pero no lo conocen por su nombre, así que les mostraré primero qué es el efecto parallax.
Efecto Parallax
Consiste en crear un efecto de profundidad entre el fondo y los elementos de un plano (en este caso, los elementos de la página web). Y se aprecia al mover el scroll. Como ejemplo les muestro estos sitios web que usan el efecto parallax.
Cyclemon
Boy Coy
Rimmel London
¿Cómo se hace?
Bueno, la idea es tener un contenedor que ocupe gran parte de la pantalla, sobre todo el 100% del ancho, y en su CSS colocar lo siguiente:
Esta es una forma sencilla de hacer el efecto, pero si se quiere hacer más, solo hay que jugar moviendo no solo el fondo, sino también los elementos.
Efecto Parallax
Consiste en crear un efecto de profundidad entre el fondo y los elementos de un plano (en este caso, los elementos de la página web). Y se aprecia al mover el scroll. Como ejemplo les muestro estos sitios web que usan el efecto parallax.
Cyclemon
Boy Coy
Rimmel London
¿Cómo se hace?
Bueno, la idea es tener un contenedor que ocupe gran parte de la pantalla, sobre todo el 100% del ancho, y en su CSS colocar lo siguiente:
.class { background-image: url('imagen.jpg'); background-attachment: fixed; }Luego, colocar un archivo javascript con lo siguiente, teniendo jQuery enlazado al documento HTML.
$(document).ready(function(){ $(window).scroll(function(){ var barra = $(window).scrollTop(); var posicion = (barra * 0.15); // Jugar con el valor 0.15 a gusto. $('.class').css({ 'background-position': '0 -' + posicion + 'px' }); }); });En la línea 6, en $('.class') va el mismo nombre de la clase que tiene el contenedor, que sería la misma clase en el documento CSS.
Esta es una forma sencilla de hacer el efecto, pero si se quiere hacer más, solo hay que jugar moviendo no solo el fondo, sino también los elementos.