Youtor
¿Qué es el efecto parallax css ¿Cómo funciona Tutorial con 3 ejemplos 🛠️
YOUR LINK HERE:
http://youtube.com/watch?v=QeRg4t3I2zc
CODEPEN del vídeo: https://codepen.io/animaticss/pen/rNB... • Librerías de JS para ayudarte a crear una animación de parallax: • Rellax.js - https://dixonandmoe.com/rellax/ • Parallax.js - https://matthew.wagerfield.com/parallax/ • SimpleParallax.js - https://simpleparallax.com/ • Scrollmagic.js - https://scrollmagic.io/ • BasicScroll.js - https://basicscroll.electerious.com/ • • Link a la explicación sobre cómo aplica este concepto Disney • • Walt Disney's MultiPlane Camera (Film... • • Link con algo más de teoría sobre este concepto y más ejemplos de parallax usados en diferentes webs. • https://www.ionos.es/digitalguide/pag... • • --------- • ¿Que es el parallax? • • El parallax, o también llamado paralaje, apenas se aprecia, pero ocurre a diario en nuestras vidas y constituye uno de los fundamentos de la percepción espacial. Al mover nuestra visión de un punto a otro, se puede ver cómo cambia la posición relativa de los objetos en el campo de visión. • Los objetos más cercanos se mueven ante los objetos más alejados y los ocultan. • Cuanto más cerca de nuestro punto de vista, más desplazamiento apreciamos en los objetos. • Y cuanto más lejos, menos. • El parallax, en el mundo web, es un recurso para aplicar animaciones a diferentes elementos del documento creando una sensación de profundidad espacial entre los diferentes ítems en un plano bidimensional y este efecto se crea al aprovechar los efectos de la percepción humana. • Se puede aplicar una animación de parallax basada en el scroll de la web, pero también podría ser generado, por ejemplo, en función del movimiento del ratón. • Para explicarte el parallax lo haré con un ejercicio basado en el scroll de la web. • • Es un recurso muy utilizado hoy en día, muchas webs con un buen diseño suelen aplicar animaciones de parallax. • Pero no es un recurso que haya sido creado hace poco, de hecho el concepto de parallax lo inventó Disney para dotar a sus películas de profundidad. • • El parallax también se puede aplicar a imágenes de fondo. • • Hay que tener en cuenta un detalle muy importante, todas las imágenes ocupan el mismo tamaño. • Si nuestro escenario completo ocupa 2000px de ancho y 1000px de alto, las diferentes capas tienen que tener también ese tamaño. • • Recapitulando, • Al moverse un nodo más despacio que el resto, simula estar más lejos de nuestro punto de vista, en cambio al moverse un nodo más deprisa, parece que esté más cerca. • El truco es aplicar diferentes velocidades de desplazamiento según si está el plano más cerca o menos de nosotros. • Aunque como has visto puedes simplemente aplicar una animación de desplazamiento a un nodo para crear el efecto visual aunque la capa esté más lejos que otros nodos, como por ejemplo a imágenes de fondo. • Pero el principio del parallax se basa en que está más cerca y que está más lejos para moverlo con mayor o menor velocidad. • • --------- • Si tienes alguna duda o sugerencia ponla en comentarios. • Además, si usas este tipo de animación en alguna web, añádela en los comentarios también para que pueda verla! • Haré un vídeo enseñando las webs que me enviéis donde uséis esta animación, para dar ejemplos de uso. • • Si te ha gustado la nomenclatura que he usado en el código, se llama BEMIT, y he creado un curso en Udemy donde la explico al detalle. • Por si quieres mejorar tu metodología front end y tener bien organizado tu código • Aquí te dejo un vídeo donde te explico que puedes encontrar en ese curso: • • BEM CSS + ITCSS = Metodología BEMIT -... • • Y aquí te dejo el link al curso! • https://www.udemy.com/course/bem-css-... • • Si te ha gustado el vídeo no olvides reventar el botón de like y suscribirte para no perderte más contenido como este. • Pero sobretodo, comparte este vídeo con tus amigos front end, quizás quieren hacer esta animación en alguna web! • También me puedes seguir por redes sociales donde estaré subiendo contenido. • Nos vemos muy pronto, un fuerte abrazo y a maquetar! • --------- • Soy Ricardo, desarrollador web front end. • Website: https://animaticss.com/ • Instagram: / animaticss • LinkedIn: / ricardo-garcia-llanos • Udemy (curso) - BEM CSS + ITCSS = Metodología BEMIT: https://www.udemy.com/course/bem-css-... • Codepen: https://codepen.io/animaticss/ • -------
#############################
