¿Que es el Parallax Scroll?
Esto seria la definición de un parallax Scroll según la W3 School .
Sin embargo el diseño nunca a sido calificado por tener definiciones exactas, efectivamente el parallax scroll es una tendencia del diseño web, pero, mas allá de esto, el parallax no causa tanto una sensación de delay o retardo en el scrolling (desplazamiento) de la pagina, si no que, al contrario da la sensación que la imagen de fondo utilizada para nuestro parallax scrolling baja junto con nosotros en la pantalla al mismo tiempo hasta que el contenido que este abajo la cubre.
Requisitos para empezar:
Dominio basico-Intermedio de HTML
Dominio basico-Intermedio deCSS
Propiedad Background-CSS
Abrir este link en otra pestaña: Proyecto Move.
Comenzando
Lo Primero que haremos sera explorar el link que les pedí en el 3er requisito. Encontraremos algo como esto:
Si hacemos click en “FullScreen” Podremos ver el proyecto en pantalla completa y observar una aplicación del parallax scroll, también podemos detallar como se ve exactamente este efecto, si quieren pueden explorar esto primero o pueden ir de una vez a “Edit Code” para ir investigando el código fuente del proyecto.
Ya en el código.
Existen 3 partes del código en este proyecto:
El HTML, El CSS, El Javascript, Solo tendremos que investigar en las primeras dos secciones, el HTML y el CSS. Existen 5 Div’s que son netamente hijos de la etiqueta Body, 3 de ellos son los que tienen el parallax Scroll.
El Primero Es el Div de class=”main” en la linea 11 del HTML y Cierra en la linea 21:
Por ahora fijémonos en este, ya que el efecto aplica igual para todos los Div’s y no hace ciencia ver los demás. por ahora solo nos importara la clase para poder ubicarlo en el CSS, el contenido dentro del div puede ser cualquiera, no afecta.
En El CSS solo nos interesa entender de la linea 20 a la 25 :
qué significa esto?
Observamos 4 propiedades veamos que estan haciendo:
text-align: posición : Esta propiedad está afectando el contenido interno del div así que no nos importa mucho por ahora, solo para registro, está manteniendo el contenido dentro del div centrado.
background: url(” el link de la imagen”) no-repeat corte corte acoplamiento : Esta es la propiedad importante del parallax, atención:
no-repeat: evita que la imagen que elegimos de fondo se repita a método de mosaico.
corte corte: hace referencia al corte en el eje X y el eje Y, lo más común es utilizar “center center” como se ve en el código, hace corte a la parte mas central de la imagen.
acoplamiento: en este lugar, ocurre la magia, este es el que diferencia una imagen de fondo común a un fondo con parallax scroll, para lograr el fondo con parallax utilizaremos el acoplamiento “Fixed” como se en el código, significa: fijo, y nos ayuda a que el fondo se mantenga en el nivel de la pantalla.
background-size: tamaño : en este lugar colocas el tamaño que tendrá tu imagen de fondo dentro del mismo div, lo más útil es usar “cover” para que cubra todo el div de la mejor manera posible.
height: Unidad de medida (px, em, rem, etc) : Define el alto de nuestro div, en el caso de este proyecto se usó 600px para hacer el banner notable.
Una Vez que definamos todas estas propiedades a nuestro div u otro elemento que lleve un fondo, siempre y cuando el atachment (acoplamiento) de nuestra imagen de fondo sea “Fixed” obtendremos el efecto de parallax scroll.
Parallax scrolling is a web site trend where the background content (i.e. an image) is moved at a different speed than the foreground content while scrolling.
El desplazamiento de Parallax es una tendencia de sitio web en la que el contenido de fondo (es decir, una imagen) se mueve a una velocidad diferente que el contenido de primer plano mientras se desplaza.
Esto seria la definición de un parallax Scroll según la W3 School .
Sin embargo el diseño nunca a sido calificado por tener definiciones exactas, efectivamente el parallax scroll es una tendencia del diseño web, pero, mas allá de esto, el parallax no causa tanto una sensación de delay o retardo en el scrolling (desplazamiento) de la pagina, si no que, al contrario da la sensación que la imagen de fondo utilizada para nuestro parallax scrolling baja junto con nosotros en la pantalla al mismo tiempo hasta que el contenido que este abajo la cubre.
Requisitos para empezar:
Dominio basico-Intermedio de HTML
Dominio basico-Intermedio deCSS
Propiedad Background-CSS
Abrir este link en otra pestaña: Proyecto Move.
Comenzando
Lo Primero que haremos sera explorar el link que les pedí en el 3er requisito. Encontraremos algo como esto:
Si hacemos click en “FullScreen” Podremos ver el proyecto en pantalla completa y observar una aplicación del parallax scroll, también podemos detallar como se ve exactamente este efecto, si quieren pueden explorar esto primero o pueden ir de una vez a “Edit Code” para ir investigando el código fuente del proyecto.
Ya en el código.
Existen 3 partes del código en este proyecto:
El HTML, El CSS, El Javascript, Solo tendremos que investigar en las primeras dos secciones, el HTML y el CSS. Existen 5 Div’s que son netamente hijos de la etiqueta Body, 3 de ellos son los que tienen el parallax Scroll.
El Primero Es el Div de class=”main” en la linea 11 del HTML y Cierra en la linea 21:
Por ahora fijémonos en este, ya que el efecto aplica igual para todos los Div’s y no hace ciencia ver los demás. por ahora solo nos importara la clase para poder ubicarlo en el CSS, el contenido dentro del div puede ser cualquiera, no afecta.
En El CSS solo nos interesa entender de la linea 20 a la 25 :
20.- .main {
21.- text-align: center;
22.- background: url("https://s3.amazonaws.com/codecademy-content/projects/2/move/bg.jpg") no-repeat center center fixed;
23.- background-size: cover;
24.- height: 600px;
25.- }
qué significa esto?
Observamos 4 propiedades veamos que estan haciendo:
text-align: posición : Esta propiedad está afectando el contenido interno del div así que no nos importa mucho por ahora, solo para registro, está manteniendo el contenido dentro del div centrado.
background: url(” el link de la imagen”) no-repeat corte corte acoplamiento : Esta es la propiedad importante del parallax, atención:
no-repeat: evita que la imagen que elegimos de fondo se repita a método de mosaico.
corte corte: hace referencia al corte en el eje X y el eje Y, lo más común es utilizar “center center” como se ve en el código, hace corte a la parte mas central de la imagen.
acoplamiento: en este lugar, ocurre la magia, este es el que diferencia una imagen de fondo común a un fondo con parallax scroll, para lograr el fondo con parallax utilizaremos el acoplamiento “Fixed” como se en el código, significa: fijo, y nos ayuda a que el fondo se mantenga en el nivel de la pantalla.
background-size: tamaño : en este lugar colocas el tamaño que tendrá tu imagen de fondo dentro del mismo div, lo más útil es usar “cover” para que cubra todo el div de la mejor manera posible.
height: Unidad de medida (px, em, rem, etc) : Define el alto de nuestro div, en el caso de este proyecto se usó 600px para hacer el banner notable.
Una Vez que definamos todas estas propiedades a nuestro div u otro elemento que lleve un fondo, siempre y cuando el atachment (acoplamiento) de nuestra imagen de fondo sea “Fixed” obtendremos el efecto de parallax scroll.
Espero haya sido de utilidad, Puedes dejar un comentario abajo, siéntete libre.