Animación de GSAP

1. INTRODUCCIÓN: Hola a todos. Bienvenido a GSAP Animation Viaje de Principiante a Avance. Soy Únete al atajo, desarrollador web FooStac, programador Python y un instructor apasionado por dar vida a la animación web Si alguna vez te ha fascinado la transición suave, los efectos llamativos o la introducción dinámica de la página, entonces este curso es para ti Ahora la pregunta es ¿por qué eliges la animación SAP? plataforma Grinsoc Animation o SAP es una de las librerías JavaScript más potentes para la animación web Te permite crear una impresionante animación web con facilidad, ya sea simple fade o leve, de lo contrario, animación compleja de desplazamiento tiggered. A diferencia de la animación CSS, GSP ofrece más control, mejor rendimiento y un sinfín de posibilidades Ahora hablemos de lo que aprenderás de ello. A lo largo de este curso, exploraremos todo, desde la animación básica de gap hasta la secuencia de movimiento avanzada, animaciones SVG y efectos basados en scroll. Vamos a aprender sobre líneas de tiempo, scroll de TigeredPath Al final, podrás crear animación de grado profesional. Eso llevará tu sitio web y proyectos al siguiente nivel. No importa si eres principiante o ya estás familiarizado con los principios de animación. Yo te guiaré paso a paso. Si hablo de los proyectos que voy a cubrir en este tutorial, vamos a construir animación de curor personalizada, animación de Vigi de cadena Elastric, proyecto de animación de línea de tiempo, animación de texto y animación de texto de desplazamiento Después de eso, después de eso, voy a crear un diseño de ritmo de aterrizaje. Además, voy a cob animación de trayectoria de movimiento, más animación SVG, y muchas más. De vez en cuando, voy a agregar nuevo proyecto en nuestra clase. Comencemos y llevemos el diseño al directo con SA. 2. Qué es la animación de GSAP: Hola, y bienvenidos al curso de Mastering SAP Animation. Mi nombre es Joana Shortca. Soy Desarrollador Web Full Stack e instructor en línea. Utilizamos SAP Library para la animación web. En este curso, vamos a aprender muchas cosas sobre la animación SAP con grandes detalles. Y me aseguraré de que disfrutes de todo el proceso. Ahora, veamos qué es la animación JSAP. Básicamente, JSAP es una biblioteca de animación JavaScript. Quiero decir que es una biblioteca de animación preconstruida, cual está hecha por JavaScript. Ahora la pregunta es, ¿qué es la animación? ¿Qué tipo de animación? Quiero decir la animación web. Sea cual sea el movimiento que veas en tu página web, está hecho con animación. Cualquier tipo de transiciones son animaciones, y la animación web nos ayuda a interactuar con el usuario, y también mejora la experiencia del usuario, y también los usuarios pasan una buena cantidad de tiempo en su página web. Entonces ese es el beneficio de usar animación en nuestras páginas web. Pero, ¿qué es exactamente JSAP? Como te dije, SAP es una biblioteca JavaScript, y su forma completa es la plataforma Greensok Animation Se trata de una biblioteca JavaScript que nos ayuda a realizar una animación compleja en nuestra página web. Con la ayuda de SAP, necesitamos escribir poca cantidad de código para crear una hermosa animaciones web. Nos proporciona más característica con menos código. Si no tienes conocimientos previos sobre JavaScript, también puedes aprender animación JSAP Pero es bueno, si tienes conocimiento de JavaScript Dom document object model. Y si no tienes ningún conocimiento sobre CSS y TML, entonces este curso no es para ti No es para los principiantes. Ahora, saltemos al sitio web oficial de animación SAP. Este es el sitio web oficial de la animación GSAP, sap.com. Si haces clic en este sitio web, aquí puedes notar algunas animaciones. Si haces clic en este enlace, puedes notar algunos ejemplos de animación. Como puedes ver, estas son todas las animaciones creadas por GSAP Además, es el sitio web oficial. Si me desplazo un poco hacia abajo, aquí puedes ver muchas animaciones SVG, animación de cambio de forma, animaciones de efectos de texto, luego animación de disparo de desplazamiento. Entonces como pueden ver, cuando me desplace por esta página, en esa sección, esta área se mueve de lado Además, realiza algunas animaciones hermosas. Podemos aplicar efectos de flexibilización y muchos más. Hay muchas cosas que podemos hacer con la animación GSAP, como animaciones escolares, AVG, animaciones de texto, interacciones de interfaz y otras animaciones avanzadas Usando JSAP podemos realizar scroll trigger, scroll más suave, scroll through Además, en la selección SVG, podemos usar SVG morph como cambio de forma, dibujo SVG, animación trayectoria de movimiento SBC y muchos Luego, para la interfaz de usuario, podemos aprender, voltear, dividir texto , arrastrar, y para el texto, podemos usar texto dividido , revolver texto y muchos más Lo vamos a aprender todo en nuestros próximos tutoriales. Este curso es paquete completo de animación SAP. Y si quieres ver más ejemplos, en ese caso, necesitas dar click en Showcase. Aquí puedes ver cientos de sitios web que están hechos con animación GAP. Si me desplazo un poco hacia abajo, también, estos están ordenados por tipo de animación como animación tres gs, animación SVG, animación de texto, animación escolar, wave flow react y WebGL En este tutorial, básicamente, vamos a centrarnos en los conceptos de código JSAP Además, vas a aprender animación SVG, animación pixed, animación scrol e interacciones de interfaz Ahora podrías haber cuestionado cómo podemos implementar la animación SAP en nuestras páginas web. Para eso, puedes buscar el enlace CRL. Así que aquí puedes buscar CRN Link en Google. Entonces tipo G SAP Sirio. Como puede ver, proporciona un sitio web llamado cinjs.com. Si abro este sitio web, y aquí se pueden ver todas las animaciones SP relacionadas con los sirios SP relacionadas con Este es el Can principal sobre animación SP, y estas son las bibliotecas soportadas sobre animación SAP, como sleep, motion path, plugin, scroll trigger, text plugin. Lo vamos a aprender todo en nuestros próximos tutoriales. No te preocupes por ello. De esa sección, se pueden encontrar todos los CENS importantes Además, puedes saltar a la sección doc de este sitio web. También puedes encontrar el enlace de CDN desde este sitio web. Si eliges la sección de instalación, de esa sección, puedes encontrar cómo puedes instalarla usando NPM, nota gestor de empaque También puedes encontrar el enlace CDN de esta biblioteca. Además, si tenías conocimientos sobre RN, puedes implementarlo. Entonces en este tutorial, básicamente, nos vamos a centrar en el MDL Ahora, déjame mostrarte algún proyecto lo que vamos a construir en esta serie. 3. Implementación de animación de GSAP: Entonces este es el primer tutorial relacionado con la animación SP. En este tutorial, vamos a aprender cómo podemos implementar la animación JSP en nuestra página web Además, voy a explicar desde y hacia la palabra clave en la animación JSP Entonces, hagamos acrobacias a la táctica. Entonces, como puedes ver en mi directorio de trabajo actual, solo tenemos el archivo TML de punto índice Ahora voy a crear un archivo JavaScript, Tipo de sonido app punto Js. Y voy a darle a Enter. Y ahora voy a vincular este archivo JavaScript en mi documento TML Entonces aquí voy a usar la etiqueta Script. Fuente fuente de script igual a app dot js. Voy a establecer este archivo. Y puedes tomar cualquier nombre para tu archivo JavaScript. No es obligatorio usar app dot js. Puedes usar script doot js, hm doj, ht dogs Todo se trata de ti. Ahora, volvamos a la página del documento. Después de abrir la sección de documentación, debe hacer clic en la opción desplegable Instalar De lo contrario, puedes buscar Instalar. Voy a dar click en esta sección Instalar, y aquí proporciona todo tipo de método de instalación. Usando NPM note package manager, también puedes usar CEN, red de entrega de contenido, también proporcionar R. La mejor y más fácil manera de usar esta animación es CIN Y este es tu enlace CEN proporcionado por JSAP Estoy para copiar este enlace y volver a mi editor de bacalao de estudio Wizar Y lo voy a pegar antes de la app dot js script tag. Y voy a poner este archivo. Utilice siempre su archivo JS personalizado debajo del archivo fuente. Porque primero, tu navegador debe tener conocimiento sobre JSAP Entonces puede llamar fácilmente a las funciones en su archivo JS personalizado. Y ahora vamos a experimentar con poca animación Además, podemos crear esta animación usando CSS, pero aquí no vamos a usar CSS. Entonces, implementemos la animación de la aplicación GSO. Entonces en nuestra etiqueta corporal, primero, voy a crear una etiqueta profunda, Dev dot box. Aquí creé etiqueta profunda con cuadro de nombre de clase. Y entonces voy a darle estilo a esta caja un poco. Déjame mostrarte. Entonces voy a usar etiqueta de estilo. Estilo y dentro de la etiqueta de estilo, voy a seleccionar la caja, punto, caja, luego dentro del Carli resiste, primera propiedad voy a usar hierba Y aquí, voy a decir con 200 píxeles. Además, voy a decir altura, altura, 200 píxeles. Básicamente, voy a crear una caja cuadrada. Y luego lo voy a decir de fondo. Fondo, y podría ser de cualquier color. Por ahora, voy a usar el color rojo porque el color rojo es mucho más visible. Y voy a poner este archivo. Después de establecer este archivo, aquí puedes ver el resultado. Así que hicimos nuestra parte DML y CSS. Vamos a saltar al archivo JS punto de la aplicación, animación greensock. ¿Te acordaste en nuestros tutoriales anteriores, aprendemos sobre dos y de. Supongamos que quiero mover esta caja en dirección XSS. Quiero moverlo 100 pixel en exceso de dirección. Por ahora, la posición de esta caja S es cero, y quiero moverla cien píxeles. Si quieres pasar de cero a 100, entonces necesitas usar dos. Y si quieres volver a mover 100 a cero, entonces necesitas usar de. Solo necesitas recordar el concepto básico al respecto. Básicamente en GsAb utilizamos este método dos para realizar nuestra animación hacia y desde Sin esto, hay otro método llamado de dos, pero no voy a discutirlo en estos dos. Ahora, tratemos de entender cómo funciona. Supongamos que esta es nuestra ventana donde voy a realizar la animación, y aquí colocamos un elemento y es la posición inicial de este elemento. Ahora quiero mover este elemento en dirección sobrante en esta dirección. También, quiero escalar este elemento, algo así. Y durante esta traducción, quiero animar este elemento Y esta es la posición final de esta animación. Y si quieres animar este elemento desde la posición inicial hasta la posición final, necesitas usar esta metanfetamina, Gs dos metanfetamina Y si quieres revertirlo, quiero decir, si quieres ejecutar la animación desde la posición final a la posición inicial, en ese caso, necesitas usar from método. Entonces, si ejecutamos esta animación usando dos métodos, va a trabajar este objeto desde esta posición a esta posición y también va a escalar este elemento. Y si usamos from método usando la misma propiedad, entonces va a hacer lo contrario. Se va a trabajar este objeto, posición final a posición inicial. Quiero decir que va a ejecutar la animación en dirección opuesta. Ese es el uso principal de este método dos. Así que vamos a volver a ver el código de estudio de los errores. Empecemos el código para despejar el concepto. Entonces aquí, voy a empatar a Gs. GsApt vamos a usar dos funciones. Para. Luego dentro de la base redonda, es necesario mencionar este selector, qué elemento desea seleccionar. Voy a seleccionar esta casilla usando su nombre de clase. Entonces dentro de los códigos dobles, voy a escribir punto box. Entonces coma. Siguiente línea, voy a usar Calibrasis y aquí hay que mencionar ¿qué queremos hacer con esta caja Quiero mover esta caja en dirección Xxs. Pasaría X, colon, y voy a moverlo hasta 300 píxeles. Y antes de configurar este archivo, si te muestro mi archivo de estimación de punto índice, y si te muestro mi sección de estilo, y como puedes ver en mi sección de estilo, no usamos ninguna animación. Después de configurar este archivo, como pueden ver, no está funcionando mis autos porque mi autosaon reemplazó esta palabra clave con esta Entonces nuevamente, necesitamos reemplazarlo por GSAP. Sí. Y voy a poner este archivo. Arriba para configurar este archivo, como puedes ver, se mueve el elemento de esta posición a esta posición en la dirección de X. Ahora, déjame explicarte lo que está pasando detrás de escena. Así que vamos a inspeccionar esta sección y primero, voy a desmarcar esta opción y luego y después voy a seleccionar este elemento, y aquí voy a abrir mi sesión de estilo Como puedes ver en esta sesión de estilo, como puedes ver en esta sección de estilo, Corazón usa transformar probidad, transformar, traducir 300 píxeles Entonces detrás de escena, GSAP usa esta probidad CSS para mover este elemento Permítanme aclarar el concepto. Voy a extender el valor. Voy a hacer 500. Esta vez lo voy a mover 500 píxeles. Si configuro este archivo, aquí se puede ver ahora transformar traducir el valor es XXs posición 500 pixel y posición YxS sigue siendo cero Debido a que no movemos este elemento en dirección YxS, por eso está establecido y cero Así que la estructura central hecha con CSS. Para este tutorial, creo que el servidor en vivo no es obligatorio, así que voy a apagar el servidor en vivo. Y por ahora, voy a abrir el archivo HTML index dot de nuestro directorio. Entonces como pueden ver, esta vez abro este archivo desde mi directorio, no voy a usar ningún servidor en vivo. Entonces, si vuelvo a cargar este navegador, puedes ver la animación Puedes experimentar esta animación. Si uso el servidor en vivo, entonces no está funcionando tan bien. Entonces por ahora, si vuelvo a cargar este navegador, como lo pueden ver moviéndose tan rápido, así que voy a establecer algo de duración Entonces aquí, voy a usar coma. Entonces voy a usar la duración de la llamada a la propiedad. Duración, colon, por ahora, voy a fijar cinco segundos. Y voy a poner este archivo. Después de configurar este archivo, si vuelvo a cargar este navegador, ahora puedes ver que nuestra animación tarda cinco segundos en completarlo Si lo vuelvo a cargar, aquí puedes notar de vez cuando aumenta nuestro valor de Ss Básicamente, cambia la propiedad CSS según la duración. Y si quieres ejecutar esta animación después de 2 segundos, sí, puedes usar delay. Simplemente introduce Coma, entonces necesitas escribir delay. Retraso, dos puntos, y quiero dos segundos de retraso. Si configuro este archivo y premio mi navegador, como pueden ver, después de 2 segundos, es comenzar nuestra animación. Entonces, para que esta animación suceda, no necesitamos escribir una gran cantidad de código CSS p en nuestra sección CSS Solo queremos usar esta cantidad de código si usamos GSAP Library A continuación, voy a mover esta caja en dirección YxS. Entonces aquí, voy a escribir Y, dos puntos, y desde dirección YX, quiero moverlo 300 pixel Si configuro este archivo y vuelvo a cargar mi navegador, como pueden ver, después de esperar dos segundos, después de esperar dos segundos, XXs también mueven la dicción YxS Al mismo tiempo, si deseas cambiar el color de fondo, puedes usar esta propiedad. Supongamos que quiero cambiar el fondo, así que voy a tomar propiedad de fondo. Color de fondo. Colón, y quiero decirlo de color verde. Color de fondo verde. Y luego voy a poner este archivo. Arriba para configurar este archivo, voy a recargar el navegador. Arriba para configurar este archivo, como pueden ver, no está funcionando porque creo que hice algunas faltas. Tenemos que proporcionar este valor es una rueda de cuerda así que necesito proporcionar este valor dentro de la cotización. Entonces voy a usar comillas simples. Así que de nuevo, voy a configurar este archivo y reescribir mi navegador Después de rojo mi navegador, después de escribir pero dos segundos, como puedes ver, inicia la animación y además cambió el color de fondo de este elemento profundo. Por ahora, voy a reducir la duración. Voy a hacer dos segundos. Además, voy a eliminar delay y volver a configurar este archivo. Como pueden ver, ahora se volvió de rojo a verde. Y recuerda, en CSS, usamos propiedad de fondo como esta. Guión de fondo coloreado. Pero en JavaScript, no usamos propiedades de fondo como esta. Aquí utilizamos el pedido de estuche camel. Como puedes ver, nuestros personajes C comienzan con estuche camel. Por lo que usamos estuche de camello. En Java script. Aquí se puede utilizar con propiedad de altura. También escala propiedad. Supongamos que quiero escalar este elemento. Entonces escala de tipo héroe. Escala, y quiero escalarlo hasta dos veces luego coma. Ahora bien, si ejecuto esta animación, va a extender este elemento al tiempo. Déjame mostrarte. Entonces, para ejecutar esta animación, como pueden ver, se extiende el tamaño de esta caja. Ahora se ha convertido en 400 píxeles en Xxs y 400 píxeles en YxS. No sólo eso puedes establecer ancho y alto, déjame mostrarte. Así que de nuevo voy a sub este archivo y mi navegador, y esta vez, voy a establecer ancho. Nosotros y aquí voy a establecer ancho 100 pixel. Básicamente, si configuro este archivo y ejecuto esta animación, va a reducir el ancho del elemento porque por defecto, nuestro ancho de elemento es de 200 píxeles. Entonces si relaciono esta animación, como pueden ver, reduce el ancho de este elemento. Así como se puede ver usando dos métodos, podemos mover el elemento de la posición inicial a la posición final. Pero podemos hacer lo contrario usando el método from. Si reemplazo dos con from y luego configuro este archivo y recargo mi navegador Veamos qué va a regresar. Esta vez, se puede ver que hace lo contrario. Ahora se puede ver cada vez que leo mi navegador, él, se mueve la posición final a la posición inicial. Y también, puedes notar que aumenta el ancho y cambia el color de nuevo al estado inicial. Entonces esto es lo que podemos hacer con el método de desde y hacia. Así que gracias por ver este video Situe para nuestro próximo tutorial 4. Propiedades y método de animación de GSAP: Oigan, chicos, me alegro de volver a verles. Este es otro tutorial relacionado con animación calcetín verde. En nuestro tutorial anterior, creamos esta animación básica usando GSOC Si vuelvo a cargar esta página, como pueden ver, esta es nuestra animación Tardó 2 segundos en completar la animación. Además, redujo el ancho de este elemento. Con eso, también cambia el color de fondo de este elemento, rojo a verde. Y ahora te voy a mostrar cómo puedes rotar este elemento. Entonces por ahora, voy a comentar esta línea con. Entonces voy a usar otra propiedad llamada rotate. Rotar y quiero rotarlo 360 dieno Si configuro este archivo y cargo mi navegador, puedes ver el resultado Podemos hacer todas estas cosas usando propiedad CSS en la animación GSP En el futuro, vamos a aplicar esta animación con eventos. Por eso JavaScript es importante. Y ahora vamos a saltar de nuevo a la función from. Ahora voy a comentar todas las líneas. Entonces voy a llamar desde la función. Así que de nuevo, voy a escribir G GsApt otra vez, mi autosuggst reemplaza mi Entonces voy a escribir JSAP Mnuali. SAP punto de. Después dentro de la hierba redonda. Al principio, voy a seleccionar el elemento box. Caja de puntos. En la siguiente línea, voy a usar alias. Dentro de la Cali resis necesitamos definir nuestras propiedades y valores, y voy a aplicar exactamente las mismas propiedades. Entonces aquí estoy tipo X. El valor X es 500. El valor de Y es 300. A continuación, voy a pasar valor arraigado. Valor Rotd Voy a aplicar 360 grados. Siguiente valor voy a decir duración. Duración, y voy a correr dos segundos. A continuación, voy a aplicar color de fondo. Color de fondo. Color de fondo, voy a aplicar en el código único verde. Y quiero establecer este archivo. Entonces básicamente, aplico las mismas propiedades que aplico en mis dos funciones. Si descargo mi navegador, ahora puedes entender cuál es la diferencia entre dos y de función Cuando utilizo dos funciones, movió el elemento desde el origen. Pero cuando aplicamos desde la función, entonces vuelve a su lugar de origen. Entonces si vuelvo a cargar mi navegador, como pueden ver, vuelve al lugar de origen Si vuelvo a cargar mi navegador, como pueden ver, vuelve a la posición de origen Entonces esa es la diferencia básica entre dos y de función. Si notas puedes verla convertida en color verde a rojo. Además, gira en sentido opuesto. Ahora hablemos de propiedad repetida. Si desea repetir esta animación varias veces, entonces necesita usar esta propiedad. Entonces su tipo, repita. Repito, y voy a decir repetir tres veces. Si vuelvo a cargar mi navegador, va a repetir esta animación en total cuatro veces Porque por defecto, va a ejecutar nuestra animación una vez, luego va a repetir la animación tres veces. Déjame mostrarte. Entonces voy a recargar mi navegador Después de cargar mi navegador, como pueden ver, va a repetir esta animación en total cuatro veces. Y ahora, si quieres repetirlo tiempo infinito para eso, puedes usar menos un valor. Si configuro este archivo y vuelvo a cargar mi navegador, como pueden ver, va a ejecutar nuestra animación en tiempo finito No va a parar hasta que cambie el valor. Entonces por ahora, voy a cambiar el valor, repita. Cero, y voy a poner este archivo. Después de configurar este archivo, voy a recargar mi navegador. Por lo que esta vez ejecuta la animación sólo por una vez, pero no la repita. Y ahora voy a aplicar Efecto UU. Como puedes notar, nuestra animación se mueve solo en una dirección. Pero si golpeamos una pelota en un suelo, rebota hacia atrás. Quiero que vaya recto y vuelva. Para eso, necesitamos usar una propiedad llamar UU. Entonces, para escribir Yu Yu. Voy a pasar verdad. Cierto. Entonces voy a repetir esta animación. Cuarta ocasión. Quiero sub este archivo. Si vuelvo a cargar el navegador, puedes ver el efecto U. Ahora es trabajo como UU Si hago cierto este valor, entonces avanza y retrocede. Se irá una vez y volverá. Y si paso repetir valor infinito, entonces tiempo infinito, va a hacer lo mismo. No sólo eso, también se puede aplicar la misma propiedad en esta función dos. Entonces te va a proporcionar el mismo efecto, pero la diferencia es si usamos dos funciones, entonces este elemento no vuelve a la o está en posición. Me detengo en la posición de destino en ese lugar. Ahora volvamos a la página índice dotest. Como pueden ver, ahora solo tenemos un elemento profundo, pero voy a conseguir esta línea en total tres veces. Ahora tenemos un total de cuatro elementos profundos. Además, voy a comentar algunas propiedades en mi app dot js function. Primero, voy a quitar la función de rotar. Entonces quiero moverlo sólo en la dirección de X. A continuación, voy a eliminar el valor de repetición. Además, voy a comentar el valor de la EUO. Entonces quiero configurar este archivo. Luego volvamos a la página de ATL y reducir el tamaño de esta caja Esta vez, voy a hacer que sea 100 píxeles de ancho por 100 píxeles. Si configuro este archivo y vuelvo a cargar mi navegador, va a aplicar toda la animación de animación, todo el elemento deep porque su clase es la misma Demos un pequeño margen entre ellos. Margen Cinco píxeles. Y voy a poner este archivo. Después de configurar este archivo, si leo mi navegador, ahora se puede ver la brecha entre ellos. Y ahora voy a cambiar el nombre de la clase todos estos elementos. Esta es la caja uno. Esta es la casilla número dos. Esta es la casilla número tres, y esta es la casilla número cuatro. Y voy a poner este archivo. Ahora, volvamos al archivo dot js de la aplicación. Entonces esta es la casilla número uno. Primero, voy a cambiar el estilo de animación. Voy a usar dos funciones. Esta app dos. Entonces voy a duplicar esta sección varias veces. Básicamente voy a eliminar todas estas líneas comentadas. No lo necesito. Entonces voy a duplicar esta sección total tres veces. Esta es la casilla número dos. Esta es la casilla número tres. Lo siento, este es el número de caja. Esta es la casilla número tres y la última es la casilla número cuatro. Si configuro este archivo y reescribí mi navegador, va a devolver el mismo resultado Vaya, necesitamos hacer cambios en nuestra sección de estilo de archivo HTML de índice Aquí voy a apuntar a todo el elemento DV a vez porque cambio porque a partir de aquí, cambio los nombres de las clases. Entonces voy a pasar el elemento nombre de la etiqueta nombre D. Y establecer este archivo. Si borro mi navegador, ustedes ven el resultado. Ahora, todos los elementos completan la animación al mismo tiempo. Pero ahora quiero correr segundo número después del primer número. Quiero decir después de ejecutar la animación del primer elemento, quiero un poco de retraso para el segundo elemento. Para eso, aquí voy a usar otra propiedad llamada delay. Entonces en nuestra caja dos, voy a usar la propiedad delay. Retraso, y quiero retrasarlo hasta 2 segundos. Vaya, el retraso ortográfico está mal, DEAY. Así que quiero volver a configurar este archivo y volver a cargar mi navegador. Después de volver a cargar mi navegador, como pueden ver, después de dos segundos de retraso, ejecuta nuestra animación Entonces, uno por uno, puedes retrasar la animación. Supongamos que para tercer elemento, quiero retrasarlo hasta cuatro segundos. Entonces para el cuarto elemento, quiero retrasarlo hasta seis segundos. Así que de nuevo, voy a configurar este archivo y volver a cargar mi navegador Después de cargar mi navegador, después de completarlo, está esperando dos segundos, luego va a funcionar uno por uno. Ahora el problema es que necesitas seleccionar todas las casillas una por una. Además, es necesario aplicar delay multiple time. Pero los greensock tienen esta solución para esto. Entonces voy a comentar toda la línea excepto la primera. Después duplico el primero y comento este duplicado. Y esta vez, voy a seleccionar todas las casillas a la vez, así que voy a quitar la caja uno. Además, necesitamos hacer cambios en nuestro archivo estable. Ahora otra vez, voy a cambiar todo el nombre de la clase. De lo contrario, también podemos agregar otro cuadro de nombre de clase. Entonces aquí voy a agregar caja. Caja. Voy a establecer este archivo. Básicamente, aquí utilizamos múltiples vidrios al mismo elemento. Ahora, volvamos al archivo js de la aplicación. Ahora voy a aplicar el mismo retraso en mi animación. Para eso, necesito usar una propiedad llamada Stagger, STAGER Stagger, y voy a establecer seis Com. Entonces voy a configurar este archivo. Después de configurar este archivo, voy a recargar mi navegador. Como puedes ver, después de completar el primero, luego correr el segundo. Entonces después de completar el segundo, entonces va a correr el tercero. la misma manera, después de completar el tercero, entonces va a correr el cuarto. Si reduzco el valor de la daga, si lo hago cuatro y luego pongo este archivo, ahora va a hacer lo mismo un poco más rápido Entonces después de completar el primero, va a correr el segundo. Entonces va a correr el tercero. Por fin, va a correr el cuarto. Y si reduzco más este valor de daga, si lo hago 1 segundo, uno y luego configuro este archivo y cargo mi navegador, ahora se puede ver después de 1 segundo, va a ejecutar toda la animación una por una Ahora no necesitamos escribir esta cantidad de código para obtener el resultado. Sólo una propiedad y valor hacen lo mismo. No necesitamos crear animaciones individuales para eso. La ayuda hasta el valor de Stagger, puede definir el tiempo de retardo entre las animaciones Escalonar el valor va a gestionar sus retrasos individuales. Si abres la documentación de esta animación GSP y buscas dos funciones GSAP para funcionar Y si abres esta sección, aquí podrás ver el uso de estas propiedades especiales. Se puede ver retraso de datos, duración, es, ID, perezoso. Hay muchas propiedades relacionadas con la función, y puedes usar todas ellas. Después de desplazarse un poco hacia abajo esta página, aquí se puede ver la propiedad stagger Y desde esta sección, se puede leer la documentación sobre la propiedad stagger documentación oficial es la mejor manera de aprender algo. Siempre te da la respuesta correcta y al día. Se puede leer sobre propiedad U, UE, fotogramas clave, etcétera. En nuestro primer tutorial y el segundo tutorial, solo trato de introducir cómo podemos usar la animación GSP y cuáles son las propiedades Apenas aprendemos sobre el proceso de trabajo de la animación GSP. partir del siguiente tutorial, vamos a aprender sobre las líneas de tiempo Entonces esto es todo para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 5. Cómo usar el disparador de desplazamiento, parte 1: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con la animación GSAP Y hoy en esta sección, vamos a aprender el gatillo de desplazamiento. Es una de las características más importantes de la animación GSAP En esa sección, vamos a aprender cómo podemos desencadenar nuestra animación en cierto punto. Como pueden ver, si me desplazo hacia abajo en esta página, ahora pueden ver cuando nuestro interruptor de gatillo, este es nuestro interruptor de gatillo, cruzo la sección de inicio del desplazador, entonces va a iniciar nuestra animación en segunda página Déjame mostrarte. Entonces cuando me desplazo hacia abajo esta página y cuando cruzó esta sección, ahora puedes ver que activó esta animación. Entonces esto es lo que podemos hacer con el disparador de Scroll. Entonces veamos cómo podemos aplicar disparador Scroll en nuestras páginas web. Así que vamos a saltar al visor Editor de código de Studio. Entonces finalmente, estamos en mi visor Studio editor de código, y como puedes ver en mi directorio de trabajo actual, tenemos un total de tres archivos, index dot TML, script dot js y estilo CSS Y ya creo el boilerplate para STML. Después al principio, voy a vincular el archivo CSS con este documento TML Entonces Hemotype link y voy a pasar el Film style dot css Y también, necesitamos inicializar script dot js file con este documento Por lo tanto, escriba la etiqueta script. Script, y dentro de la fuente, isRC voy a pasar el nombre del archivo JavaScript, que es script dot js, este Voy a establecer este archivo. Después de eso, voy a saltar al estilo de archivo CSS CSS punto, y aquí, voy a escribir la placa caldera para el archivo CSS. Entonces voy a escribir iniciar el selector universal. Entonces dentro del Cariass lo voy a decir fusionando Zero. Entonces voy a decir relleno, también cero. Después de eso, tenemos que decir dimensionamiento de cajas, dimensionamiento de cajas, y aquí voy a usar border box. Entonces si quieres seleccionar alguna fuente, sí, puedes. Por ahora, voy a seleccionar familia de fuentes, y voy a usar la fuente Aerial. Puedes usar lo que quieras. Después voy a seleccionar la etiqueta ML, HTL. Con eso, también, voy a seleccionar body tag. Cuerpo, luego dentro de los alias. Aquí voy a escribir altura. Voy a establecer la altura. Voy a establecer la altura al 100%. A continuación, voy a decir hierba. También voy a fijarnos al 100%. Ahora volvamos a la página TML del punto índice. Y dentro de la etiqueta body, primero, voy a crear una etiqueta profunda, etiqueta DH, y voy a decirlo ID, página uno, página uno. De la misma manera, voy a crear otras dos páginas. Entonces duplico esta sección a tiempo. Esta es la página número dos. Y esta es la página número tres. Entonces, como puedes ver, aquí creamos un total de tres páginas, página uno, página dos y página tres. Ahora, vamos a poner en mosaico toda esta página. Así que vamos a saltar al archivo CSS de puntos de mosaico. Y aquí, voy a escribir página, hashtag, página uno, dentro del receso de color. Voy a decir que es altura. Estoy para decirlo altura, al 100%. También, voy a decir mié al cien por ciento, y después voy a agregar un color de fondo. Color de fondo, y voy a usar color azul claro. Azul claro, éste. Ahora, abramos la página y veamos qué va a crear. Entonces aquí abro esta página sin Live Server. Como puedes ver, esta es nuestra primera página con color azul claro. Esta es la página uno. De la misma manera, voy a darle estilo a otras páginas. Así que vamos a llegar al código de Visual Studio. Entonces voy a duplicar esta sección dos veces. Esto es para la página dos, y voy a cambiar el color. Voy a cambiar el color diagraund, y voy a hacerlo un poco más oscuro Esta cantidad de oscuridad. De la misma manera, voy a darle estilo a la página tres. Al principio, voy a cambiar el nombre de identificación, página tres. Entonces voy a seleccionar esta cantidad de sombra oscura, esta cantidad de color. Voy a establecer este archivo. Después configuré este archivo, si llego a mi navegador y vuelvo a cargar esta página, ahora puedes ver que tenemos un total tres páginas diferentes con diferente color Esta es la página uno, esta es página dos, y esta es la página tres. Vamos a crear la página tres más oscura. Vamos d al código de estudio y voy a hacerlo más oscuro. Creo que esta es buena. Voy a volver a configurar este archivo. Vamos d al navegador y voy a recargar este archivo. Ahora puedes diferenciar ambas páginas. El color es diferente. Así que bien, está claro para usted cómo creamos ejecutar tres páginas diferentes y les damos estilo a estas páginas. Ahora, volvamos a la estimación del punto índice cinco. Ahora dentro de la primera página, voy a crear un elemento D con Dame box Stil D tiene etiqueta, y nuestro DM es caja Y esta es la caja uno. Además, voy a asignar una caja de clase clase. Entonces voy a crear las mismas cajas en nuestras otras páginas. Entonces para copiar esta sección y la voy a pegar aquí. Esto es para la página dos, y esta es para la página tres, pero voy a cambiar el nombre de identificación. Esta es la caja tres, y esta es la caja dos. Y voy a poner este archivo. Y luego voy a darle estilo a esta caja. Entonces voy a usar su cuadro de nombre de clase. Así que vamos a saltar al archivo CSS de estilo, y aquí voy a estilo de cuadro de puntos. Entra en el alias. Primero, voy a decir altura, altura, y voy a hacer que sea de 300 píxeles. Y luego voy a decir Con. Para Con, también, voy a usar 300 píxeles y para el color de fondo color de fondo, aquí lo voy a poner carmesí Éste, y voy a poner este archivo. Ahora, volvamos al navegador. Y si vuelvo a cargar este navegador, como puedes ver, como puedes ver en nuestra primera página, crea una caja Además, crea la caja en nuestra segunda página y en nuestra tercera página. Y ahora necesitamos alinear esta casilla, centro de esta página. Para eso, vamos al código de estudio de usuario y dentro de nuestra página uno, voy a usar display probiity, display, y voy a usar display flick Entonces Hemo escribe en alinear el centro del artículo. También, necesitamos justificar el contenido, justificar el contenido también centro. Y como ustedes saben, necesitamos hacer todas las casillas al centro de esta página, así que voy a copiar este código, y lo voy a pegar dentro de la página dos. Además, voy a pegarlo dentro la página tres, y voy a configurar este archivo. Después de configurar este archivo, si vuelvo a mi navegador y vuelvo a cargar esta página, puedes ver el resultado Ahora, en cada una de nuestras páginas, alinea este centro de elementos profundos. Entonces ahora te queda claro cómo podemos crear esta estructura. Ahora, hablemos de GSAP. Así que estoy de vuelta a mi página HTML de punto índice, y aquí necesitamos importar el enlace GSAP Necesitamos importar usando CDN. Para importar el enlace CDN, vuelvo al navegador y voy a abrir una nueva pestaña, y aquí, voy a buscar GSAP Solo necesitas recordar si quieres algún enlace CDN de JSAP, necesitas escribir SAP Y desde aquí, puede utilizar este sitio web, cinj.com. Entonces, si abro este sitio web, Bibliotecas SAP, proporciona todo el enlace serio relacionado con SAP. Desde aquí, puedes seleccionar tus versiones SAP, pero voy a usar la última, así que voy a usar esta de aquí y de aquí, voy a copiar este enlace, el primer enlace, y voy a copiar y volver a mi código de estudio de visas, y voy a pegarlo aquí antes del punto de derrape JS cinco y ya sabes el proceso. Entonces ya creamos esta estructura y también le damos estilo a esta estructura. Entonces después de sep este archivo, saltemos al archivo JS de punto scrip Después dentro de esta etiqueta script, primero, voy a escribir GSAP y después de SAP en tipo DT Y como saben, a veces nuestro editor de código de Visual studio recomienda y no me gusta. Entonces otra vez, voy a teclear GSAP. Estos son punteados. Aquí tienes total de dos opciones. Se puede utilizar desde el método cualquiera de los dos métodos. Y para este ejemplo, voy a usar de método. De. Entonces necesitas usar tirantes redondos y dentro de los tirantes redondos, como sabes, primero, debes seleccionar el Entonces de la página uno, tiene etiqueta, página uno, quiero seleccionar tiene caja de etiqueta. Voy a seleccionar todas las casillas a la vez, así que no voy a usar el nombre de identificación, así que voy a usar la clase. Entonces aquí voy a escribir punto box. Entonces después del coma, voy a usar las maldiciones. Entonces al principio, aquí voy a usar la propiedad de escala. Escala, y voy a ponerla a cero. Si configuro este archivo y vuelvo a mi navegador y encabezo esta página, puedes notar la animación. Está atrás 02 posición normal. Si vuelvo a poner en marcha esta página, la pueden notar. Entonces voy a agregar poco retraso a esta transición, tipo Sumo, delay, y voy a usar retardo de 1 segundo. Y también, necesitamos usar entre estos dos valores. A continuación, voy a decir la duración tipo Sumo, duración, y voy a decir duración por dos segundos. Además, es necesario usar coma entre estas dos propiedades. Por lo que usamos una vez más el retraso. Entonces, después de recargar esta página, tardó una vez más en comenzar la animación y tardó dos segundos en completar la animación Entonces después de configurar este archivo, volvamos al navegador, y voy a recargar este navegador Entonces después de recargar este navegador, puedes notar que va a esperar 1 segundo, luego va a iniciar la animación, y tardó en total dos segundos completar la animación Ya aprendemos de eso solo para concluir esto, y luego voy a usar el valor de rotación. Rotar, y quiero decir rotar 360 grados. Entonces configuro este archivo con escala, también va a rotar el elemento. Entonces así es como se veía. 6. Cómo usar el disparador de desplazamiento parte 2: Así que aquí creamos nuestra animación de primera página. Es trabajo solo en nuestra primera página porque aquí está la pulida página número uno Entonces si vuelvo a cargar mi navegador, como pueden ver, solo ejecuta nuestra animación de primera página, no todas las animaciones Ahora volvamos al resultado código de estudio. Ahora quiero ejecutar la misma animación para otras páginas. Entonces selecciono este código y duplico este código a tiempo. Entonces voy a cambiar el número de página. Voy a ejecutarlo para la página dos, y voy a ejecutarlo para la página tres, y voy a configurar este archivo. Ahora, después de configurar este archivo, volvamos al navegador. Y voy a recargar mi navegador. Ahora puedes notar que ejecuta nuestra primera animación de página y completa la animación. Pero, ¿qué? Si me desplazo hacia abajo, ¿funciona? ¿Funciona para nuestra página dos? ¿Y también funciona para nuestra página tres? No, no es trabajo. Sí, es trabajo detrás de escena, pero no es trabajo cuando lo desplazo hacia abajo. Entonces no hay efectividad de esta animación si no la vemos. Si lo vuelvo a cargar, es trabajo para cada página, pero no podemos ver todas las páginas a la vez Entonces, al mismo tiempo, solo podemos experimentar una animación de página. Ahora bien, si me desplazo hacia abajo en mi segunda página, entonces quiero ejecutar esta animación. la misma manera, si me desplazo hacia abajo en mi tercera página, entonces quiero ejecutar esta tercera animación. Ahora puedes pensar que puedes resolver fácilmente este problema. Podrías pensar que puedes usar el retraso para eso. Podrías pensar que si aumentas el valor de retraso para diferentes páginas, va a funcionar. No, no va a funcionar así. Déjame mostrarte. Volvamos al código del estudio. Supongamos en nuestra casilla dos, aquí, voy a decir retraso. Voy a decir retraso por 5 segundos. Sater cinco segundos, va a ejecutar esta animación. Y en nuestra tercera página, voy a decir retraso de diez segundos. Soper retraso de diez segundos, va a ejecutar la tercera animación Y voy a poner este archivo. Entonces después de configurar este archivo, volvamos al navegador. Ahora voy a volver a cargar este navegador y después de ejecutar esta animación, supongamos que los usuarios pasan mucho tiempo Supongamos que el usuario gasta más de diez segundos en esa sección. Entonces voy a pasar más de diez segundos y leer todo el contenido de esta página. Entonces después de 10 segundos, si el usuario se desplaza un poco hacia abajo, como puedes ver, ya está ejecutada esta animación porque aquí solo hay cinco segundos de retraso. la misma manera, si me desplazo un poco hacia abajo, ahora puedes ver que ya está ejecutada nuestra tercera animación. No sabemos cuántas veces va a gastar un usuario en una sola página. Supongamos que el usuario gasta más de diez minutos, 20 minutos en una sola página para leer el contenido de lo contrario, llenar una de. Necesitamos activar esta animación cuando te desplazas hacia abajo por la página en cierta área. Si lo desplazamos hacia abajo cierta cantidad de área, va a desencadenar la animación. Esto se llama disparador de desplazamiento, y vamos a aprender sobre ello en esa sección. Además, podrías pensar que timeline y strager pueden resolver el problema No, no va a resolver el problema porque la tiempo ejecuta la animación una tras otra. Ahora, veamos ¿cómo podemos usar el disparador Scroll? Para ello, necesitamos que Boeing salte nuevamente a este sitio web donde usemos el enlace Can Desde este sitio web, es necesario utilizar este enlace, Desplazador de desplazamiento, este. Hay otros enlaces CDS como scroll to plug in, pero necesitas usar solo este para el disparador scroll, scroll trigger dot main dot js. Entonces, para copiar este enlace de CDN y volver al editor de código del estudio de fisura Entonces saltemos al archivo TML de índice y necesitamos usar este activador de desplazamiento CDN debajo del dubsDIN principal Después de esta Obsidiana, voy a pegar el gatillo de desplazamiento Voy a pegar el gatillo scroll este, y voy a configurar este archivo. Básicamente, el disparador de desplazamiento es un complemento GSAP. Es una biblioteca de apoyo para GSAP. Al usarlo, puedes ejecutar tu animación en función del desplazamiento. Y recuerda, debes seguir este orden. De lo contrario, está pasando por un error. Primero, necesitas usar GSA CD y luego, puedes usar Scroll Tigger, y por fin, usar siempre tu propio archivo script Ahora veamos cómo podemos implementar el trigger scroll. Así que volvamos al archivo script dot js. Vamos a ejecutar nuestra primera animación cuando carguemos la página. Pero en nuestra segunda animación, animación de segunda página, vamos a ejecutar cuando desplazemos la página y activemos esta animación. Entonces en esa página, voy a implementar el disparador de desplazamiento. Entonces para escribir, desplazarse, luego va a escribir trigger y recordar T debe ser mayúscula. Luego dentro de la función de disparo de desplazamiento, disparador de desplazamiento arquetipo, necesitamos especificar el objeto De lo contrario, el elemento donde queremos implementar el trigger scroll. Así que voy a usar este objeto box que está dentro de la página dos. Entonces voy a copiar esta selección, y la voy a pegar aquí. Además, voy a usar delay normal, así que voy a hacer que vuelva a retrasarlo. Ahora, fijemos el archivo y volvamos al navegador. Y aquí, en mi primera página, voy a recargar este navegador Ahora, va a ejecutar nuestra primera animación de página. Entonces voy a esperar algún tiempo. Después de eso, si me desplazo hacia abajo en mi página y salto a la página dos, ahora puedes ver después de saltar a la página dos, inicia nuestra animación de segunda página. Entonces esto es exactamente lo que podemos hacer usando el gatillo de tornillo. Déjame mostrarte el ejemplo una vez más. Como pueden ver, estoy en mi primera página y voy a volver a cargar este navegador Entonces después de recargar el navegador, como puedes ver, por defecto, va a iniciar esta animación Pero cuando me desplazo un poco y salto a la sección de la página dos, ahora se puede ver después de 1 segundo de retraso, inicia la animación. Entonces está funcionando. Ahora, intentemos entender el gatillo de desplazamiento en detalles. Al principio, voy a duplicar esta línea y comentar la línea anterior. Ahora, vamos a aprender algunas propiedades específicas del activador de desplazamiento. Entonces aquí, voy a usar a Carrass. Entonces en cambio decirass voy a aplicar algunas propiedades. Entonces primera propiedad, voy a usar trigger. Trigger, y quiero activar la caja, que está dentro de la página dos. Entonces copio esta sección y la paso aquí. Y luego voy a mencionar el desplazador. Súper coma, herem t, desplazador. Cotija, y voy a mencionar cuerpo. Ahora podrías tener precaución por qué selecciono cuerpo en propiedad scroller La mayoría de las veces usamos cuerpo hasta que usamos locomotora. Entonces, si desplazamos nuestro cuerpo tamal, va a desencadenar esta animación que está dentro de este cuadro de página dos Después de establecer este estilo, si vuelvo a cargar mi navegador, va a ejecutar nuestra animación tal como está Va a ejecutar la animación normalmente. Entonces después de ejecutar nuestra animación de primera página, si me desplazo un poco hasta la segunda página, ahora puedes ver que inicia la animación de la segunda página. Ahora hablemos de marcadores. Así que voy a volver al código del estudio Viser, y aquí, voy a escribir marcadores de Coma Marcadores verdaderos. Al usarlo, podemos entender desde qué posición va a activar la animación. Déjame mostrarte. Así que después de configurar este archivo, si vuelvo a mi navegador y vuelvo a cargar mi página Ahora puedes ver aquí puedes ver una opción llamada scroll start, scroller start y arriba, puedes notar scroller end Esta es la posición final del desplazador. Entonces si me desplazo un poco hacia abajo esta página y salto a la sección de la página dos, ahora puedes ver, ahora puedes notar después de este interruptor de gatillo cruzar el área de inicio de scroll, inicia la animación. Déjame mostrarte otra vez. Entonces aquí, voy a recargar mi navegador en esa posición Ahora puedes notar que alguien vuelve a cargar este navegador primero ejecuta nuestra primera animación Pero si me desplazo por esta página y solo notas el cambio. Cuando este interruptor cruza esta zona de inicio de paseo, activó la animación. Pero ahora quiero cambiar la posición de inicio, la posición inicio del desplazador Quiero colocarlo en esa posición. Para eso aquí, hay que mencionar la posición de inicio. Entonces después de la coma, voy a escribir start. Empieza aquí dentro del doble curso, voy a escribir desde la posición superior, quiero moverlo 60%, 60%, y voy a configurar este archivo. Up configurar este archivo, deja que al navegador. Y de nuevo, voy a razonar mi navegador. Ahora puedes notar que esta es nuestra posición de partida. Si nuestros elementos comienzan posición, supongamos que esta posición de inicio cruza esta limitación, entonces va a iniciar esta animación. No va a iniciar la animación hasta que cruce esta línea. Para que puedas notar cada vez que cruce esta línea, ahora puedes ver que inicia la animación después de 1 segundo de retraso. Aquí cambiamos nuestro punto de inicio. Desde arriba, aquí usamos 60%. Solo hay que recordar que son los trajes desencadenantes de esta animación. Cuando esta línea cruce este interruptor de gatillo, va a iniciar esta animación. Por eso se le conoce como pergamino Trier. Esto es para esta sección. En la siguiente parte de esta sección, vamos a conocer más al respecto. Vamos a conocer más sobre más características sobre scroll trier. 7. Línea de tiempo en GSAP Crea tu primera línea de tiempo parte 1: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con la animación GSP Y en este tutorial, vamos a aprender la línea de tiempo del GSP La línea de tiempo GSP es una herramienta de secuenciación que permite a los usuarios controlar y administrar el tiempo de la animación Básicamente, es un contenedor para gemelos y otras líneas de tiempo, y se utiliza para construir secuencias complejas Con líneas de tiempo, las animaciones se muestran en el agua. Están listados en el código. Por lo que se pueden agregar nuevas animaciones sin calcular manualmente los retrasos. Las líneas de tiempo también permiten crear secuencias de animación fácilmente ajustables y resistentes Aquí hay algunas cosas que puedes hacer con las líneas de tiempo de la aplicación. Posicionando la animación en el tiempo, las animaciones repetidas incluyen retrasos antes de animación de repetones y cadenas En una palabra simple, la línea de tiempo es cualquier cosa que se establezca en un marco de tiempo. Supongamos que esta es nuestra línea de tiempo de cinco segundos. Pero aquí podemos especificar diferentes tareas en diferentes segundos de tiempo. Podemos realizar diferentes tareas en diferentes marcos de tiempo. Básicamente, usando timeline, podemos especificar lo que vamos a ejecutar paso a paso. En nuestro tutorial anterior, aprenderemos sobre cómo podemos ejecutar la animación GSP Y si quieres ejecutar animaciones una tras otra, entonces necesitamos proporcionar delay, cada una de las animaciones. Y para resolver el problema del retraso, GSAP introdujo la línea de tiempo Entonces vamos a discutir la línea de tiempo. Y recuerda, nuestra línea de tiempo está conectada entre sí, y va paso a paso. Entonces finalmente, estamos en la página de documentación de animación SAP. Y en nuestros tutoriales de prefacio, ya aprendemos cómo podemos instalar la animación GAP Ahora, volvamos al código isal Studio. Entonces como pueden ver, lado a lado, abro mi editor de código de isults Studio, y mi navegador Y como puedes ver en mi directorio de trabajo actual, tenemos al tres archivos, index dot html, main dot css file y app dot js file. Y en nuestro archivo TML de punto índice, ya vinculo animación GSAP en esta etiqueta de script Ahora dentro de la etiqueta body, voy a crear TDL three box Entonces martillo tipo Dev tiene etiqueta, caja. Esta es la casilla número uno. Entonces cavé esta sección. Esta es la casilla número dos. De nuevo, voy a hacer esta sección, y esta es la casilla número tres. Además, voy a asignar una clase. Voy a asignar la misma clase a la que podamos apuntar todas las casillas a la vez. Entonces voy a teclear clase, esto es solo caja. Después copio esta sección y la pego en nuestra caja dos y la caja tres. De nuevo, voy a configurar este archivo, y después voy a saltar al archivo CSS de punto principal. En primer lugar, voy a usar el selector universal. Estrella dentro del calibre dice, voy a decir margen cero. Nuestra siguiente propiedad voy a usar padding zero, y nuestra tercera propiedad es el tamaño de la caja, el tamaño caja de la frontera de la caja. Y luego voy a darle estilo al elemento box. Entonces voy a usar su nombre de clase dot box dentro de los cálices Primera propiedad, voy a usar con con 100 pixel, altura 100 pixel. Entonces voy a usar propiedad de fondo. Fondo, y voy a usar color dorado. También, voy a agregar margen. Margen y voy a agregar cinco píxeles marchando. Y voy a poner este archivo. Si configuro este archivo y vuelvo a cargar mi navegador, aquí puedes ver V resultado Y ahora quiero asignar diferentes animaciones a estos ítems, pero uno tras otro. Y para asignar la animación, vamos a usar GSAP Así que vamos a saltar al archivo JS punto de la aplicación. Entonces primero, voy a escribir GAP SAP. Nuevamente, nuestra sucesión automática reemplaza la palabra clave. Así que estoy de vuelta a la posición punto GSAP, y voy a usar la función From De. Después dentro de la ronda ss dentro de los códigos dobles. Al principio, voy a seleccionar el primer elemento, recuadro uno. Voy a seleccionar este elemento usando su nombre de identificación tiene esa casilla uno. Después Oma dentro de los cálices. Primera propiedad, voy a usar opacidad. Opacidad. Primero voy a hacer que la opacidad sea cero y a continuación voy a usar duración, duración animación tiempo duración y quiero establecer duración total de cinco segundos Si configuro este archivo y vuelvo a cargar mi navegador en 5 segundos, este elemento se convierte en 021 Quiero decir que este elemento opacidad se convierte en cero a uno. Déjame mostrarte. Si vuelvo a cargar mi navegador, como pueden ver, dentro de los 5 segundos, se vuelve de cero a uno También, voy a decir que sobrepasa Valor 300. De exceso de dirección, viene de 300 píxeles. Entonces voy a configurar este archivo y volver a cargar mi navegador, se puede ver el resultado Creo que cinco segundos son demasiado largos para esta animación, así que voy a hacer dos segundos. Entonces voy a duplicar esta sección. Esta vez, voy a seleccionar la casilla número dos. Entonces voy a cambiar el nombre de identificación cuadro número dos. Si configuro este archivo y vuelvo a cargar mi navegador, entonces tanto la animación va a funcionar en conjunto Déjame mostrarte. Se puede ver el resultado. Ahora tenemos una solución. Podemos usar la propiedad Day. Delay y quiero agregar dos segundos de retraso. Si configuro este archivo y leo mi navegador, como pueden ver, necesitamos usar COVA entre estos dos Entonces otra vez, voy a configurar este archivo y relert mi navegador Aquí puedes ver después de completar la primera animación y dos segundos de retraso, completar la segunda animación. Si hice lo mismo varias veces, entonces se ha convertido en código enorme. Cada vez que necesitamos calcular el valor de retardo cada una de las cajas. Como puedes ver, nuestro primer cuadro toma dos segundos para completar la animación. Ellos duplicaron dos segundos. En nuestro segundo cuadro, aquí usamos delay dos segundos. Después después de completar la animación de la primera caja, quiero completar la segunda animación de caja. Por eso aquí digo a la segunda demora. Por lo que va a iniciar la animación de la segunda caja después de 2 segundos. la misma manera, si quieres ejecutar nuestra tercera animación box, después de completar la animación de la segunda caja, en ese caso, en nuestra tercera caja, necesitamos asignar delay para cuatro segundos. Entonces cada vez que necesitamos calcular el valor de retardo, cada uno de los elementos. Si tenemos 50 animaciones en nuestra página web y quiero ejecutar toda la animación una tras otra, en ese caso, cada vez que necesitamos administrar el valor de delay. Para resolver el problema, GAP introdujo la línea de tiempo. Voy a comentar todos los códigos. 8. Línea de tiempo en GSAP Crea tu primera línea de tiempo parte 2: Después vuelvo a la sección de documentación. Entonces puedes buscar la línea de tiempo en esta barra lateral de filtros. Además, puede hacer clic en esta opción timeline. Aquí solo trato de mostrarte desde donde puedes obtener la documentación de la línea de tiempo. Después sólo volvemos al archivo JS. Primero, voy a declarar una variable. Entonces aquí escribimos Const Cs, y mi nombre de variable es TL TL hace para timeline, igual a JSapgsApttLine Función Sap dot Timeline. Entonces aquí creamos la línea de tiempo, y ahora voy a usar este mismo código. Voy a copiar este código, y lo voy a ejecutar usando JSAP Déjame mostrarte. Entonces aquí, voy a pegar el código, y voy a descommen este Ahora bien, no necesitamos esta probidad de demora. Entonces, para eliminar esta probilidad. Y aquí, voy a sustituir GAP por TL. TL. Voy a establecer este archivo. Ahora, cómo creamos la línea de tiempo. Si vuelvo a cargar mi navegador, como puedes ver después de completar el primero, inicia el segundo Pero puedes notar aquí no utilizamos ningún retraso. Si hago lo mismo para el tercero, así que voy a duplicar este lin y cambiar el nombre de identificación cuadro número tres, luego configurar este archivo y luego configurar esta pila y volver a cargar mi navegador Ahora puedes ver después de completar el primero, va a comenzar el segundo, luego va a comenzar el tercero. Básicamente, timeline reemplaza la propiedad delay. Obviamente, puedes usar delay si trabajas con poca cantidad de animación. Si tu animación es grande, de lo contrario, si usas múltiples animaciones, siempre van con la línea de tiempo. Es muy útil cuando crea series de efectos. Ahora volvamos a la documentación. Si quieres repetir tu línea de tiempo, puedes usar este objeto. Déjame mostrarte. Entonces voy a copiar este valor de objeto y propiedad. Luego volvamos al código de visual studio. Entonces dentro de esta función tanino, voy a usar Cariss Entonces voy a pegar el valor de repetición. Quiero repetir esta animación total dos veces. Entonces si configuro este archivo y vuelvo a cargar mi navegador, como puedes ver, primero completa el primero, luego el segundo, luego el tercero Ahora va a repetir la línea de tiempo. Entonces este es nuestro trabajo repetido. Y si quieres demorar entre estas líneas de tiempo, sí, puedes Solo necesitas usar esta propiedad, repita retraso. Entonces voy a copiar esta propiedad y valor, luego de vuelta al con el código del estudio. Y después del coma, voy a pegarlo aquí. Entonces va a repetir este producto de animación dos veces. También se va a sumar poco retraso de 1 segundo entre estas líneas de tiempo. Entonces si configuro este archivo y vuelvo a cargar mi navegador, completa la línea de tiempo, puedes ver que va a esperar 1 segundo Entonces después de 1 segundo, va a ejecutar la línea de tiempo una vez más. Se puede ver el resultado. Y si aumento el valor, entonces va a esperar mucho tiempo. Además, proporciona algunas otras funciones como pausa, reanudar sik y revertir Supongamos que si quieres invertir la línea de tiempo, si haces clic en cualquier botón, entonces va a revertir la línea de tiempo. Proporciona todas las diferentes opciones, cómo puedes usarlo. Se puede leer la documentación para el mayor conocimiento al respecto. Desde aquí, podrás conocer todas las opciones. Ahora hablemos del tiempo absoluto. Se midió desde el inicio de la línea de tiempo. Déjame mostrarte el ejemplo. Ahora, volvamos a la s son código de estudio, y volvamos al punto índice en el archivo. Entonces aquí, voy a usar etiqueta de encabezado, H dos. Y además, voy a asignar un ID igual a DM y a base de hierbas escriba un texto, hola palabra. Y voy a configurar este archivo y volver a cargar mi navegador. Entonces volvamos al archivo JS punto de la aplicación. Aquí, voy a animar esta etiqueta de rumbo. Pero al principio, voy a reducir el valor de repetición. Quiero repetirlo sólo por una vez. Entonces voy a seleccionar esta etiqueta de encabezado usando timeline, TL dot, y voy a usar desde Método. Después puse los latones redondos, primero, voy a apuntar primero, voy a apuntar a la etiqueta de rumbo usando el nombre de identificación, hastag Dam Es que los calibres aquí voy a usar propiedad llamada opacidad Opacidad, y voy a poner la opacidad cero. Y entonces voy a usar el tiempo obsoleto exactamente así Entonces aquí voy a usar el tiempo obsoleto, y quiero fijarlo para tres segundos. Si configuro este archivo y cargo mi navegador, como pueden ver, después de 3 segundos, va a iniciar la animación. Primero, va a mostrar el hola mundo, después va a iniciar esta animación una por una. Básicamente, agrega poco retraso a esta animación. Básicamente, va a mostrar este elemento después de 3 segundos. Pero si muevo este, si muevo esto por debajo de la caja dos, así que voy a cortar esta porción y pegarla debajo de la sección de la caja dos. Si configuro este archivo y vuelvo a cargar mi navegador, después de 3 segundos, va a mostrar este texto Pero ya inicia esta línea de tiempo. Déjame mostrarte. Entonces si vuelvo a cargar mi navegador, como pueden ver, inicia mi animación, luego después de 3 segundos, muestra el texto Así funciona si cambio el agua de la misma. Hay muchas cosas así en la línea de tiempo del GSP. Etiqueta de inicio y vamos a aprender sobre ello de vez en cuando en nuestro próximo tutorial. A continuación, vamos a crear un sitio web. En nuestro primer tutorial, aprendemos cómo podemos usar GSP, y en nuestro segundo tutorial, aprendemos sobre la línea de tiempo Entonces en el siguiente tutorial, voy a tratar de crear una página de destino interesante usando estos métodos de línea de tiempo. Y también, voy a intentar implementar todas las cosas que aprendí en nuestros tutoriales anteriores. Entonces esto es todo para este tutorial. Gracias por ver este video. Estén atentos para el siguiente tutorial. 9. Desencadenamiento de animación múltiple y esfoliado de scroll: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con otro disparador de desplazamiento relacionado con el tutorial. En nuestro tutorial anterior, ya creamos con gatillo de desplazamiento Y hoy en este tutorial, vamos a aprender nueva característica sobre el gatillo de desplazamiento, como por ejemplo cómo podemos ejecutar múltiples animaciones de disparo de desplazamiento en una sola página cómo podemos usar la propiedad de fregar y muchas más Así que saltemos al editor de código del estudio de resultados y veamos cómo podemos aplicarlo. Entonces como pueden ver, estamos en mi editor de código de estudio de resultados. Y puedes notar aquí en nuestra página dos, animamos esta caja Pero esta vez, quiero animar múltiples animaciones. Para eso, voy a volver al archivo de estimación de punto índice, y dentro de esta página dos sesiones, voy a comentar esta casilla, y voy a crear dos encabezamientos. Y voy a crear nuestro primer encabezado usando H one tag y Hemot Hello World Entonces voy a crear otra etiqueta de encabezado, H dos. Voy a dar la bienvenida. Voy a establecer este archivo. Ahora, vamos a darle estilo este elemento, H uno y H dos. Para eso, voy a saltar al archivo CSS de estilo. Pero antes al principio en nuestro contenedor padre en la fase dos, necesitamos cambiar la dirección, así que voy a escribir dirección de flak Dirección flex, voy a hacerla columna. Entonces voy a darle estilo a las etiquetas auditivas, H uno. Después dentro de los coliers. Entonces dentro de la etiqueta H one, al principio, voy a cambiar el tamaño de fuente tamaño de fuente, y quiero que sea de 50 píxeles. Y también, voy a cambiar la posición y posición, voy a hacerla relativa. Entonces voy a cambiar el color diagraund. Color de fondo, voy a hacerlo rojo. Además, le voy a agregar poco relleno, así que voy a escribir padding desde toda la dirección. Quiero agregar relleno de diez píxeles. Entonces voy a duplicar esta sección, y voy a cambiar el nombre del selector. Esta vez, voy a hacer que sea H dos, encabezando dos, y voy a poner este archivo. Pero necesitamos cambiar el color de fondo para el encabezado dos, así que voy a hacerlo amarillo. Y voy a configurar este archivo y volver al navegador. Si vuelvo a cargar el navegador, aquí puedes ver el resultado Tenía tanto el texto, pero necesitamos poca brecha entre ellos. Para eso, dentro del contenedor padre, página dos, voy a usar la propiedad gap. Gap, y quiero usar gap 50 pixel. Voy a configurar este archivo y volver a mi navegador, y voy a recargar este navegador Creo que esta brecha es buena para el ejemplo. Básicamente, en este ejemplo, vamos a ejecutar múltiples animaciones de disparo de desplazamiento en una sola página. Así que ahora, volvamos al archivo de script J. Y primero, voy a eliminar todo el código innecesario y Hemo tipo GSAP y necesitamos escribir punto, y voy a usar de método Después dentro de las rondas, en un primer momento, tenemos que pasar el seleccionar un nombre. Entonces voy a usar nuestro nombre de identificación página dos. Después voy a seleccionar H una etiqueta. Después de coma, dentro de las maldiciones, voy a usar las propiedades Al principio, voy a agregar Opacidad aquí. Entonces para escribir Opacidad. Y voy a poner la opacidad cero. Como puedes ver, aquí utilizamos desde el método. Entonces de cero, vuelve a la opacidad normal. Entonces voy a usar duración. Y voy a decir duración a segundo. A continuación, voy a usar dirección desde qué dirección quiero mover este texto. Entonces voy a usar Xxs y voy a pasar 500 pixel. Entonces, por favor, establece este archivo si vuelvo a cargar mi navegador, veamos que está funcionando en nada Como puedes ver, funciona. Aquí no aplicamos el disparador de desplazamiento. Ejecuta automáticamente la animación. Ahora voy a aplicar el disparador de desplazamiento. Para eso, aquí voy a escribir coma, y voy a escribir scroll trigger Gatillo de desplazamiento. T debería ser capital, y hay que recordarlo. Desplazamiento disparador, y dentro de los calices, primero, voy a llamar gatillo Trigger, y lo voy a poner dentro del doble curso, voy a zumbar. Quiero activar esta animación. Entonces copio esta sección y la voy a pegar aquí. A continuación, necesitamos establecer este desplazador en nuestro cuerpo, algún tipo scroller en nuestro cuerpo, algún tipo scroller Desplazador, y quiero fijarlo en nuestra sección de cuerpo. La mayoría de las veces necesitamos usar cuerpo hasta que corremos locomotoras Entonces también necesitamos marcadores para identificar este punto de regla, el punto desencadenante. Entonces escribe marcador, marcadores, y quiero que sea verdad. A continuación, necesitamos definir el tipo de punto de inicio del núcleo start, start y su pass insert double cores, top. Desde la posición superior, quiero moverlo hacia abajo 60%. También, voy a definir en posición, desplazador en, donde va a dejar de ejecutar nuestra animación Entonces voy a escribir no está dentro de las comillas dobles desde arriba, quiero moverla hacia abajo para un 30%. Y voy a poner este archivo. Sí, con la posición de inicio, también podemos definir nuestra posición final. Déjame mostrarte. Entonces, si vuelvo a cargar mi navegador, ahora puedes ver que esta es nuestra posición de inicio de erudito, y esta es nuestra posición final de erudito Si cruzo este límite, va a ejecutar esta animación. Déjame mostrarte. No te preocupes. Explicaré cuál es el uso del anuncio de desplazamiento en nuestro siguiente ejemplo. Entonces aquí animamos nuestro primer texto. Ahora necesitamos animar el segundo texto. Para eso, hay de vuelta al código del estudio de la visera, y voy a duplicar esta sección. Esta vez, voy a cambiar el selector. Voy a hacer que sea H uno, dos H dos. Y también, necesitamos cambiar la dirección. Quiero mover este texto desde la dirección opuesta, así que voy a usar el valor -500 Ahora después de esto este archivo, si vuelvo a mi navegador y vuelvo a cargar mi navegador, ahora se puede ver tener total iniciar cambiar para diferir en la etiqueta de encabezado Si cruzo este límite, va a ejecutar la primera animación de texto. Entonces si cruzo este límite, entonces va a desencadenar la segunda animación de texto. Como se puede ver, ejecuta la animación desde la dirección opuesta. Así es como podemos desencadenar múltiples animaciones usando el disparador de desplazamiento. Ahora quiero aplicar un efecto de animación diferente. Pero para eso, antes voy a comentar este icono segunda sección de animación. Volvamos al código de estudio de los usuarios y primero, voy a comentar esta sección. Entonces vuelvo al archivo de tabla de puntos índice y voy a comentar esta etiqueta H dos. Y voy a poner este archivo. Ahora, volvamos al navegador otra vez y recarguemos mi navegador Ahora puedes ver ahora solo tenemos una animación de texto. Si activo la animación, como pueden ver, se ejecuta la animación normalmente, pero no quiero este efecto. Ahora quiero ejecutar esta animación entre scroller Start y scroller Quiero decir, si cruzo esta posición de inicio de pergamino, al instante no va a ejecutar la animación completa. De acuerdo con este valor de desplazamiento, va a mover el elemento. Para eso, necesitamos usar otra propiedad. Y ahora voy a aplicar un nuevo efecto de animación usando propiedad de chatarra. Déjame mostrarte cómo. Así que vamos a la es un código de estudio, y voy a saltar a la diversión de los DJs de Scribe Primero, voy a usar otra propiedad, y nuestro nombre de propiedad es escala. Escala y voy a decir escala cero. A partir del escalado cero, vuelve a la posición normal. Entonces voy a establecer duración sólo por 1 segundo. Ahora voy a aplicar el nuevo matorral de propiedad, SCRUB, aquí puedes usar dos tipos de valor. O bien el valor Bullen, ya sea el valor numérico. Si usas el valor numérico 1-5, va a controlar la suavidad. Voy a iniciarlo con valor Bullen así que voy a pasar por ahí Ahora veamos qué tipo de efecto de animación va a proporcionar. Así que vamos a configurar el archivo y volver al navegador, y ahora se puede notar el efecto. Entonces voy a leer mi navegador, y ahora puedes notar esta animación se reproducirá a medida que nos desplazamos. Si lo desplazo hacia abajo, ahora puedes verlo completar la animación. Ejecuta la animación hasta llegar a la posición final del desplazamiento. Ahora completa la animación. Y si me desplazo hacia arriba esta página, ahora puedes verla moviéndose hacia atrás. Entonces este es el efecto que podemos obtener usando chatarra. No va a ejecutar la animación al instante, y podemos ejecutar esta animación varias veces. En nuestros ejemplos anteriores, ejecuta la animación instantáneamente cuando cruzamos el límite. Además, no se ejecuta la animación varias veces, pero usando Scrab, podemos hacer la cosa varias veces Si lo desplace hacia abajo, como pueden ver, mueve el elemento y va a completar la animación hasta que cruce la posición final del desplazamiento, y además hace lo contrario si lo desplazamos hacia arriba. Si quieres aplicarle suavidad, para eso, puedes usar otros valores como volvamos al código de salt studio, TFI pasa dos aquí Duplicé esta línea y comento la línea anterior y aquí estoy para pasar el valor de desecho dos, y luego establecer este archivo. Ahora, volvamos al navegador y voy a leer mi navegador. Esta vez, se puede ver un poco suavidad en esta animación Después de cambiar el valor, puedes experimentar la suavidad en esta animación Si estableces el valor más alto cinco, entonces va a proporcionar más suavidad. Pero dos es la suavidad normal para este ejemplo. Como puedes definir la posición inicial y final para tu cochecito. Ya nos enteramos de eso. Entonces esto es para este tutorium. En el siguiente ejemplo, vamos a aplicar Pin NAP en él. Así que gracias por ver este video Stone para nuestro próximo tutorial. 10. Trigger de desplazamiento con pin: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con el dibujo de desplazamiento y hoy en este tutorial, vamos a aprender pin. Vamos a saltar al editor de códigos del estudio de visas. En nuestro tutorial anterior, aprenderemos sobre el matorral. Si aplicamos esta propiedad y luego configuramos este archivo y volvemos a mi navegador, como saben, ejecuto nuestra animación cuando nos desplazamos por nuestra página, acuerdo al valor de desplazamiento, continúa la animación Ya estamos familiarizados con eso. Ahora, usemos una nueva propiedad llamada pin. Aquí voy a aplicar otra propiedad llamada pin aquí voy a asignar un valor, un valor booleano Voy a hacerlo realidad. Y voy a poner este archivo. Después de configurar este archivo, si vuelvo a mi navegador y vuelvo a cargar mi navegador, si me desplazo hacia abajo, ahora puedes notar cuando me desplace hacia abajo nuestra animación pegada a esta posición, déjame mostrarte Como puedes ver, nuestra animación se pegó a esta posición hasta que terminó la animación. Ahora fija este elemento en esa posición. Esto es lo que hace Pin, pero usando Pin, podemos crear un hermoso efecto de texto. Déjame mostrarte el ejemplo lo que vamos a crear en este tutoro Voy a abrir un sitio web y te voy a mostrar lo que vamos a crear en este tutorial con la ayuda de Pin. Como pueden ver, aquí abro un sitio web y lleva poco tiempo cargarse. Estas son las animaciones realizadas con GSA. Si me desplazo un poco hacia abajo, aquí puedes ver la animación. Se hace por chatarra. Ya nos divertimos con eso. Cuando me desplazo hacia abajo, como pueden ver, se escala hacia arriba. Entonces quiero mostrarles este ejemplo de experiencia, éste. Ahora puedes ver si me desplazo por mi Karza, corre la animación en dirección vertical Se puede ver la experiencia lleva. Se puede notar como esto lo anima. Vamos a crear este efecto usando pin. Después de completar la animación, ahora podemos desplazarnos a la siguiente página. Pero hasta que completemos la animación, no podemos desplazarnos hacia abajo en la página. Necesitamos ejecutar esta animación para desplazarnos hacia abajo, lo contrario, desplazarse hacia arriba en la página. Entonces vamos a crear este mismo efecto usando pin de esquina, de lo contrario, pin. Este ejemplo es parte de la animación del disparador de desplazamiento. Así que volvamos al código de Visual Studio e iniciemos la codificación. Entonces estoy en mi editor de código de Visual Studio, y aquí abro el archivo de pantalla dot js. Al principio, voy a eliminar todo el código de este archivo JS. Entonces voy a eliminar todo el código del archivo de estilo o CSS. No lo necesito. Y luego vuelvo a mi página HTML de punto índice. A partir de aquí, voy a quitar la caja. No necesito esta caja. Además, voy a eliminar este texto, esta etiqueta de encabezado. Ahora, voy a crear voy a atar el texto en la página dos sección. Estoy tratando de construir casi el mismo efecto. Entonces aquí, voy a escribir H una etiqueta, H una. Y aquí voy a escribir experiencia. Entonces voy a configurar este archivo. Después de configurar este archivo, vamos a saltar a la sección de estilo. Tenemos que darle estilo. De lo contrario, nuestra página se ve así. Aquí voy a comenzar nuestro estilismo. Al principio, voy a seleccionar la estrella selectora universal. Entonces dentro de la Calibra dice, voy a decir margen Voy a decir margen cero. Entonces también, voy a decir relleno, relleno cero. Entonces voy a decirlo dimensionamiento de cajas. Caja de borde de tamaño de caja. A continuación, voy a definir la familia de fuentes. Font, justamente. Aquí puedes elegir tu propia familia de fuentes, pero por ahora, voy a elegir Franklin Gothi esta Y a continuación, voy a diseñar la sección de cuerpo, cuerpo y SDL, algún tipo de cuerpo STL Entonces dentro de los calibrss voy a establecer altura y ancho a este cuerpo Entonces, para definir el ancho, algunos definirán la altura. Voy a hacerlo al 100%. Entonces voy a definir a la hierba. Voy a sustituir la altura que desyerbamos, al 100%. Ahora, una a una, voy a darle estilo a las páginas. Para eso, voy a usar su Dym como la página uno, SumtyHtag, la página uno, los calices, voy Altura, 100%. Entonces voy a asignar W W al 100%. También para definir el color de fondo summertype color de fondo azul claro Éste. la misma manera, voy a definir altura y peso a otras páginas. Entonces duplico esta línea varias veces. Esto es para la página dos, y voy a cambiar el color de fondo así que lo hago un poco más oscuro. Entonces esto es para la página tres. También voy a cambiar el color de fondo, éste. Y voy a poner este archivo. Ahora quiero configurar este archivo, volvamos al navegador y recarguemos esta página Entonces así es como se veía. Ahora volvamos a la con un código de estudio y estilo al texto, este, H una etiqueta. Entonces aquí escribe desde la página dos, quiero apuntar a la página dos. Quiero apuntar a H una etiqueta, H una. Entonces dentro de la ali resis al principio, voy a asignar tamaño de fuente tamaño de fuente, y voy a usar fuentes pequeñas y grandes. Voy a usar 40 VW. Entonces no voy a usar demasiada fuente negrita. Depende de ti qué tipo de peso de fuente vas a usar algún tipo de peso de fuente. 500. Entonces voy a asignar padding, padding y dentro del padding, voy a asignar diez pixel padding desde toda la dirección. Entonces voy a transformar estas tomas en mayúsculas. Entonces tipo toma, transforma, arcos y voy a establecer este archivo Después configuré este archivo, si voy a mi navegador y vuelvo a cargar mi página, así es como se ve nuestro texto Ahora puedes notar que tenemos la barra de desplazamiento vertical para el texto aquí uso porque aquí uso tamaño de fuente grande. Por eso aparece. Ahora necesitamos ocultar esta barra de desplazamiento vertical usando la propiedad overflow Necesitamos usar desbordamiento X porque el texto se expande en dirección xs. Aquí voy a usar una propiedad en nuestra etiqueta corporal. Entonces escribe cuerpo dentro del receso de color, voy a usar desbordamiento X O flujo X oculto. Voy a establecer este archivo. Ahora volvamos al navegador y recarguemos el navegador Ahora no tenemos ninguna barra de desplazamiento vertical. Ahora, saltemos a la sección de animación. Para eso, necesitamos saltar al archivo script doot Js. Para crear la animación, aquí necesitamos usar dos métodos. Entonces aquí voy a escribir JSAP punto dos. Entonces dentro de la ress redonda al principio, necesitamos apuntar al elemento. En qué elemento, vamos a aplicar la animación. Entonces voy a etiquetar tiene etiqueta, página dos, y desde la página dos, quiero apuntar a H una etiqueta. Diez, voy a usar coma, entonces dentro de los calices aquí no usaríamos nuestras propiedades Al principio, voy a usar transform property. Tipo sol, transforma Transformar y dentro de los códigos dobles, voy a usar translate X, translate X. Luego dentro de los rounders aquí, necesitamos proporcionar la posición Desde qué posición se va a traducir el texto. Aquí voy a usar menos un 50%, y voy a configurar este archivo. Ahora, vamos a configurar el archivo y C y volver a mi navegador y ver, es que activó la animación correctamente o no. Entonces estamos en mi navegador y voy a recargar mi navegador ahora Aquí en la sección, puedes ver el resultado Si volví a sostener mi navegador, ahora puedes notar, sí, es trabajo. Aquí puedes notar desde la posición de origen de este texto, éste movió el texto en dirección XXs Se movió el texto -150% en dirección XXs de esta manera, este lado Si yo mi navegador, lo puedes notar. Ahora, solo necesitamos activar esta animación usando el método de disparo de desplazamiento, y también necesitamos usar scrap porque cuando desplazamos esta animación, lo contrario esta página, entonces podemos controlarla. Podemos controlar el grecton de esta animación. Podemos moverlo hacia adelante, de lo contrario hacia atrás. Volvamos a saltar al código de visual studio iter. Así que aquí voy a usar la propiedad scroll trigger. Entonces muere, gatillo de desplazamiento. Desplazamiento disparador, luego dentro de la Calibra dice, primera propiedad, voy a usar trigger Trigger y dentro del doble curso, aquí, necesitamos apuntar solo a la página. Necesitamos activar solo la página no la animación para este ejemplo solamente Aquí voy a escribir Tiene etiqueta, página dos, página dos, y luego necesitamos establecer scroller en body, S type scroller Y voy a definir este cuerpo de sección gobernante. A continuación, necesitamos definir la propiedad que ya está en nuestro tutorial anterior, scrub SCRUB. Y para este matorral, se puede utilizar el valor Bollan true De lo contrario, puedes usar y de otra manera, si quieres suavidad, si controlas la suavidad, entonces puedes pasar cualquier valor numérico 1-5 Voy a pasar dos aquí. Y entonces vamos a usar propiedad pin, PIN, y aquí, voy a usar el valor Brilliant true. Eso es. Si configuro este archivo y vuelvo a mi navegador y vuelvo a cargar mi navegador e intento desplazar esta página hacia abajo, ahora puedes experimentar esta animación Ahora puedes verlo ejecutar la animación cuando me desplace hacia abajo por mi cursor. Aquí puedes notar la barra. Si me desplazo hacia arriba, mueve el texto en dirección positiva en dirección positiva XS, y si me muevo hacia abajo, movió el texto en dirección s negativa. Después uptart completar la animación, absoluta lograr Ahora puedes desplazarte hacia abajo hasta la tercera página. De lo contrario, no puedes desplazarlo. la misma manera, hasta que ejecutes esta animación, ahora puedes verla completar la animación y luego podremos desplazarnos hacia arriba y volviendo a la página uno. Entonces así es como podemos crear este efecto. Es un efecto muy bonito en sitios web modelo. Espero que ahora te quede claro cómo podemos usar pin de esquina y chatarra para crear este hermoso ejemplo. Así que gracias por ver este video Stune para nuestro próximo Tutorial 11. Animación de GSAP con gráficos SVG: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con la animación GsAP Y hoy en este tutorial, vamos a trabajar con el gráfico BG. Sí. Grandes soportes para gráficos escalables Victor. VG es el formato de archivo de imagen. Hay dos tipos de formato de archivo como restor graphic y Vctorraphi y SVG significa ctorGraphi Si amplias cualquier imagen rester como imágenes de mapa de bits, va a pixelar la imagen, de lo contrario, distorsionará la imagen lo contrario, Pero si escalas alguna imagen vectorial, no la va a pixelar. Puedes hacer zoom a Vctorimage tanto como quieras. Déjame mostrarte la demostración. Como puedes ver en tu pantalla, es la imagen de flor. Se trata de un gráfico restor, de lo contrario, imagen de mapa de bits. Si trato de escalarlo déjame mostrarte ahora puedes ver los píxeles en esta flor. Estos son nuestros pixeles con los que hizo la imagen. No podemos escalar la imagen restaurada ilimitada. Va a distorsionar la imagen. Aquí podrás notar el píxel sólido con diferente color. Este es el principal problema con las imágenes descansadas. Ahora hablemos de imagen vectorial, gráfico vectorial. Ahora bien, este es el ejemplo de la versión gráfica vectorial de esta flor. Si trato de hacer zoom a esta flor, ahora puedes hacer zoom a esta flor tanto como quieras. Ahora no se puede ver ningún píxel en esta imagen porque las formas de gráficos vectoriales se hacen con trazado cerrado, como este es un trazado cerrado, y este trazado cerrado se llena de colores. Es como un objeto. Por eso podemos escalar esta imagen forma ilimitada y no va a perder su calidad. Entonces esa es la principal diferencia entre la imagen raster y la imagen vectorial. En este tutorial, no voy a darte la introducción en profundidad de los gráficos Sigi porque es un tema enorme Ya creé un curso diferente sobre este tema. Puedes echarle un vistazo. Básicamente en este tutorial, nos estamos enfocando en la animación SAP, no en la animación SVG, sino que vamos a usar el gráfico SVG con GSAP Entonces veamos qué vamos a construir en este tutorial. Entonces como pueden ver, aquí abrimos un sitio web llamado Brandim punto NL, y si me desplazo un poco por esta página, aquí, se puede ver ejemplo ejemplo de animación SVG Esta línea. Aquí puedes ver una línea de cadena. Pero si calmo mis autos en la línea de cuerda, se puede ver un hermoso efecto de cuerda Aquí puedes notar, de acuerdo a mi posición del cursor, estiró esta cadena. Y si muevo mi cursor un poco más, ahora puedes verlo un efecto de cadena. Así que vamos a construir este efecto de cadena usando animación SVG. Esta línea hecha con SVG con etiqueta Put. Así que tenemos que entender qué se pone etiqueta y cómo podemos dibujar elementos de ruta usando la etiqueta Put. Entonces podemos aplicar animación GSP en esta tecnología de tope para crear este efecto Vamos a crear este tipo de efecto de animación SVG de seda usando GSAP Volvamos al código isal studio. Como pueden ver, estamos en mi editor de código sul studio, y ya creo Index Dotile style dot css file y script dot js file Ya creo la plantilla de caldera para el archivo iDexDTetiML Al principio, voy a vincular archivo CSS styledt con este archivo de estimación de punto índice Entonces aquí, estoy tecleando etiqueta de enlace. Enlace y Amutypty punto Css. Entonces dentro de mi etiqueta body, aquí voy a indag el archivo script tipo script Source Como fuente, voy a pasar este archivo script, script dot JS. Voy a establecer este archivo. Y ya abro este archivo usando extensión de servidor en vivo en mi navegador. Ahora, al principio, dentro de la etiqueta corporal, aquí voy a crear una etiqueta profunda. Así que tip Dev y aquí voy a asignar un ID a esta etiqueta profunda y nuestro nombre de identificación es cadena. Después dentro de la etiqueta string, vamos a crear la etiqueta SVG, el gráfico SVG. Pero antes vamos a saltar a la pila CSS de estilo, aquí voy a crear la plantilla iniciada para CSS Sot, selector universal, y dentro de la propiedad CalibrsF, voy a usar margin y voy a asignar margin toda la dirección cero Entonces voy a asignar padding, padding también cero. Diez, voy a agregar el tamaño de la caja. Voy a aplicar el tamaño de la caja. Box sizing border box, y además voy a asignar fuentes si usamos alguna familia de fuentes, pero de lo contrario, puedes omitirla. Así que voy a asignar familia de fuentes familia y voy a usar Franklin Gatheri esta Después de eso, voy a darle estilo a nuestra sección TML y cuerpo. Así ty HTL, cuerpo DML. Voy a darle estilo al ESTML y la etiqueta corporal. Primero, voy a asignar altura, altura para altura, voy a usar 100%. Voy a usar el 100% de mi pantalla. Y luego voy a asignar, con, y aquí voy a pasar al 100%. Después de eso, quiero asignar color de fondo a este cuerpo. Quiero decir esa etiqueta corporal, cuerpo, luego dentro de la Calibra dice, aquí voy a dar propina color de fondo, color fondo, y quiero poco color oscuro smut tiene etiqueta uno, uno, uno, gris oscuro Voy a establecer este archivo. Después de configurar este archivo, si te muestro mi navegador, así es como se ve nuestra página. Ahora, dibujemos un lienzo SVG en nuestra página web. Antes de crear cualquier forma SVG en nuestra página web, necesitamos definir un área de lienzo SVG para esta forma. Entonces dentro de esta área de lona en V, podemos dibujar la forma. Quiero crear un lienzo V de este punto a este punto, y voy a ascender de altura algo 600 pixel Déjame mostrarte lo que estoy tratando de crear. Supongamos que esta es la zona blanca es nuestra página del navegador, y en esta página del navegador, quiero definir un lienzo SVG. Quiero definir un tamaño de lienzo de este punto a este punto. Así que quiero tomar con casi 1920, y voy a tomar altura casi 600, algo así. Para entenderlo mejor, voy a aplicar un color de fondo a este gráfico V. Supongamos que aplico este color. Esta es nuestra área SVD Canvas. Ahora, dentro de esta área de V Canvas, podemos dibujar cualquier forma. Podría ser un círculo, una línea, etcétera. Pero para este ejemplo, necesitamos trazar una línea. Necesitamos dibujar una forma de línea. Entonces necesitamos trazar una línea desde este punto hasta este punto. Y como puedes ver, puedes notar, aquí alineamos esta línea verticalmente al centro de este lienzo. Y ahora necesitamos mover esta línea de acuerdo a la posición del cursor. Tenemos que cortar la línea de acuerdo a la posición del cursor, algo así. Para eso, necesitamos usar curvas sier cuadráticas. Así que saltemos al código del estudio de la visera. Y para definir un área de lienzo SVG, necesitamos usar la pestaña Vg Entonces para escribir SVG. Entonces dentro de esta está la etiqueta Vg. Primero, voy a asignar ancho. Entonces para escribir ancho con igual a, y aquí voy a asignar casi 1920 píxeles porque resolución de la pantalla de mi computadora es 1920 5,080 Entonces me voy a llevar con casi 1920. Entonces para escribir 1910. Entonces voy a asignar altura, altura igual a, y voy a tomar altura casi 600 pixel, lo contrario, 500, eso es bueno. Ahora vamos a saltar al archivo CSS de puntos de mosaico, y voy a darle estilo a este flujo de elementos profundos. Entonces copio su nombre de identificación, y voy a saltar al archivo CSS de punto de mosaico, y la etiqueta héroe tiene stream de etiquetas. Luego dentro de los versos coli, voy a asignar altura, ancho y color de fondo. Primero, voy a asignar altura, altura, y voy a tomar altura, igual que lo es Visigraphic Entonces voy a escribir 500 500 píxeles. Entonces voy a asignar con. Pero para la hierba, voy a asignar el 100%. Nosotros, voy a tomar el 100%. Entonces voy a asignar color de fondo. Color de fondo. Para eso, voy a usar algo de color de fondo casi, pero voy a usar una versión un poco más ligera porque necesitamos identificar esta zona, algo decolorar Que se puede identificar el área de la cuerda y el área del cuerpo. Entonces voy a configurar este archivo, y voy a saltar al navegador. Después de configurar este archivo, si vuelvo a mi navegador, aquí no se puede ver nada porque después de configurar este archivo, si vuelvo al navegador, aquí se puede ver el área, el área para el lienzo. Esta es la zona de lona para nuestra vigigrafía. Y ahora necesitamos trazar una línea. Tenemos que dibujar una cadena de este punto a este punto. Así que en la siguiente parte de este tutorial, vamos a crear un elemento path para dibujar una línea. Hay muchas cosas que debes saber sobre la etiqueta Path, así que no te voy a explicar todo en este tutorial. Estén atentos para nuestro próximo tutorial. 12. Elemento de trayectoria de Svg: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado VG con animación GSP Y hoy en este tutorial, vamos a aprender elemento path. Particularmente, vamos a aprender curvas cuadráticas bezier Básicamente, la etiqueta Path, de lo contrario, elemento path es la etiqueta avanzada en el gráfico VG Usando la etiqueta Path, podemos dibujar líneas curvas bezier cúbicas, curvas bezier cuadráticas y arcos, de bezier cuadráticas y arcos, o cualquier otra forma. Podemos dibujar forma de polígono, forma de poliano y cualquier tipo de forma que te imagines. Sin círculo. En el elemento de ruta SVG vienen con algunos comandos como comando de línea, comandamos sier curve, comando cuadrático sier curve , y comando arc Pero en este tutorial, estamos particularmente enfocados en la curva ser cuadrática porque necesitamos esta curva para crear la animación SVG de seda con GSAP Ahora, permítanme explicarles qué son las curvas cuadráticas de ser y cómo podemos dibujarlas. Para crear esta curva, necesitamos el punto inicial, el punto final y el punto de la curva. Este es el punto de acera. Según este valor puntual, va a frenar la línea. Supongamos que esta es nuestra área de lienzo para AVG art. Aquí asignamos 910 píxeles de ancho y 500 píxeles de alto. Ahora, primero, tenemos que proporcionar el punto de partida de esta línea. Entonces necesitamos proporcionar el punto de bordillo. Ahora la pregunta es, ¿cómo se puede definir el punto de partida? Aquí tenemos que pasar el valor XXS y el valor YXS. Aquí puedes ver que usamos comando. Sí, ser cuadrático empezar desde el comando. Entonces hay que pasar el primer punto Xs valor. Que es 20, y luego hay que pasar el valor YXS, que es 150 A continuación, debe pasar el valor de la curva, el valor cuadrático de la curva ser Entonces aquí, como puedes ver, desde los XXs pero antes necesitas escribir el comando Q, Q, entonces necesitas escribir el valor de x Entonces de las Xs, tomo 950 pixel y de las YxS aquí tomamos 20 pixel De acuerdo con este valor, podemos controlar el nese de acera de esta línea Y si quieres reducir la curva, puedes incrementar el valor Xs. Y por fin, hay que asignar el punto final de esta línea de este camino. Entonces este es nuestro punto final. De Xxs aquí tomamos 900 píxeles y de los YxS aquí tomamos 150 Y así es como podemos dibujar curva de cuadridad en SVG. Y recuerda, para crear la curva de cuadridad, aquí necesitamos usar un atributo llamado D. Así que saltemos al comensal de código Visa Studio e intentemos crear una Así que estoy de vuelta a mi codificador Viz Studio y ya abrí mi navegador usando la extensión Lifesaver Ahora necesitamos dibujar un PAT de este punto a este punto. Para eso, necesitamos usar la etiqueta Put. Déjame mostrarte cómo. Después dentro de la etiqueta SVC, voy a crear la etiqueta Put So tight PT Entonces dentro de esta etiqueta path, voy a usar un atributo. Necesitamos usar el atributo D para crear el P D para dibujar. D igual a dentro de las comillas dobles, como ya les dije, tenemos que comenzar con el punto de partida. Entonces, para definir el punto de partida, necesitamos usar A, entonces necesitamos proporcionar los xs que hacemos. De los Xxs voy a pasar 20 y de los YxS aquí voy a pasar el hub de esta altura, aquí voy a tomar 250 Entonces necesitamos definir el valor visir cuadrático. Entonces para escribir Q para valor zier cuadrático, voy a pasar 950 Esto es para que xxSF YxS'm pase 20. Entonces necesitamos definir el punto final. Para el punto final, voy a tomar 900. Este es el valor XXs, y para los YxS voy a tomar el mismo valor, 250 porque quiero dibujar una línea recta Después de eso, voy a definir trazo, trazo, trazo igual a, y quiero trazo color blanco. A continuación, voy a definir trazo weed, stroke, weed, y voy a asignar trazo con pixel. Entonces entonces voy a definir el color del campo, rellenar. Y para el color de campo, voy a asignar transparente. De lo contrario, va a por defecto, se va a rellenar con el color negro, especie de tipo transparente. Voy a satisfacer. Después de configurar este archivo, vamos a saltar vamos a saltar de nuevo al navegador. Como puedes ver, aquí dibuja una hermosa curva. Dibujo una hermosa curva cuadrática visir. Ahora bien, si cambio el valor de sier cuadrático, como el valor YxS, déjame mostrarte si lo cambio, si lo hago 100, va a reducir la curva Después de configurar este archivo, si vuelvo a mi navegador, se puede notar el resultado. Reduce las curvas de esta lima. Si quieres que sea una línea recta, en ese caso, aquí puedes pasar el mismo vdu Si paso 250 de los YxS y luego configuro este archivo y vuelvo a mi navegador, ahora puedes verlo dibujar una línea recta Aquí simplemente manipulamos el valor YX. También puedes cambiar XXS VDO. Supongamos que si cambio el valor XSS, supongamos para XXS voy a pasar 200 y para YXS también voy a Ahora puedes notar diferentes tipos de línea curva. Déjame mostrarte. Después de paso este archivo, si te muestro mi navegador, podrás ver el resultado. Ahora bien, así es como se ve nuestra curva. Ahora podemos cambiar el bordillo de esta línea según el valor de los cursores y el valor YXS Si muevo mi cursor en esa posición, acuerdo con los excesos del cursor y el valor YXS, podemos controlar la acera de este punto. Esto es lo que vamos a hacer en este proyecto. Ahora, volvamos al código de estudio. Ahora vamos a vincularnos con la animación GSAP. Entonces en mi navegador, voy a buscar SAP CDA, GSAP CDN Y desde este primer enlace, cinjs.com, voy a usar este enlace, y lo voy a copiar Después de eso, aquí, voy a pegarlo antes de este scrip dot JS cinco Entonces voy a saltar al archivo script dot js, y ahora voy a comenzar nuestra codificación. Al principio, en mi archivo JavaScript, voy a declarar ahí una variable y nuestra variable es P path igual a dentro de los códigos dobles. Aquí, voy a pasar este valor de atributo. Copio este valor, todo el valor, y lo voy a colocar aquí dentro de este camino. Entonces duplico esta línea y aquí estoy para escribir ruta final. Básicamente aquí voy a declarar dos variables. Trayectoria final igual al mismo valor. Posteriormente podrás entender por qué uso el mismo valor en una variable diferente. Después de eso, necesitamos seleccionar este el elemento, stream, y vamos a seleccionar este elemento profundo usando su nombre IN. Copio su nombre de identificación y de nuevo al stream punto jSpiPara seleccionar el elemento, necesitamos usar los métodos Dom Dom Necesitamos usar el método Dom. Necesitamos usar el selector de consultas. Selector QoI de punto de documento Suntye, selector punto oid de documento dentro la rotonda dentro de la etiqueta de doble curso hass, el flujo de nombre de ID, y voy a almacenarlo Aquí voy a declarar dónde y nuestro nombre de variable es cadena igual a asilarlo, este es el elemento stream. Después de eso, necesitamos aplicar un evento mouse a este elemento. Déjame mostrarte cómo. Si estás familiarizado con el modelo de objeto de documento Dom, entonces espero que no sea tan difícil para ti. Así que escribe la variable string dot add event listener, este Entonces dentro de la ronda dice, Aquí voy a usar event, un mouse event, voy a usar mouse move event, mouse move, y voy a llamarlo función. Después dentro del css y ella en pasar un coma entre ellos, luego dentro del CLIress, quiero imprimir el evento vdu Para imprimir el valor del evento dentro esta función será necesario pasar DEPs. Entonces dentro de esta función, si imprimo, Consola, si tomo Console dot dot log, dentro de las fechas resis redondas, y voy a configurar este archivo. Ahora, después de configurar este archivo, si vuelvo a mi navegador y abro mi consola. Déjame mostrarte. Ahora puedes notar cada vez que muevo mi cursor dentro de esta cadena dv area, lo contrario, esta área de elemento SVG, puedes notar que desencadena el evento del mouse. Como puede ver, cada vez que muevo mi cursor dentro de esta área, se imprime, imprimo el valor x de la pantalla, el valor pantalla y, el valor x del cliente y el valor Y del cliente. Devuelve la posición del cursor. Proporciona los XXS y YxS. Si muevo mi auto en esa sección, ahora puedes notar. Ahora puedes notar por los XXs aquí imprime 1,790 y de los YxS imprime 452. Ahora, volvamos al código del estudio de la visera. Y si imprimes solo el valor YX, solo tienes que escribir fechas punto Y. Después de establecer este archivo, si vuelvo a mi navegador otra vez, ahora si mi cur en esa área, ahora puedes verlo imprimir solo el valor YXS Entonces, según el valor XXs e YX, vamos a establecer el valor de la curva cuadrática Entonces va a mover la línea cada vez que mueva mi mouse. Entonces esto es para este tutorial, y el siguiente tutorial, vamos a aplicar la animación GSP en este stream Así que gracias por ver este video Sput. 13. Crea animaciones SVG lisas: Entonces esta es la última palabra de este tutorial, y en esa sección, vamos a animar esta línea de cadena usando animación GSP Pero al principio voy a comentar esta línea, no la necesito. Entonces dentro de esta función aquí, voy a llamar a este camino. Esta variable de ruta. Voy a escribir path entonces aquí, voy a usar backticks porque aquí vamos a aplicar el método de cadena de plantilla Voy a usar backticks, y luego voy a copiar este valor exacto Después de eso, voy a pegarlo aquí. Entonces, como saben, para mover la línea de cadena de acuerdo a la posición del cursor, aquí necesitamos cambiar el valor del punto cuadrático, estos valores Al principio, voy a cambiar el valor YXS. Entonces aquí voy a atar signo de dólar y calices. Este es el método de cadena Tremblt. Espero que ya esté familiarizado con eso. Y aquí voy a pasar el valor YXS. Voy a atar DE ts punto Y. voy a decir esto bien. Ahora podrías pensar después de eso va a funcionar. No, no va a funcionar porque no aplicamos, no aplicamos esta ruta a este atributo. Necesitamos cambiar el atributo, y necesitamos aplicar esta ruta a este atributo. Para eso, podemos usar GSP. Déjame mostrarte cómo. Pero antes, voy a hacer esta línea de cuerda recta. No es recto. Entonces aquí, voy a empatar de los Xxs voy a tomar cuadrático zer 0.19 Y de los YxS voy a pasar 250, y voy a poner este archivo Después de establecer este archivo, aquí puedes ver ahora hace que nuestra línea sea recta. Ahora para sustituir el valor del atributo, aquí vamos a aplicar GSAP Entonces dentro de esta función, voy a escribir GSAP punto a método Entonces necesitamos al principio, necesitamos apuntar al elemento en el que elemento quiero aplicar la animación, que es SVG, y ahí voy a apuntar a esta etiqueta de ruta. Entonces voy a atar la ruta así que desde la etiqueta SVG, quiero apuntar a la etiqueta Pat. Después de eso, uso coma. Entonces dentro de la liss aquí voy a usar una característica de animación GSP, que es atributo, er, AT R. Usándolo, podemos reemplazar cualquier valor de atributo Y dentro de la liss y si te muestro mi archivo de estimación de índice, quiero cambiar el valor del atributo Así que aquí para pasar D. Entonces dos puntos aquí, quiero reemplazar con esta variable de ruta. Quiero reemplazar este atributo, el atributo antiguo, esta variable de ruta. Entonces escribe path aquí. Pero es la propiedad predefinida de la animación GSP. Usándolo, podemos cambiar cualquier valor de atributo. Primero, apuntamos a la ruta SVG usando su nombre de etiqueta, luego apuntamos al atributo D y reemplazamos el valor del atributo con este PAT. Y como saben, según la posición del cursor, va a reemplazar el valor YX, el valor YX de cuadridad. Entonces después de eso, voy a decir duración. Y voy a establecer duración 0.3 segundos. Entonces antes de establecer este archivo, necesitamos reemplazar este valor de ruta con el valor de atributo. Copio éste y aquí, voy a sustituir este valor por este nuevo valor. También, necesitamos cambiar la posición, así que quiero hacerla desde las Xs quiero asignar 950. Y luego voy a poner este archivo. Son este archivo, si voy a saltar a mi navegador, según el cursor, posición xs, bordillo la línea. Ahora así es como se ve. Como puedes ver, ya es empezar a seguir el cursor y frenar la línea. Ahora, tenemos que hacer lo mismo para X xs. Ahora es trabajo sólo para la dirección YXS. Y ahora quiero su seguimiento de los XXs también. Para eso, volvamos al editor de código. Y aquí, voy a sustituir este valor. Voy a usar signo de dólar y los hígados es voy a escribir ts punto XXs Ahora después de configurar este archivo, si vuelvo a mi navegador otra vez, ahora se puede ver, ahora sigue el cazar desde las Xs y YXS también Se ha cambiado el valor de la cantidad zer Xs y YxS según la posición del cursor Entonces así es como se veía. Ya casi terminamos. Solo necesitamos aplicar algún efecto de flexibilización para obtener el resultado, para obtener el resultado perfecto Entonces aquí, voy a abrir una nueva pestaña y voy a buscar SAP, fácil. Si abro este documento, ahora pueden ver aquí proporciona algunos efectos de flexibilización Puedes probar uno por uno, todo ello. Así es como funcionan los efectos de flexibilización. Voy a usar este un poder tres, el poder tres fuera. Entonces voy a copiar esta propiedad y Valor. Y luego voy a saltar al editor de código. Y aquí, voy a escribir, voy a pegar este código. Es salida de alimentación de tres puntos. Y voy a poner este archivo. Básicamente, va a proporcionar un efecto de animación sin problemas. Entonces configuro este archivo si vuelvo a mi navegador y vuelvo a cargar esta página Ahora puedes notar ahora que nuestra animación funciona sin problemas. Ahora necesitamos resolver un problema. Si muevo mi cursor fuera de esta caja, ahora puedes notar que esta cadena no vuelve a la posición original otra vez. Es nadar tal como es, según el último valor del cursor. Entonces necesitamos resolver este problema. Entonces para eso, necesitamos aplicar otro evento mouse. Así que volvamos al editor de código, y aquí, voy a escribir cadena aunque voy a aplicar un oyente par de nuevo, Añadir incluso oyente Entonces dentro de la ronda ss, esta vez voy a usar mouse leave event. Algún tipo mouse deja, mouse deja, luego lo voy a llamar función. Función. Después dentro del Carlss, voy a aplicar G SAP, y necesitamos usar dos métodos. Después dentro del caliss primero, necesitamos pizarra el PAT Voy a copiar el mismo selector SVG y PAT. Después de eso, dentro del clss nuevamente, necesitamos cambiar el valor del atributo Necesitamos cambiar el valor de atributo de esta etiqueta de ruta. Para eso, de nuevo, voy a usar o propiedad ATTR. Entonces dentro del CLSSH' lo voy a decir D y voy a decir esta vez lo voy a poner con Copo el nombre de la variable, y voy a pegarlo aquí. Y como pueden ver, en nuestro camino final, el pelo trazamos una línea recta. Nada más. Después de eso, voy a pasar coma. Además, voy a agregar poca duración, duración, y voy a decir duración, 1.5 segundos. Puedes ajustar tu duración de acuerdo a tus nips y yo voy a configurar este archivo Después de configurar este archivo, si vuelvo a mi navegador, ahora puedes notar que es seguir mi cursor. Esta cadena es seguir mi cursor y dobla la cadena según la posición del cursor. Pero cuando dirijo esta zona, ahora se puede ver que ha vuelto a su propia posición. Pero el problema sigue siendo que no es como una cuerda de guitarra. Para eso, para lograr este efecto aquí para lograr este efecto, necesitamos volver a las funciones is de esta sección, voy a usar el efecto elastrc, este efecto, este efecto de cadena Y voy a perseguir el valor. Para el primer valor, voy a usar uno y para el segundo valor, aquí voy a usar 0.2, y voy a copiar toda la sección. Es. Entonces voy a saltar al pequeño código de estudio aquí después de la coma, en la siguiente línea, voy a pegar el Vd Elástico hacia fuera. Después de configurar este archivo, si vuelvo a mi navegador y reescribí mi navegador, ahora puedes ver cada vez que mueva mi cursor fuera de esta área, esta línea actúa como un efecto de cuerda de guitarra Se puede notar. Es un trabajo perfecto. Siempre que muevo mi ratón en esta zona, como pueden ver, sigue el ratón. Pero cada vez que muevo mi ratón fuera de esta zona, vuelve a su posición original, y da poco efecto rebote. Y ahora por fin, voy a cambiar el color de fondo color de fondo de este elemento. Entonces aquí, voy a saltar al archivo stylo CSS, y nuevamente, voy a usar 111 Y voy a poner este archivo. Después de configurar este archivo, volvamos al navegador, ahora se ve perfecto. Empieza a funcionar cuando muevo rango de mi mouse de esta área SVG, y realmente es cuando muevo mi mouse fuera de él. Entonces así es como podemos crear este hermoso efecto usando SVG y GSAP Así que gracias por ver este video. Estén atentos para nuestro próximo Tutorial. 14. Construye una animación de cursor personalizada: Hola chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo tutorial. Pero hoy en este tutorial, vamos a ParomePject Vamos a construir una animación de cursor personalizada usando GSA Entonces déjame mostrarte la demostración lo que vamos a construir en este tutorio Como puedes ver en tu pantalla, aquí y yo creo una página web. Y si muevo mi cursor en esta página web, ahora puedes ver este pequeño círculo seguir mi cursor. Dondequiera que mueva mi cursor en esta página, sigue mi cursor. Pero también, quiero mostrarte otra cosa. Si me Huber mi curar, lo contrario mover mi cursor en esta imagen, ahora se puede ver que aumentó el tamaño del cursor, el tamaño del cursor personalizado Además, muestra algo de texto, como m. Pero si elimino mi curar de este elemento, nuevamente, se vuelve pequeño y quita el texto de este cursor, el cursor personalizado. Esto es lo que vamos a construir en este proyecto con la ayuda de la animación GSP Entonces comencemos lo práctico y saltemos al editor de código de Visual Studio. Por último, como pueden ver, estamos en mi editor de código de Visual Studio, y ya creo index dot estalPage style dot Sass file y scrip dot Y como pueden ver, ya vinculo con archivo Style en mi página de estimación. Además, vinculo el archivo Script DJs con esta página de estimación. Para crear este tipo de animación de cursor personalizada, debemos tener conocimientos sobre Java Script Dom. Dom significa modelo de objeto de documento. Espero que ya estén familiarizados con eso. Y si no tienes ningún conocimiento dom, no te preocupes. Vamos a aprenderlo cuando lo apliquemos. Ahora, vamos a saltar al archivo CSS para iniciar el repetidor CSS Entonces aquí, voy a escribir. Primero, voy a establecer el inicio del selector universal, luego dentro de la Clase, voy a poner Margen Margen cero. Además, voy a poner relleno. Cero. Entonces voy a asignar el tamaño de la caja, el tamaño caja, y voy a usar el valor de la caja de borde. Si quieres proporcionar alguna familia de fuentes, puedes por ahora, voy a usar la familia de fuentes aerial. Éste. Después de eso, necesitamos definir alto negado a nuestro cuerpo y HTML. Tipo HTL, cuerpo de coma. Dijo la altura calivss, voy a asignar altura al 100% Y luego voy a asignar con con el 100%. Voy a establecer este archivo. Después de configurar este archivo, volvamos al archivo ATL de punto índice Ahora dentro de la etiqueta body, quiero crear un cursor personalizado, pero antes, voy a crear un div principal soltVhTag main Entonces este es nuestro principal elemento div. Dentro de este elemento div principal, quiero crear un cursor dip Soltv tiene cursor de etiqueta Este es nuestros autos a D. Después de eso, si abro este archivo en mi navegador, déjame mostrarte y si reservo esta página, es como se ve. Es mostrar nada. Entonces quiero asignar un color de fondo. Color de fondo a este elemento DV principal. Alguien que use su nombre de identificación para seleccionarlo, algún tipo, tiene principal. Entonces dentro de la Calibra dice, al principio quiero asignarle altura de altura al 100%, y Wi también la pasan 100 Entonces quiero asignar color de diagrama. Color de fondo, quiero colores oscuros legales para usar hastag uno, uno, uno, y voy a configurar este archivo Después configuré este archivo, si vuelvo a mi navegador y vuelvo a cargar este navegador, ahora, así es como se veía Yo uso este color de guardia, ahora necesitamos definir el cursor. Tenemos que darle estilo a la sección del cursor, este cursor. Para eso, voy a seleccionar el cursor, HtagKursor luego dentro del Cariss voy a Altura, 20 píxeles. Entonces voy a asinht W 20 pixel. Y voy a asignar color de fondo. Color de fondo, voy a usar color blanco. Blanco. Voy a establecer este archivo. Si configuro este archivo y vuelvo a mi navegador y relaciono esta página, es como nuestros autos se ven como una pequeña caja cuadrada. Parece una pequeña caja cuadrada. Ahora necesitamos y ahora necesitamos convertir esta caja cuadrada en un círculo. Para eso, voy a usar radio fronterizo. Déjame mostrarte cómo. Entonces escribe radio de borde, y voy a asignar 50%. Va a convertir esta caja cuadrada en un círculo. Después paso este archivo, si vuelvo a mi navegador y devuelvo mi navegador, así es como se ve. Entonces después de crear el CurSR ahora necesitamos ir a saltar al archivo JavaScript. Tercero, voy a seleccionar el archivo de parodias Js. Al principio, necesitamos apuntar a los autos R usando su nombre de identificación. Para ello, vamos a usar los métodos Dom, modelo de objeto de documento. Entonces voy a escribir documento selector Qui, selector Quiri Entonces dentro de la rotonda dice, dentro del curso Duval, voy a seleccionar este elemento, el elemento principal usando su nombre ID Entonces para escribir tiene etiqueta y voy a almacenarla en una variable. Entonces aquí, voy a escribir dónde, y nuestro nombre de variable es principal. Hombre igual a este elemento. Entonces voy a duplicar esta línea, y esta vez, voy a seleccionar el cursor de la misma manera. Entonces voy a usar de nuevo su nombre de identificación, cursor copio el nombre del ID, y voy a reemplazar main por cursor. Además, voy a cambiar el cursor del nombre de la variable. Y voy a satisfacer. Entonces aquí apuntamos al principal elemento profundo. También apuntamos al cursor Dev elemento. Ahora quiero agregar un oyente parejo a nuestro principal elemento profundo Para eso, voy a escribir punto principal, oyente Aden, oyente Adwin, y quiero usar el evento de movimiento del mouse Si muevo el ratón, sigue el cursor del ratón Quiero que el cursor dVElement siga el cursor del ratón. Así que dentro del curso Doble, voy a usar el movimiento del ratón. Este es el nombre de nuestro evento. Mover el ratón. Después de eso, necesitamos definir una función para llamarla función. Entonces dentro de las rondas, dentro de la Cal resis, aquí, quiero imprimir la posición del cursor, de lo contrario, los datos del cursor. Entonces dentro de la Cal res por ahora, quiero imprimir, consola dot log, consola dot log. Dentro del resus redondo dentro de los códigos dobles, voy a escribir evento evento realizado Se va a imprimir este mensaje. Entonces voy a configurar este archivo. Después de configurar este archivo, si vuelvo a mi navegador, déjame mostrarte y encender la consola y cargar este navegador. Ahora puedes ver cada vez que muevo mi cursar en esta zona, se imprime evento realizado en nuestra consola Así que cada vez que muevo mi mouse, va a imprimir, va a activar esta función. Ahora veamos qué son la función está escrita. Volvamos al código de estudio otra vez aquí, voy a pasar un nombre de variable. Aquí puedes tomar cualquier nombre de variable. Por ahora, voy a tomar fechas. Si imprimo este valor en mi función, déjame mostrarte algún tipo, consola dot log. Dentro de los brrses redondos voy a escribir. Voy a pasar el nombre fechas. Ahora, veamos qué va a devolver, cuándo pero antes voy a comentar esta línea, ya no necesito esto. Ahora, veamos qué va a devolver cuando mis autos estén en él. Así que configura este archivo si vuelvo a mi navegador y abro mi consola. Ahora bien si descargo mi navegador y muevo mis autos están en esta zona en mi ventana, aquí puedes verlo proporcionar nuestros autos XSS y YXS Y esto es lo que necesitamos para seguir el cursor. Para eso, solo para usar XXs y YxS. Volvamos al editor de código. Básicamente, esta variable devuelve un objeto y a partir de este objeto, podemos extraer diferentes valores como xxS YxS, pantalla xxs, pantalla YxS, Según los eventos, eventos como patada, doble patada, va a devolver diferentes valores. Ahora volvamos al mosaico o archivo CSS aquí, voy a definir la posición de este cursor y voy a usar posición fija. Aquí utilizo posición fija, no absoluta. Ahora, volvamos al navegador. Si abres algún evento de mouse como este evento de mouse y lo desplazas un poco, aquí puedes encontrar el valor y el valor Y y necesitamos que esto valore. Volvamos al código de visa studio y saltemos al archivo scrip dot js Y si quieres imprimir el valor X y el valor Y en tu navegador, de lo contrario, si quieres extraer el valor, como si quiero extraer el valor X, entonces si configuro este archivo y vuelvo al navegador y vuelvo a cargar este navegador y si inspecciono esta sección, consola, ahora puedes ver si acojo consola, ahora puedes ver si mi cus en este elemento, de lo contrario, en este DV principal elemento, ahora se puede ver que proporciona el valor Xcess Si lo muevo hacia el lado derecho, ahora puedes ver el más alto en, y si lo muevo hacia el lado izquierdo, puedes ver el valor inferior. la misma manera, se puede acceder al valor Y xs para extraer altura para ancho, utilizamos Xs. Vamos a llegar al cotrato y ahora aquí podemos usar GSAP. Para eso, necesitamos usar GSF CIN. Entonces vamos al navegador y busquemos SAF CEN. Del SAP CiRin aquí, quiero extraer este enlace Cdian Necesitamos el enlace CdIn, así copio este enlace Sirio, y así copio el enlace del CDin, y lo voy a pegar antes de este squib.s5, y voy a Después de eso, después de eso, necesitamos volver al scredt JSFi Ahora dentro de este evento, podemos aplicar la animación GSP Y aquí voy a usar KSA, punto, voy a usar dos métodos, dos porque quiero mover el elemento desde su posición inicial Por eso utilizamos dos métodos. Después dentro de los vestidos redondos. Ahora, dentro del contrabajo al principio, necesitamos apuntar al elemento Podemos apuntar al elemento usando su nombre de ID, pero ya apunto al elemento y almacenamos este elemento en esta variable media. Lo siento, cursor. Así que tenemos que apuntar a los elementos del cursor, así que voy a escribir cursor aquí. También puedes apuntar al elemento usando su cursor Dime. De lo contrario, nombre de la etiqueta. Porque ya lo apunto usando Dom y lo guardo en una variable. Por eso aquí paso directamente la variable adentro. Después después del coma dentro de la clase. Ahora un dejar que el elemento carsor usando GSAP, podemos definir la posición X xs del elemento carsor Déjame mostrarte como algún tipo X de los Xxs voy a definir fechas X. Luego para los YxS, voy a definir fechas Y. Voy a establecer esta Ahora después de establecer este archivo, veamos que va a funcionar en knock. Creo que va a funcionar. Vamos a saltar al navegador y volver a cargar el navegador. Voy a cargar este navegador. Entonces si Wopi cursor dentro de este elemento Min Div, de lo contrario, Min div área. Como puedes ver, está iniciando, sigue el cursor. Además, proporciona poca transición por defecto. Su aspecto muy bonito. Como puedes ver cuando muevo mi cursor, según la posición del cursor y la posición YX, el círculo sigue al cursor y cuando detengo mi cursor, luego el cursor se detiene según la posición del cursor Ahora vamos a llegar al código z studio A. Ahora, aquí puedes aplicar duración efecto de flexibilización, delay, lo que imagines Aquí puede usar el efecto de alivio de rebote, el efecto alivio de espalda y muchos Pero por ahora, no voy a usar ningún efecto de flexibilización. Entonces esta es la primera parte de este tutorial. En este tutorial, aprendemos cómo podemos crear la animación de cursor personalizada. No es muy difícil, pero en la siguiente parte de este tutorial, lo voy a llevar al siguiente nivel. Así que gracias por ver este video. Estén atentos para la siguiente parte. 15. Crea una animación de cursor personalizada Parte 2: Hola. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con otro tutorial relacionado con este proyecto, y esta es la segunda parte de este tutorial. En la parte anterior de este proyecto, aprendemos cómo podemos seguir nuestro cursor usando la animación GSP Y ahora voy a llevar este proyecto un paso más allá. Ahora, hagámosle al código de estudio de usuario. Entonces como pueden ver, estamos en mi código de estudio Visa, y voy a mover este cursor fuera del área principal de Div. Sí, podemos mover este cursor fuera del área principal de Div todavía va a funcionar. Y aquí, dentro del elemento principal Div, voy a tomar otro elemento DV, y voy a asignar imagen ID. Imagen de hashtag. Ahora vamos a darle estilo a este elemento D, imagen. Voy a copiar su nombre de identificación y volver al archivo CSS de estilo. Y aquí voy a seleccionar el elemento usando su nombre ID. Después dentro de los colores primero, voy a asignar altura, altura, y voy a usar VW unidad 30 VW Entonces voy a asignar hierba, y aquí quiero pasar 70 VW. Y también, voy a asignar un color de fondo color de fondo, y quiero asignar. Y aquí voy a asignar fondo color rojo. Y quiero sub éste. Y antes de abrir esta página en mi navegador, ahora necesitamos correr algo. Aquí puedes notar que no cerramos esta etiqueta de auto, así que voy a mover esta etiqueta dip de cierre por encima de la etiqueta Dip principal, y voy a configurar este archivo. Entonces después configuré este archivo, si vuelvo a mi navegador, ahora puedes ver que se veía así. Ahora después de eso, necesitamos alinear este elemento a mitad de esta página. Para eso, vamos a usar flix. Este es el método flix. Déjame mostrarte cómo. Dentro del elemento dip principal, voy a usar display Flix, y voy a escribir Justify content center. Alinear artículo, Centro. Y voy a poner este archivo. Después configuré este archivo, si vuelvo a mi navegador nuevamente y vuelvo a cargar este navegador, aquí puedes ver que reproduce este elemento de imagen a mitad de esta página horizontal y verticalmente Y ahora necesitamos una imagen. Ya abro un sitio web llamado unplas.com. De aquí, voy a seleccionar esta imagen. Puedes seleccionar cualquier imagen que depende de ti. Entonces voy a dar click sobre esta imagen. Me gusta esta imagen para este proyecto, así que voy a copiar la dirección de la imagen, copiar dirección de imagen. Y luego volvamos a la con un código de estudio. Y aquí, voy a establecer la imagen de fondo, imagen de fondo, y voy a pasar la URL. Voy a establecer este archivo. Up to set this file leads back to the browser. Y aquí, voy a recargar mi navegador. Aquí, también necesitamos definir la posición de fondo y el tamaño para eso. Voy a escribir posición de fondo, que es centro. Y el tamaño del fondo, el tamaño del fondo es Cobur. Si configuro este archivo y vuelvo a mi navegador nuevamente y vuelvo a cargar esta página, ahora puedes ver la imagen completa Y ahora quiero seleccionar este elemento div de imagen en nuestra página de JavaScript. Así que volvamos a la página de JavaScript y aquí necesitamos crear un selector para el elemento imagen imagen DV. Duplico esta línea, y aquí, voy a sustituir a Karza por imagen Y luego voy a usar esta imagen de identificación. Y voy a sustituir cursor por imagen. Y voy a poner esto bien. Y ahora quiero aplicar agregar incluso oyente a este elemento, este elemento de imagen Entonces aquí, voy a escribir imagen punto añadir incluso oyente. Luego dentro de la ronda brr dice, primero, tenemos que seleccionar el evento del mouse Aquí voy a usar mouse Enter event, I'm type, mouse Enter. Básicamente, vale la pena si abro el mouse, lo contrario ingrese este mouse por esa razón en este desarrollo. Y luego un tracoma, necesitamos llamar a una función Entonces dentro de los clivrss quiero aumentar el tamaño del desarrollo de nuestros autos Entonces, ¿qué significa eso? Siempre que ronco mi cursor, lo contrario ingrese mi cursor por ese motivo esta región de imagen, quiero aumentar el tamaño de este cursor personalizado, este círculo Para eso, y aquí voy a aplicar GSA, y voy a usar GsaT dos MTHDGSA dos Después dentro de rondas primero voy a sel cursor. Entonces después del coma dentro de los cálices, quiero escalar nuestro elemento casar Entonces aquí, voy a usar la propiedad de escala. Escala y voy a establecer valor de escala dos, y voy a establecer este archivo. Entonces, después de configurar el archivo, volvamos al navegador y recarguemos el navegador Así que donde quiera que mi cursor sobre esta imagen resina, como pueden ver, escalar el tamaño personalizado del cursor. Pero si quito mi cursor de esta área, no va a escalarlo. Además, tenemos que resolver este problema. Ahora, volvamos al editor de código. Por ahora, voy a aumentar el tamaño de la escala. Voy a hacer cuatro. Y también, tenemos que manejar si quitamos nuestro cursor de esta área, el área de imagen. Para eso, voy a duplicar esta línea, y esta vez, voy a usar otro evento, que es mouse leave. Y esta vez quiero reducir el tamaño de la escala, quiero que sea una, y voy a configurar este archivo. Después de configurar este archivo, si vuelvo a mi navegador y reescribí mi navegador, ahora puedes ver cada vez que mueva mi mouse en esta área de imagen, aumenta el tamaño del cursor, este cursor personalizado Pero si lo elimino de esta área de imagen, se reduce a escala Pero puedes notar que tenemos un problema. Si dejo de mover mi cursor dentro de esta área de imagen, ahora puedes ver robar escalar hacia abajo el tamaño del cursor. Yo no lo quiero. Tenemos que manejar este problema. 16. Crea una animación de cursor personalizada Parte 3: Entonces vamos a eso al z studio coedtor otra vez. Para resolver el problema, aquí podemos usar overlay. Pero antes de que tengamos que entender por qué se produce este problema, déjame mostrarte por qué. Así que vamos a eso al navegador y puedes ver cuando muevo mis autos en esta zona, se hace grande cuando dejo de mover mi cursor, se vuelve pequeño. Porque esta vez vuelvo mis autos están por encima de los autos o elemento círculo, no por encima del elemento de imagen Por eso pierde el evento del ratón y vuelve a ser pequeño. Por eso se encoge cada vez que dejamos de mover nuestro cursor. ¿Pero qué? Si me muevo mis autos están fuera de este pequeño círculo, ahora puedes volver a ver que se ha vuelto grande. Pero cada vez que me detengo, de nuevo, se vuelve más porque ahora nuestros autos se ciernen sobre estos autos son área circular, no el área de imagen Para resolver el problema, necesitamos usar una superposición. Déjame mostrarte cómo. Aquí se puede notar después de detener el cursor, se ejecuta ratón dejar evento. Ahora la pregunta es por qué se ejecuta ratón dejar evento? Porque ahora coloco mi curor sobre este círculo, este círculo pequeño, no la imagen Por eso se llama mouse leave event y reutiliza el tamaño de este cursor. Pero si quito mi cursor de este pequeño círculo, de nuevo, se vuelve grande. Pero después de detener mi cursor, de nuevo, se vuelve pequeño, porque esta vez llamó al evento de dejar el ratón. Para resolver el problema aquí, necesitamos aplicar una superposición. Déjame mostrarte cómo. Básicamente, el problema es que este elemento de inmersión de Karza se interpuso entre el elemento de imagen y crear el problema Entonces para resolver el problema, al principio dentro de este elemento de imagen profunda, voy a tomar una etiqueta de imagen, IMG Y como fuente, voy a proporcionar la misma ruta de archivo, esta URL. Entonces copio esta URL de este lugar, lo contrario, corté esta URL de este lugar y la voy a poner aquí. Con eso, también, necesitamos eliminar estas propiedades de esta posición. No lo necesito en ese lugar y aquí, necesitamos crear un nuevo selector. Primero, voy a seleccionar el elemento image y dentro de este elemento image, quiero apuntar a la etiqueta image, IMG Entonces dentro de los versos de Cari aquí, voy a definir la altura nuida Voy a usar el 100%. Además, voy a usar con el 100%. Ahora, Harry no use ninguna imagen de fondo para esta imagen elemento DV, pero en nuestro TML, usamos etiqueta de imagen Ahora, aquí, dentro de esta etiqueta de imagen, quiero crear una superposición. Quiero asignar una superposición de ID. Entonces voy a configurar este archivo. Después de eso, también, es necesario que se ajuste a esta imagen, así que voy a usar otra propiedad fit, object feed copper. Voy a configurar este archivo y volver a mi navegador. Ahora bien, si vuelvo a cargar mi navegador, se ve así. Vaya, la imagen está rota. Porque aquí como fuente, necesitamos pasar la URL absoluta. Así que voy a eliminar este comando URL y luego establecer este archivo. Ahora vamos al navegador E y recarguemos el navegador. Ahora se ve bien. ¿ Crees que resolvió el problema? No. Aún así, no es resolver el problema porque necesitamos darle estilo al elemento overlay. Entonces aquí, voy a seleccionar la superposición su nombre de ID, y voy a apuntar a la superposición. Entonces dentro del rizado dice, voy a usar color de fondo, color de fondo. Voy a usar el color rojo. Y luego aquí, voy a asignar altura, altura y anchura, altura. Para la altura, voy a usar el 100%, 100% del área de la imagen. Entonces voy a asignar con nosotros también al 100%. Voy a sub este archivo. Ahora configuro este archivo. Si me delto mi navegador, es como se ve porque creamos esta superposición antes de la imagen, no por encima de la imagen Pero necesitamos este elemento de superposición en posición absoluta. Pero antes de aquí, necesitamos proporcionar en nuestro elemento de imagen la posición relativa relativa, y nuestra posición de superposición Absoluta. Voy a poner esto bien. Ahora, después de configurar este archivo, si vuelvo a mi navegador y vuelvo a cargar mi navegador, ahora se ve así ¿Pero qué? Si reduzco la opacidad Si reduzco la opacidad de este elemento, el elemento de superposición Entonces aquí, voy a establecer fondo de color transparente. Y voy a poner este archivo. Después configuré este archivo, ahora, si vuelvo a mi navegador, aquí puedes ver ahora no puedes ver el elemento overlay, pero si yo su mi cursor sobre este, el elemento image, esta vez tenemos otro problema. El problema es que nuestro elemento cursor vaya detrás del elemento div de la imagen. Necesitamos aumentar el valor del índice Z de este elemento cursor. De nuevo, volvamos al código visa studio, y voy a aumentar el valor del índice Z del cursor índice Z. Voy a convertirlo en el índice Z uno. Y voy a poner este archivo. Después configuré este archivo, si vuelvo a mi navegador y luego mi navegador y quienquiera que sean mis tarjetas en este elemento, aquí puedes ver el resultado. Pero aún así devuelve el problema porque entiendo el problema. Volvamos al rayo de bacalao. Porque necesitamos resolver este problema, el problema del índice Z, si lo hago nueve y muevo el elemento overlay por encima del elemento Karza Entonces aquí, voy a usar el valor del índice Z en mi superposición. Así que usa el índice ZD diez. Así que aquí básicamente muevo el elemento de superposición por encima del elemento cursor y luego configuro este archivo y de vuelta al navegador. Ahora recarga mi navegador. Yo abro mi auto sobre este elemento, ahora no se ve el problema. Ahora es palabra muy fina. Ahora se puede ver que no reduce el tamaño del casar. Resolvemos el problema con éxito. Ahora bien, si quieres agregar texto sobre este elemento, estos autos son elemento, sí, puedes. Puedes poner cualquier cosa. Puedes poner texto, imagen o cualquier otro objeto. Para eso, puedes usar el método Dom. Déjame mostrarte cómo. De nuevo, volvamos al código de semental, y saltemos al guión Js five. Siempre que entre en mi cursor, entonces quiero agregar un texto en este elemento en este elemento cursor. Aquí quiero cambiar el interior del cursor Mytype HTML interno, y lo voy a establecer int el doble curso, pocos más Ver más. Y cuando quite mi cursor del área de imagen, en ese caso, no quiero decir nada, espacio vacío. Quiero sub este archivo. Después configuré este archivo, si vuelvo a mi navegador y vuelvo a cargar mi navegador, ahora puedes ver cuando muevo mi cursor sobre esta área de imagen, puedes ver el texto ver más, pero necesitamos poner el texto dentro del elemento profundo de Karza Para eso, vamos a saltar al archivo CSS de estilo. Aquí, estoy en mi archivo CSS de puntos de estilo, y necesitamos darle estilo a la sección del cursor. Ahora dentro del selector de cursor, primero, voy a definir el tamaño de fuente. Voy a definir el tamaño de fuente, y voy a hacer que sea de cinco píxeles. Y entonces necesitamos alinear esta fuente dentro de este pequeño círculo, este círculo. Para eso, voy a usar display display flex. Y alinee el artículo alinee, el centro del artículo. También, necesitamos centrar los contenidos. Voy a atar justificar centro de contenido. Y además, voy a usar texto alinear texto, alinear, centrar. Después de configurar este archivo, si vuelvo a mi navegador, déjame mostrarte y leer mi página y mis tarjetas están en este elemento, ahora puedes ver el texto perfectamente. Se alinea perfectamente con el elemento autos. Entonces esto es lo que estamos tratando de construir en este proyecto. En este cursor personalizado, puedes poner cualquier cosa aquí. Como puedes ver, si barra mi cursor sobre este elemento, aumenta el tamaño, y si elimino el cursor de este elemento, disminuye el tamaño, y también desvanece el texto Así que construimos con éxito nuestro proyecto. Gracias por ver este video estad atentos para nuestro próximo proyecto. 17. Crear diseños de línea de tiempo animada parte 1: Oigan, chicos, me alegro de volver a verles. Una vez más, estoy de vuelta con un nuevo tutorial relacionado con la animación DSP Hoy en este tutorial, vamos a crear un hermoso proyecto. Vamos a crear un proyecto de línea de tiempo de animación horizontal. Como puedes ver en mi navegador, tenemos una línea horizontal. Y aquí puedes ver, creamos una línea de tiempo usando estas cajas. Ahora quiero animar esta caja cuando descargo mi navegador. Para que puedas notar cuando vuelva a cargar mi navegador, primero, puedes ver que movió la línea horizontal, luego una por una, va a animar nuestras cajas Cajas con efecto arcos, efecto rotación efecto escala. Ese efecto, y por fin, movemos esta caja desde la dirección opuesta. Entonces, ¿cómo podemos crear este efecto de animación? Como saben, para crear este efecto de animación, vamos a utilizar la línea de tiempo de GSP Además, vamos a utilizar las propiedades SAP zing. Entonces, sin perder el tiempo, comencemos lo práctico y veamos cómo podemos crear esta hermosa animación. Entonces como pueden ver, estamos en mente viseras Stu Ceditor. Y si notas puedes ver en nuestra etiqueta corporal, tenemos una etiqueta Deep principal. Y dentro de esta etiqueta principal Deep, cómo creamos múltiples cajas. Aquí creamos un total de seis cajas, y cada caja viene con diferente identificación. Con eso, aquí asignamos un cuadro de nombre de clase a cada elemento DP. Y para definir la posición de la caja, también asignamos a otras clases box top para posición superior, y para box bottom para posición inferior. Utilizamos esta clase para posicionar nuestro elemento por encima de la línea horizontal. Además, tenemos otro nombre de clase pantanos de fondo. Y estos vidrios se utilizan para colocar cajas debajo de la línea horizontal. Ahora, vamos a saltar al archivo CSS. Si te muestro el archivo CSS, al principio, asignamos ancho y alto fijos a nuestra etiqueta profunda principal, y además establecemos un color de fondo. Entonces ella creamos una línea horizontal usando el selector de Posido después de posito Primero, creamos un contenido blend, luego lo posicionamos absoluto porque en nuestro elemento principal, Heros usa position relative. Por eso aquí utilizamos la posición absoluta. Entonces utilizo altura fija entonces Con altura, seis pixel a Con 1920 pixel. Entonces después de crear la línea horizontal, aquí creo las cajas, estas cajas. A continuación, creo estos círculos. Aquí creamos dos círculos diferentes para box top y las clases box bottom. Para crear los círculos, utilice también posidoselector superior Como puedes ver, este círculo y el surgieron hechos con selectores de positovidrio fin, uno por uno, coloco esta caja de acuerdo a la línea horizontal. En este tutorial, no voy a explicarte cómo puedo crear esta estructura TMS No te preocupes, voy a proporcionar el código fuente de esta estructura. Ahora, saltemos al archivo Js, archivo apt JS. Pero antes, si te muestro mi archivo TML de punto índice, aquí puedes ver, ya me vinculé con biblioteca SP usando CDN También adjunte el archivo JS de punto de aplicación con este documento. Así que vamos a eso al archivo de app dot js. Entonces primero, voy a integrar timeline. Entonces voy a crear un costo variable y nuestro nombre de variable es TL. TL sta para línea de tiempo igual a la función GSAPGsAptLine. Entonces Semgron dos en esta línea. Después de crear la línea de tiempo, uno por uno, quiero implementar todo el elemento. Al principio, quiero implementar el elemento principal. Entonces voy a seleccionar el nombre de la clase. Y luego de vuelta a la app s cinco. Al principio, voy a usar la función Form. Tal punto desde entonces dentro de la rotonda al principio, voy a seleccionar el elemento principal usando su nombre de clase punto Ming, y quiero mover este elemento en dirección XX Dentro de la caries, heterotipo X, colon, dentro de los códigos dobles -100 Si configuro este archivo y vuelvo a mi navegador y vuelvo a cargar mi navegador, puedes ver el resultado Como puedes ver, movemos este elemento principal del lado izquierdo a derecho. Creo que esta animación es demasiado rápida. Vamos a usar algo de duración. Entonces aquí, voy a usar propiedad de duración. Duración, y aquí voy a usar la fuerza total de nuevo duración. Creo que esto es suficiente. Si configuro este archivo y vuelvo a mi navegador y vuelvo a cargar mi navegador, puedes ver el efecto Como puede ver, toda la sección se mueve del lado derecho en 4 segundos. Pero si vuelvo a cargar este navegador, como pueden ver, el color de fondo del cuerpo sigue siendo blanco Ahora, tenemos que hacer coincidir el color de fondo de este cuerpo con este color. Para eso, voy a saltar al archivo CSS de estilo. Y aquí, voy a usar el mismo color de fondo en mi etiqueta corporal. Entonces al principio, voy a seleccionar la etiqueta corporal. Cuerpo está en el enfría es, voy a usar esta propiedad de fondo, y voy a establecer este archivo Ahora, si vuelvo a mi navegador y lo vuelvo a cargar, ahora nuestro color de fondo del cuerpo y el color de fondo del elemento principal es similar para que esta animación sea más atractiva, hagámosla 100% -100%, no pixel Si configuro este archivo y vuelvo a mi navegador y vuelvo a cargar mi navegador, puedes ver la animación, cómo es loop Esto es solo animación de la sección principal. Pero como te dije en nuestros tutoriales anteriores, usar servidor en vivo no es la mejor opción para animación CSS porque cada vez que guardo mi archivo, vuelve a cargar el navegador Entonces voy a pausar esta grabación por 2 segundos. Y esta vez, abro este documento desde mi directorio, no desde el servidor en vivo. Entonces, al principio, en nuestra línea de tiempo, movemos este elemento principal desde la dirección de exceso de -100% Aquí usamos timeline porque uno por uno, quiero separarme de mi animación. A continuación, voy a seleccionar nuestra casilla un elemento, este. Así que copio el nombre de identificación y vuelvo al archivo de app dot js. Y aquí voy a atar. Básicamente, voy a duplicar esta sección y reemplazar el punto Min con nuestro primer cuadro usando su nombre de identificación, hasta cuadro uno. También, quiero mover este elemento de XX deducción, y aquí quiero decir duración apenas 1 segundo Y yo modo con este archivo. Ahora, volvamos al navegador. Si vuelvo a cargar este navegador, al principio, va a realizar la animación principal, luego va a realizar la segunda animación Pero el problema está en ejecutar la animación para el primer elemento, estos círculos van detrás de la línea horizontal. Entonces, para resolver el problema, volvamos al archivo CSS style dot. 18. Crear diseños de línea de tiempo animada parte 2: Entonces este es nuestro archivo CSS de estilo. Esta es la línea horizontal. Entonces al principio, en nuestra línea horizontal, voy a establecer el índice z, índice Z, y voy a establecer el índice Z uno. Entonces voy a poner el índice Z en nuestra caja. Entonces voy a escribir índice Z, y aquí voy a pasar 999. Y voy a poner este archivo. Aquí uso gran valor porque cada vez que necesito mis cajas por encima de la línea horizontal. Por eso aquí digo línea horizontal cero índice uno, y cuadro cero índice 999. Si configuro este archivo y vuelvo a mi navegador y vuelvo a cargar este navegador, esta vez puedes ver hasta ejecutar la animación principal Se movió la caja. Y como se nota, esta vez nuestro círculo está por encima de la línea horizontal. Con eso, quiero que esta animación box sea más atractiva. Entonces aquí voy a decirlo opacidad. Entonces volvamos al archivo Adder Jas, y esta vez voy a usar otra propiedad llamada opacidad, OPA CITY, opacidad, cero Entonces cuando la caja empiece a moverse desde la dirección de la xx, entonces establecemos el oposit cero Si vuelvo al navegador y cargo mi navegador, ahora puedes ver repunte en la animación principal Si notas con cuidado, ha funcionado correctamente, pero si aumento la duración, si lo hago tres segundos para la animación de la caja, y luego otra vez, volver al navegador y volver a cargar el navegador Primero ejecuta la animación media, ahora puedes notar la opacidad Aquí puedes notar la opacidad de este elemento, cómo ha cambiado Y ahora quiero llevar esta animación al siguiente nivel. Para eso, necesitamos usar algún efecto de flexibilización. Entonces saltemos a la documentación de este sitio web y busquemos flexibilización, EASI Z. Puedes buscarlo en esta sección de verso lateral de filtro Tset proporciona un ejemplo de animación de alivio múltiple, como Power one, power two, power three, power four, back, bounds, elastr, etcétera Cada opción es diferente entre sí. Supongamos que si selecciono power dos, así es como va a correr nuestra animación. Si utilizo de nuevo, así es como va a funcionar nuestra animación. Esta es la toma de esta animación. la misma manera, si quieres usar el efecto Illustr, así es como funciona el efecto illustr Supongamos que quiero usar este efecto, Ilustría. Entonces quiero copiar esta propiedad y valor y luego volver al código del estudio. Y aquí, presioné la duración, 2.2 0.5 segundos. Entonces voy a usar coma. A continuación, voy a utilizar esta propiedad y valor Illustry Y voy a poner este archivo. Después configuré este archivo, si vuelvo a mi navegador y vuelvo a cargar este navegador, plataforma superior la animación principal Se puede ver el efecto Illustr para el primer elemento. Por ahora, me gustaría detener la animación profunda principal porque cada vez va a ejecutar la animación y lleva más tiempo. Entonces primero, voy a comentar esta sección. No te preocupes. Voy a descomentar esta sección más adelante. Entonces voy a configurar este archivo y volver a cargar mi navegador. Ahora solo puedes notar esta animación. Y si quieres cambiar el efecto, supongamos que quieres usar B. En ese caso, justo aquí, necesitas escribir está de vuelta. Hasta archivo satis, si vuelvo a cargar mi navegador, puedes verlo efecto de vuelta. Ahora, de la misma manera, quiero traer este elemento desde la dirección opuesta. Quiero traer este elemento desde el lado derecho. Esta vez, quiero traer nuestro último elemento desde el lado derecho. Entonces voy a duplicar esta sección, y esta vez voy a seleccionar la casilla número C porque esta es la última casilla. Deslizamos esta caja usando su nombre de identificación, y luego voy a cambiar la posición Xs al 100% de la Xs. Si configuro este archivo y vuelvo a mi navegador, y vuelvo a cargar mi navegador Al notar, la primera caja viene de este lugar y la segunda caja viene de esta dirección. Poner la animación haciendo lo mismo, pero sólo para cambiar la dirección. A continuación, voy a usar bouncyft para este elemento, 2012. Si selecciono esta opción, ya puedes ver cómo funciona esta animación. Así que volvamos al código del estudio de visera. Entre la caja uno y la caja seis, quiero colocar la animación de la caja dos. Quiero que sea serial así que duplique esta sección y seleccione la casilla dos, y voy a cambiar el valor e de nuevo a bound. Y también necesitamos cambiar la posición, es a YxS menos posición YXS Y voy a poner este archivo. Después de configurar este archivo, recorremos el navegador. Después de redirigir el navegador, una animación de ejecutar la primera caja, va a ejecutar la segunda animación va a ejecutar la segunda Uy, creo que cometí algún error porque necesitamos traer esta caja de abajo, no de arriba Así que vamos a llegar al código de reser studio y eliminar el -100% y establecer este archivo Después de configurar este archivo, nuevamente, voy a recargar mi navegador Después de ejecutar la primera animación, puedes notar la segunda animación, cómo es el trabajo, y proporciona el efecto de arcos. Después ejecuta la tercera animación. Entonces voy a animar la tercera caja. Entonces vamos a llegar al código visual st, y voy a duplicar esta sección Y esta vez voy a seleccionar la casilla número tres, y voy a cambiar la dirección -100% Con eso, ahora con límites, quiero algún efecto giratorio Entonces voy a usar una propiedad llamada rotate. Gire dos puntos, y quiero girarlo 360 grados, un círculo completo. Y voy a poner este archivo. Después de configurar este archivo, si vuelvo a mi navegador y vuelvo a cargar mi navegador, primero ejecuta nuestro primer elemento, luego va a ejecutar el segundo elemento Y si notas, como puedes ver, inclina el elemento. También gira el elemento. A continuación, voy a apuntar a la cuarta casilla. Así que de nuevo, estoy de vuelta al código de estudio de usuario y duplicado número tres. Primero, voy a cambiar la dirección 100% porque quiero moverla desde abajo. Entonces voy a usar el mismo efecto rebote. Pero esta vez no voy a usar efecto de rotación. Esta vez, voy a usar rueda de báscula. Escala, colon, y quiero hacer escala 0-1. Entonces aquí paso cero. Pero antes de establecer este archivo, necesitamos cambiar el ID, casilla número cuatro. Y voy a poner este archivo. Ahora, recarguemos el navegador. Después de recargar el navegador, si notas el cuarto cuadro, podrás entender la animación Con efecto rebote , escala el elemento. Y ahora quiero animar el quinto elemento. Para eso, esta vez voy a usar otro efecto. Esta vez, voy a usar efecto lento. Así que volvamos a la con un código de estudio. Y primero, voy a duplicar esta sección. Entonces voy a cambiar el ID, casilla cuatro a cinco y cambiar rebote a lento. Al principio, voy a cambiar la dirección -100%, y voy a quitar la escala uno Esta vez, no voy a aplicar efecto escala. Y voy a poner este archivo. Después de configurar este archivo, volvamos al navegador y recarguemos el navegador Después de recargar el navegador, como puedes ver, uno por uno, va a realizar todas las animaciones Animación hinchable, animación giratoria, animación a escala, animación de efectos lentos Y animación de espalda desde la dirección opuesta. Y ahora voy a activar mi animación D principal. Así que volvamos al código de Video studio y descoventemos esta sección y establecemos este archivo Ahora, volvamos al navegador y recarguemos mi navegador. Ahora se puede ver, primero, se puede ver una línea horizontal que viene de esta dirección, luego una por una, realiza toda la animación. Entonces, finalmente, creamos esta animación de efecto de línea de tiempo usando GSAP Entonces esto es para este tutorial. Gracias por ver este video. Quédate une para el Siguiente Tutorial. 19. Crea animaciones de texto impresionantes con GSAP, parte 1: Hola, chicos. Es bueno verte de vuelta. Una vez más, estoy de vuelta con un nuevo proyecto relacionado con la animación GSP Hoy en este tutorial, vamos a aprender este hermoso proyecto. Entonces como puedes ver Weber, vuelvo a cargar mi navegador, puedes notar la animación Entonces esto es lo que vamos a construir en este proyecto. , para este proyecto, deberíamos tener Sin embargo, para este proyecto, deberíamos tener poco conocimiento sobre JavaScript. Entonces, sin perder el tiempo, comencemos la práctica. Tenemos que seleccionar todos los caracteres uno por uno de esta palabra. Entonces necesitamos animarlo por separado, pero lo vamos a hacer usando animación SAP Vamos a usar strager. Además, vamos a poner cada carácter de esta palabra en un Span thag dinámicamente Entonces comencemos lo práctico y veamos cómo podemos crear este proyecto de animación. Entonces finalmente, estamos en mi coditor de Visual Studio, y como puedes ver en mi directorio de trabajo actual, ya creamos tres archivos, indice dot tv file, scrip dot js file, y styler CSS file Y como puedes ver en index dot ETvlfle, ya nos vinculamos con el archivo Stylo Además, nos vinculamos con script dot js file. Que ya usamos la tinta Cdian o animación GSP. Y en nuestro archivo CSS de estilo, ya escribimos la tableta iniciada para el CSS Él estableció margen cero relleno cero, caja de tamaño de la caja de borde, y también proporcionamos altura y ancho a la etiqueta de estimación y la etiqueta del cuerpo. Después de eso, voy a abrir esta página. Voy a abrir este archivo en mi navegador. Y lo voy a abrir sin usar servidor Live. Entonces como puedes ver en mi navegador, nuestra página está completamente vacía. Después al principio, voy a escribir el texto usando encabezado una etiqueta. Déjame mostrarte cómo. Entonces aquí, voy a escribir H uno. Entonces dentro de la etiqueta H one, voy a pasar Hello World. Voy a fijar esta. Después de pasar la etiqueta de encabezado uno, necesitamos darle estilo a la página web. Vamos a saltar al estilo o archivo CSS. Al principio, voy a seleccionar la etiqueta corporal. Cuerpo de la etiqueta. Después dentro de la etiqueta body, dentro de los cursos, voy a proporcionar color de fondo. Color de fondo, y quiero un poco de color más oscuro. Voy a usar Hastag 111. A continuación, voy a usar este flix porque necesitamos mover este encabezado una etiqueta al medio de esta página vertical y horizontalmente. Voy a usar este tipo ofperty display flex. Y alinee el artículo, alinee los artículos al centro. Después de eso, justificar el contenido, también centro. Entonces voy a configurar este archivo. Up configurar este archivo permite volver al navegador. Ahora si vuelvo a cargar mi navegador, como pueden ver, se ve así Nuestro texto es apenas visible. Entonces necesitamos cambiar el color del texto. Voy a cambiarlo a color blanco. Entonces aquí, voy a escribir. Primero voy a seleccionar la etiqueta H una, H una. Después de eso, dentro del color dice, voy a asignar color. El color y nuestro color es el blanco. Color blanco. Entonces voy a aplicar tamaño de fuente. Tamaño de fuente. Y para este ejemplo, voy a usar 150 fix el tamaño de la fuente, y voy a volver a configurar este archivo. Ahora volvamos al navegador otra vez. Si vuelvo a cargar mi navegador, se ve así. Ahora, vamos a saltar al archivo JavaScript y seleccionar este elemento. Quiero decir el elemento H uno. Para eso, necesitamos usar el método Dom. Así que aquí, voy a saltar al archivo de script DJs, y voy a escribir document dot query selector Selector de consultas. Después de eso, dentro de las direcciones redondas, dentro del doble curso, voy a usar su nombre de etiqueta que es H uno. Después de este documento, quiero extraer el contenido del texto. Quiero decir, quiero extraer este texto, hola mundo. Y como pueden ver, aquí uso hola palabra juntos. No proporciono ningún espacio entre ellos. Entonces esto es, por ejemplo, puedes escribir cualquier cosa vendrá lo que quieras escribir. Entonces en ese lugar, quiero extraer el contenido del texto, el contenido del texto. Entonces voy a almacenarlo en una variable. Para eso, voy a declarar una variable ahí y nuestra variable es g uno, donde H uno igual al documento punto selector de consulta punto Tex Content, y voy a configurar este archivo. Ahora bien, si trato de imprimir esto en mi consola, déjame mostrarte algún tipo console dot log. Consola dot log dentro de la dirección redonda, quiero imprimir la variable H uno Entonces voy a poner el archivo. Después de configurar el archivo, si cavé a mi navegador, déjame mostrarte y volver a cargar esta página Entonces si te muestro mi Consola, ahora puedes ver en mi consola se imprime la palabra hola. Por lo que selecciono con éxito el sabor y lo guardo en una variable. Ahora, tenemos que dividir este texto. Tenemos que dividir el texto por caracteres. Para ello, necesitamos usar un método llamado split text. Así que volvamos a saltar al código de estudio. Y aquí, voy a empatar primera vez comentario de esta línea, lo contrario, se puede quitar esta línea. No necesitamos esta línea. Entonces voy a etiquetar eso y a nuestra variable mis y escupir texto Texto rápido. Escupir texto igual a h una velocidad de punto. Después dentro de las comillas dobles, y quiero dividir la prueba por caracteres. Ni el espacio, ni ningún otro personaje. Quiero dividir el texto por todos los caracteres. Entonces voy a usar cita vacía, ésta. Entonces si configuro este archivo y trato de anclar esta variable en mi consola, déjame mostrarte algunos para escribir, Consola, log de punto. Dentro del Bress redondo, pasaré el texto de velocidad variable Entonces voy a configurar este archivo. Después de configurar este archivo, si vuelvo a cargar mi navegador y enciendo, inspecciono y mostrarte de nuevo mi consola, ahora puedes ver aquí iTanne Básicamente, dividir la palabra por sus personajes. Aquí puedes ver todo el personaje de manera diferente. Además, se puede ver su número de índice, cero H en posición cero, tenemos H en una posición de índice, tenemos E. Así es como dividimos todos los caracteres. 20. Crea animaciones de texto impresionantes con GSAP, parte 2: Y ahora necesitamos ejecutar un bucle especial. Necesitamos ejecutar un bucle especial para este texto dividido. Vamos a correr para cada bucle. Entonces déjame mostrarte cómo podemos usar para cada bucle. Tenemos que ejecutar esto para cada bucle en la variable, split text. Voy a escribir, dividir, texto, tat para cada uno. Después dentro del receso redondo, voy a pasar la función. Función, y por ahora, voy a pasar función vacía, luego dentro de las maldiciones. Pero antes, voy a declarar la variable vacía vacía. Déjame mostrarte ahí, desorden, RUSTER traqueteo igual a que es un Vd vaciado Te diré más adelante por qué defino esta variable. No te preocupes por ello. Ahora, hablemos de para cada bucle. Se va a ejecutar ¿cuántos valores tienen en esta variable? Según el número de valor en la variable de pretexto, se va a ejecutar el bucle Supongamos, como pueden ver, en esta palabra, hola mundo, tenemos que decir diez caracteres, así que va a correr este bucle para contar diez veces. Entonces si tenemos que decir cinco palabras, entonces va a correr el bucle por cinco veces. Entonces para cada elemado va a ejecutar este bucle. Por eso se llama para cada bucle. Supongamos que si escribo console dot log, console dot log, log dentro de la roundra si paso hola y luego configuro este archivo y de vuelta al navegador Si vuelvo a cargar mi navegador después recargar mi navegador, si abro mi consola, ahora puedes ver que va a volver a en hola en mi Aquí puedes ver, tenemos que diez hola en mi Consola, imprimí TNT porque tenemos que tal TN carácter en nuestra palabra Así que vamos a llegar al editor de código, pero no quiero imprimir hola. Aquí quiero volver a unir el texto dividido. Y ahora quiero almacenar cada carácter de esta variable de texto en esta variable, este desorden variable vacío Entonces voy a escribir clutter, igual a clutter, además aquí puedes usar el método estándar de cadena Entonces voy a escribir Batis luego dentro de los backticks. Pero antes, tratemos de entender lo que quiero hacer. Por ahora, no voy a escribir backticks, y aquí voy a escribir cualquier carácter, cualquier palabra Supongamos hola. Voy a poner este lado. Básicamente, va a almacenar diez veces hola en esta variable de plato Aquí voy a imprimir consola dot log. Consola dot log dentro los vestidos redondos voy a pasar el desorden vari Y voy a poner este archivo. Después configuré este suelo, si vuelve a mi navegador y leí mi navegador, ahora se puede ver en mi consola, se imprime hola tiempo. Cada vez va a agregar la palabra hola en la variable clutter una por una la misma manera, quiero almacenar todo el carácter de esta variable de texto de velocidad. Básicamente, quiero imprimir esta misma palabra, hola palabra. Para eso, necesitamos usar dactis. Déjame mostrarte cómo. Entonces aquí, voy a escribir. Voy a usar atajo, último, más igual, incrementar con cada vez que se va a incrementar con un Entonces dentro de la doble co dentro de los Bates, dentro de los Batixs quiero almacenar la misma Pero antes, necesitamos definir una variable en nuestra función. Aquí voy a definir M. Este valor M almacenó el carácter actual. Así que Hearty, método de cadena de tabletas, signo de dólar, y clss Después dentro de los Calses voy a pasar la variable nombre M y voy a volver a guardarla Después de configurar este archivo, si vuelvo a cargar mi navegador y si te muestro mi consola, ahora puedes volver a ver en forma impresa Hello World Ahora podrías tener duda, ¿por qué hago lo mismo? ¿Estoy lleno? No, no lo soy. ¿Por qué escribí la misma palabra hola palabra usando mucha coca? Porque ahora tenemos control sobre cada carácter usando JavaScript. Ahora podemos poner cada carácter en una etiqueta span. Déjame mostrarte lo que vamos a hacer. Entonces, como pueden ver, si quiero animar todos los personajes uno tras otro, de otra manera diferente, entonces necesitamos poner todos los caracteres en una etiqueta span para seleccionarla de manera diferente. Pero, ¿qué? Si tenemos varias palabras como hola palabra, es un total de diez caracteres. Para eso, necesitas iterarlo y necesitas separar los caracteres de las palabras Y ahora voy a poner toda la palabra en etiqueta Span usando la ayuda de Dom. Así que aquí, voy a escribir span tag. Déjame mostrarte cómo span, Dan, closing tag, span, y voy a configurar este archivo. Después configuré este archivo, si vuelvo a mi navegador y luego borro mi navegador, y si te muestro mi consola, ahora puedes verlo poner todo el carácter en etiqueta span, y también puedes ver la sección de elementos. Déjame mostrarte. No, no te va a mostrar ahora porque no aplicamos este resultado en nuestro elemento. Déjame mostrarte. Tenemos que aplicarlo primero en nuestro elemento. Entonces volvamos al coordinador, y luego voy a cambiar la estimación interna. Entonces escribe H un punto HTML interno, igual a, y aquí, voy a poner esta variable traqueteo. Y luego voy a poner este archivo. Básicamente, hacemos todas estas cosas para poner a cada personaje en una etiqueta span, nada más. Pero antes de establecer este archivo, vamos a desglosar esto. No voy a usar una línea así que voy a duplicar esta línea. De lo contrario, sí, voy a duplicar esta línea. Primero, voy a cambiar el nombre de la variable. Aquí, solo selecciono el elemento. No voy a extraer el texto y no voy a guardarlo DAT en esta variable. Y nuestra siguiente variable es H un texto. H uno toma Eguir dos y Hemo tipo H un punto Éste. Entonces básicamente, primero seleccionamos este elemento, y luego extraemos texto de este elemento. Después de eso, necesitamos escupir esta palabra. Por cada personaje. Esta vez, voy a reemplazar H uno H un texto, y voy a configurar este archivo. Ahora quiero configurar este archivo, volvamos al navegador. Como puedes ver, estamos en mi navegador y voy a recargar mi navegador Después de recargar mi navegador, si te muestro mi Consola, de lo contrario , sección de elementos, ahora puedes ver en mi etiqueta corporal, tenemos H una etiqueta Entonces si abro esta H una etiqueta, ahora la puedes ver poner. Aquí puso etiqueta Span para cada carácter para H E L O WORLND así que ahora tenemos el control sobre cada uno de los elementos debido a la etiqueta span Ahora podemos controlar a cada personaje. Por eso necesitamos poner todo el carácter dentro de la etiqueta span. Esto es para la contraseña de este tutorial. En la siguiente palabra de este tutorial, vamos a aplicar la animación iGSP de cada personaje Entonces, gracias por ver este video, mantente atento para nuestro próximo capítulo. 21. Crea animaciones de texto impresionantes con GSAP, parte 3: Hola, chicos, es bueno volver a verles. Esta es la segunda parte de este proyecto. En esa sección, vamos a aprender cómo podemos animarlo usando GSA Pasemos al código vis Studio. Estamos en mi visor Studio editor de código. Al principio, voy a saltar al scrip punto tiene archivo. Ahora, al principio, con la etiqueta Span quiero asignar un nombre de clase a esta etiqueta span. Para eso, primero, voy a escribir dentro de la clase de etiqueta Span. Clase igual a dentro del código doble. Dentro del código doble, voy a usar el método de cadena tentada, signo de dólar y surge Entonces en nuestra función, quiero acceder al índice. Primero, va a devolver el elemento, me refiero al personaje uno por uno. Después con el personaje, también va a devolver su número de índice. Voy a escribir índice IND. Aquí voy a pasar índice, IND variable IND. Voy a establecer este archivo. Ahora después de configurar este archivo, si redirecciono mi navegador, déjame mostrarte algunos para redirigir mi navegador y mostrarte mi consola inspeccionar Consola, de lo contrario, etiqueta del cuerpo. Ahora puedes ver dentro de mi etiqueta span, tenemos una clase. Esto es el número de clase cero porque nuestro índice comienza con cero y tenemos un total de diez etiquetas de span diferentes. Para todas las diferentes etiquetas span, asignó un número de clase diferente. Se le asignó diferente nombre de clase. No voy a usar clases en este proyecto, pero solo te voy a presentar. ¿Cómo podemos asignar clase para diferentes etiquetas span? Ahora, volvamos al código de estudio. Después de eso, primero voy a quitar esta línea, no necesito esta línea, luego voy a ejecutar la animación GSAP Así que escriba G, gsaT punto de. Voy a usar de método. Desde y dentro de los vestidos redondos, al principio, voy a apuntar a la etiqueta H one. Entonces voy a pasar dentro de los códigos dobles H uno. Luego después del espacio, quiero apuntar a la etiqueta span, que está dentro de la etiqueta H one, así que escriba span. Y luego después de la coma, dentro de los alias, voy a escribir desde los YxS quiero mover 100 pixel Entonces va a ejecutar la animación desde los cien píxeles YXS hasta o está en su lugar Entonces si configuro este archivo y vuelvo a mi navegador, si lo vuelvo a cargar, no va a ejecutar la animación Déjame mostrarte. Entonces si vuelvo a mi navegador y vuelvo a cargar esta página, como pueden ver, no ejecutamos la animación porque ahora déjame aclarar una confusión Como puedes ver, este Pentag el cual es creado por JavaScript en nuestra página timal. Es un elemento inline. No es el elemento permanente. Entonces tenemos que hacerlo bloque en línea. Tenemos que hacerlo en bloque de línea en nuestro archivo CSS. Así que este elemento span dentro de H una etiqueta, tenemos que hacerlo bloque en línea. Entonces dentro del archivo CSS de la infancia, aquí, voy a seleccionar H una etiqueta H una. Por encima de eso, hasta apuntar al H uno, también, necesitamos apuntar a esta etiqueta span, span. Entonces dentro del Clss voy a usar la propiedad llamada display Display y aquí voy a escribir inline block. Voy a establecer este archivo. Ahora después de hacerlo bloque inline, voy a configurar este archivo y volvamos al navegador. Si yo mi navegador, ahora puedes verlo ejecutar la animación. Ahora, agregue poco otras propiedades en esta animación. Para eso, aquí, voy a agregar poca opacidad. Opacidad, opacidad, y voy a asignar opacidad Va a comenzar desde cero y luego vuelve a la de opacidad Después de eso, también voy a agregar duración. Duración por duración, voy a sumar 1 segundo. Además, voy a agregar lay y quiero 0.5 segundos de retraso para cada una de las animaciones. Entonces quiero ejecutarlas, toda la animación de personajes una tras otra. Entonces para eso, usamos el valor stagger. Ya llenamos ahí de escalonamiento, esta propiedad. Stagger, y voy a asignar stagger 0.150 Básicamente, va a ejecutar todo el elemento span uno tras otro. Entonces después de configurar este archivo después de configurar este archivo, si vuelvo a mi navegador y si leo mi navegador, ahora se puede ver que va a ejecutar un hermoso efecto de animación. Va a ejecutar toda la animación de personajes una tras otra. Déjame mostrarte. Entonces después de relacionar mi navegador, ahora puedes verlo ejecutar esta animación. Esto toma animación, lo bello toma efecto animación. Ahora, hagamos que esta animación sea más genial. Para eso, voy a tener esta zona de desbordamiento. Déjame mostrarte cómo. Entonces si vuelvo a mi archivo stylo CSS y le asigno un color de fondo a esta etiqueta H one, color de fondo, rojo, entonces voy a configurar este archivo Después de configurar este archivo, si vuelvo a mi navegador y a mi navegador, así es como se ve, pero quiero esconderme cuando envíe mensajes de texto fuera de esta área. Para eso, aquí, voy a usar una propiedad llamada overflow. Desbordamiento oculto. Además, ya no necesitamos este color de diagrama. Por ejemplo, después de configurar este archivo, si ahora puedes notar cada vez que vuelva a cargar esta página, no va a mostrar los personajes fuera del área roja. Déjame mostrarte. Vuelva a cargar esta página, puede ver el resultado. Se pueden ver los personajes fuera de la zona roja. Ahora bien, si escondo esta zona roja, déjame mostrarte así que si oculto este color de fondo y luego vuelvo al navegador y vuelvo a cargar este navegador, es como se ve nuestra animación de texto Entonces esto es para esta parte de este tutorial, y la siguiente parte de este tutorial, vamos a hacer esta animación más bella y más complicada. Para eso, necesitamos hacer algunos cálculos complicados en JavaScript. Así que gracias por ver este video Stdune para nuestra siguiente parte de este tutorial 22. Animación de texto desplazable Parte 1: Hola, chicos. Me alegro de verte de vuelta. Una vez más, estoy de vuelta con un nuevo proyecto relacionado con la animación GAP. Hoy, vamos a realizar animación de texto de desplazamiento usando GSAP Entonces, como pueden ver, este es el texto. Cuando me desplazo hacia abajo en mi página, como pueden ver, inicia la animación. Pero cuando me desplazo hacia arriba por esta página, como pueden ver, inicia la animación en dirección opuesta. Entonces esto es lo que vamos a crear en este tutorial. Vamos a cambiar de dirección donde nos desplazamos por nuestra página. Si nos movemos hacia abajo, entonces va a ejecutar esta animación en esa dirección, y si nos movemos hacia arriba, entonces va a cambiar la dirección. Y además, se puede notar que cambió la dirección de la flecha. Entonces, sin perder el tiempo, comencemos la práctica y veamos cómo podemos crear esta hermosa animación de texto de desplazamiento Entonces como puedes ver, estamos en mi editor de código Studio de usuario, y este es mi directorio de trabajo actual. Y como puedes ver, ya creamos index dot estimate file, style dotsssfle y screen dot Y ya abro este documento de EstiML en mi navegador. Después la página Timel. Y además, se puede notar, ya adjunto el Cdanlink de animación SAP Después también adjuntar con pantalla dot js archivo. Ahora al principio, dentro de mi etiqueta corporal, aquí voy a crear un total de tres elementos profundos. Entonces t deep tiene etiqueta, y su ADN es la página uno. Y de la misma manera, voy a crear otros dos elementos profundos. Yo du esta línea, y esta es la página número dos, y esta es la página número tres. Entonces estos son todos emt D para página. Después de crear las tres páginas, voy a saltar al estilo o archivo CSS. En esa sección. Como pueden ver aquí ya aporto acolchado de margen y también wetyle la mesa y nuestro tanque corporal Básicamente, es la plantilla por defecto de CSS. Ahora, al principio, voy a seleccionar la página uno. Entonces después del coma, voy a raja tiene etiqueta, página dos. Entonces estoy tiene etiqueta, página tres. Después dentro de la librass primero, voy a asignar altura, altura, 100 H. Y luego voy a asignar Ancho, ancho cien persit Entonces después de configurar este archivo, si vuelvo a mi navegador, aquí puedes ver la barra de desplazamiento. No le proporciono ningún color de fondo a esta página, y si quieres asignar diferente color de fondo para esta página, sí, puedes, pero no voy a hacer eso. Después de eso, ahora vamos a saltar al archivo index dot tML. Después dentro de la página a sección en este elemento Dev. Aquí voy a llevar otro elemento Dev. Primero, voy a escribir Dev tiene etiqueta, y su Dame es mover porque esta es la zona móvil. Aquí vamos a mover todo el texto. Ciclomotor aquí voy a crear otro Delement DV y su nombre de clase es Mark Mark Entonces dentro de este elemento Dv, aquí, voy a tomar una H una etiqueta H una. Entonces dentro de este H un elemento de etiqueta, voy a escribir, hola, bienvenido a GR. Bienvenido a GSR. Entonces voy a configurar este archivo. Después de establecer este archivo conduce de nuevo al gauser. Entonces como pueden ver, si me desplazo un poco hacia abajo, aquí pueden ver el texto. Hola, bienvenido a GSA. Y también, necesitamos agregar un erosim en esa posición. Después del texto, en esa posición, después del texto. Para eso, ya me descargo un icono. Flecha punto VG. Si abro esta imagen, aquí puedes ver el resultado. Esta es la imagen que vamos a utilizar para flecha. Puedes encontrar este tipo de imagen de flecha fácilmente en sitios web. Solo necesitas buscar flecha derecha lo contrario flecha izquierda. Entonces voy a usar esta imagen VG en esa posición después de la etiqueta H one Así que escribe etiqueta de imagen. Voy a usar Image tag IMG image. Y como fuente, voy a pasar flecha punto SVG. Entonces voy a volver a configurar este archivo. Después de configurar este archivo, volvamos al navegador. Si vuelvo a cargar mi navegador, así es como se ve. Ahora necesitamos alinear esta flecha después del texto. Pero primero, necesitamos reducir el tamaño de la flecha. Así que volvamos al código de estudio y saltemos al archivo stylo CSS Entonces primero, voy a darle estilo al elemento move div. Para eso, voy a seleccionar hashtag move. Muévete dentro del Caliss, voy a usar la propiedad de color de fondo, color Bground, y voy a asignar color de fondo amarillo Ahora voy a poner este archivo, pero antes de poner este archivo, creo que cometí algunos errores, no es mover, es ciclomotor ED Entonces voy a configurar este archivo. Después configuré este archivo, si vuelvo a mi navegador y ahora se ve así. Después agregue el color de fondo amarillo al área de estado de ánimo. Ahora tenemos que poner esta flecha hacia arriba, este texto. Pero antes, necesitamos reducir el tamaño de esta flecha. Para ese cabello, necesitamos seleccionar la etiqueta de imagen. Seleccionamos esta etiqueta de imagen que está dentro de esta clase MR. Entonces copia el nombre de la clase, luego voy a seleccionar el MRF MR Quiero seleccionar la imagen IMG Después dentro de las cláusulas, quiero asignar altura. Voy a asignar altura, altura, y voy a pasar el valor 70 pixel y voy a establecer este archivo. Después de configurar este archivo, si vuelvo a mi navegador y reescribí mi navegador, ahora es bueno. Se ve bien. Ahora, después de reducir el tamaño de esta flecha, quiero seleccionar la etiqueta H one que está dentro de la clase MR. Entonces para escribir punto Mark H uno. Entonces dentro del calibre dice, al principio, quiero seleccionar el tamaño del teléfono propriety fond size Entonces Hem usa el tamaño de fuente de 70 píxeles, 70 píxeles. Lo siento, pixel. A eso, voy a pizarra este elemento, este elemento de marca. Entonces aquí, voy a escribir punto mark. Entonces dentro del Calibre dice, voy a usar propiedad. Aquí voy a usar Visualización de propiedades, display flick. Y luego voy a usar otra propiedad Aline Align items center, y voy a establecer este archivo. Si configuro este archivo y vuelvo a mi navegador, puedes ver el resultado. Ahora alineamos con éxito esta erosina al lado de este texto A continuación, voy a asignar poco hueco entre estos dos elementos, texto y la erosina Para eso, voy a usar gap property, gap, gap, igual dos, y quiero asignar dos VW pocos alimentos weed gap. Después también se va a asignar poco relleno. Acolchado para relleno de arriba e abajo, voy a usar cero y para la derecha e izquierda, voy a usar 1.5 VW voy a poner este cinco. Si vuelvo a mi navegador, así es como se ve. Y si quieres aumentar el acolchado, sí, puedes, depende de ti. Y ahora voy a duplicar esta sección marca varias veces. Déjame mostrarte. Entonces aquí, dentro de este archivo de estimación de punto índice, voy a seleccionar este elemento de marca, este, este elemento. Entonces voy a duplicar esta línea múltiples veces. Aquí voy a duplicar esta línea en total cinco veces, y voy a configurar este archivo. Después de configurar este archivo, si vuelvo a mi navegador y vuelvo a cargar mi navegador, así es como se veía Ahora, necesitamos alinear las tomas al lado de ella. Para eso, nuevamente, necesitamos usar la propiedad flex display flex en nuestro elemento mood div. Entonces en nuestro elemento modi, el elemento div padre, voy a usar esta propiedad, display flex Y voy a poner este archivo. Después de configurar este archivo, es como se ve, pero hay otro problema. Tenemos que resolver este problema. Tenemos que reducir el texto. También necesitamos ocultar el área de desbordamiento. Para eso, volvamos a mi código vis studio, y en nuestra sección de marca, voy a usar otra propiedad llamada flex shrink flex shrink y voy a pasar cero. Entonces voy a configurar este archivo. Si configuro este archivo y vuelvo a mi navegador, así es como se ve. Ahora necesitamos alzar el desplazamiento horizontal ar. Para ello, necesitamos usar overflow hidden property. En nuestro elemento M div, voy a escribir overflow heated. Y voy a poner este archivo. Después de configurar este archivo, si vuelvo a mi navegador, así es como se veía. Ahora se ve perfecto. Entonces esa es la primera parte de este tutorial. Entonces aquí, solo alineamos el texto y creamos la estructura. En la siguiente parte de este tutorial, vamos a iniciar el JavaScript. Así que gracias por ver este video, Staytune por nuestro próximo tutorial 23. Animación de texto desplazable Parte 2: Me alegro de verlos de vuelta, chicos. Este es el segundo video relacionado con este proyecto. Y en este video, vamos a iniciar el JavaScript. Así que saltemos al editor de código de Rsa studio. Así que aquí, voy a saltar al archivo script punto TAS. Ahora dentro del Javascript, necesitamos extraer un valor. Tenemos que extraer el valor, que nos va a decir nos desplazamos hacia abajo en la página. De lo contrario, desplácese hacia arriba por la página. Quiero extraer la dicción scroll de la página web. Quiero decir, cada vez que desplace mi navegador hacia abajo, entonces quiero extraer el valor del desplazamiento la misma manera, cuando desplace mi página hacia arriba, también, quiero extraer el valor. Para eso, vamos a usar evento. Vamos a usar evento en esta ventana. Esta completa Ventana Dower. Aquí dentro del archivo script dot js, vamos a usar el método window dot add even listener, Window dot, Ad evenlistener Vamos a usar un Evet y aquí vamos a usar Hullvet Dentro del curso Duval, voy a escribir WHE. Después de eso, después de usar este evento, necesitamos devolver una función. Función. Dentro de la desnudez, voy a tipo B ETS. Entonces dentro de los libres, aquí, voy a escribir consola dot log. Dentro del brress redondo, quiero imprimir la Válvula de rueda Básicamente, quiero imprimir el valor Gets DTS. Y voy a poner este archivo. Después de configurar este archivo, si vuelvo a mi navegador y si abro mi Consola, déjame mostrarte, como puedes ver cada vez que me desplace hacia abajo en mi página, activó el evento de rueda. Al mismo cada vez que me desplace hacia arriba esta página, también devuelve un valor cada vez que devuelve un valor de esta página, necesitamos extraer el valor de exceso de Y de este desplazamiento Para eso, necesitamos agarrar este valor, Delta Y. puede notar cada vez que me desplace hacia abajo en mi página, como pueden ver, pasa valor 100 positivo cada vez que me desplace hacia arriba esta página, pasa y cada vez que arruino esta página, pasa valor 100 negativo. Tenemos que agarrar este. Si es pasado el valor negativo, entonces necesitamos ejecutar esta animación en dirección opuesta. Y si se trata de pasar valor positivo, entonces necesitamos ejecutar esta animación en la misma dirección en esa dirección. Entonces usando el valor Delta Y, vamos a establecer la condición. Pero al principio, vamos a extraer el valor Delta Y. Aquí dentro del archivo Javast, aquí quiero X Delta Y, DL Tay, Delta Y, éste Ahora voy a configurar este archivo. Después de configurar este archivo, si vuelvo a mi navegador otra vez, entonces solo se puede notar el valor Delta. Si me desplazo hacia abajo en mi página, aquí pueden ver el valor Delta 100. Si me desplazo hacia arriba esta página, también se puede ver el valor Delta, pero esta vez se puede ver el valor negativo porque metemos la pata en esta página. Ahora, según él, vamos a establecer una condición de IP. Volvamos al editor de código, y aquí voy a comentar esta línea y voy a establecer una condición IP. Si Delta I data punto, Delta Y, Delta Y, mayor que cero. I Delta Y valor mayor que cero, quiero ver el positivo, luego dentro de la condición IP. Esta vez quiero imprimir, consola, punto, registro dentro de las rondas. Dentro del doble curso, Imtype desplazamiento normal, desplazamiento Entonces s dentro del coliss Amt, consola dot log. Dentro de la rotonda dentro del doble recorrido, AMUTRverse Desplazamiento. Voy a establecer este archivo. Aquí arriba, configura este archivo, si vuelvo a mi navegador otra vez y esta vez si me desplazo hacia abajo en mi página, como pueden ver, imprime desplazamiento normal Si me desplazo hacia arriba esta página, esta vez imprime desplazamiento inverso Por lo que establecemos nuestra condición con éxito. Ahora dentro de esta condición, vamos a usar GSAP Volvamos al codior otra vez y voy a comentar las dos líneas. No lo necesito. Simplemente lo escribimos con fines de prueba, nada más. Ahora dentro de la condición positiva, voy a usar GSAP Voy a usar el método GAP dot two porque vamos a mover el elemento de la posición inicial a otra posición. Entonces escribe G SAP GSAP punto este punto dos método y dentro de las rotondas primero quiero seleccionar el elemento en el que elemento quiero , quiero animarlo Entonces quiero seleccionar este elemento Murky. Voy a copiar el nombre de esta clase, y voy a escribir punto Murky Después de eso, dentro de los Kais después del coma, aquí vamos a usar transformar propiedad, transformar y en condiciones positivas, quiero mover este elemento en esta dirección Para eso, voy a usar translate X value. Entonces vamos a llegar al código del estudio, y esta vez, voy a escribir, transformar, traducir, traducir X. El interior de los vestidos redondos, voy a cambiar la dirección. Voy a cambiar de tipo phono -200%. Voy a establecer este archivo. Vamos a configurar el archivo y volver a mi navegador y ver, ¿funciona correctamente o no Como puedes ver, estamos en mi navegador y cada vez que trato de desplazarme hacia abajo en mi página, como puedes ver, mueve el elemento. Recarguemos esta página y volvamos a hacerlo. Después, desplázate hacia abajo en mi página, como puedes ver, se ejecuta la animación. Pero aquí pasamos valor menos, entonces es la animación en dirección opuesta. Yo primero voy a dar un poco de duración. Nosotros para brindar un poco de duración para entender la animación. Entonces primero voy a quitar el menos vdu. Quiero moverlo 200% en dirección X. Después de eso, quiero establecer la duración, duración, duración, voy a proporcionar cuatro segundos de duración. Después de eso, proporcionar la duración. Además, voy a usar el valor repeat repeat repeat, y quiero establecer el valor de repetición menos uno. Voy a establecer este archivo. Después de configurar este archivo, volvamos al navegador. Si me desplazo por mi página, ahora puedes entender la animación y repito la animación varias veces. Ahora, movamos el elemento de la persona -200. Quiero cambiar la posición de origen de este texto. -200% y voy a volver a configurar este archivo y volvamos al navegador Esta vez cada vez que me desplazo hacia abajo en mi página, ejecuta la animación en dirección opuesta, y se ve muy hermosa. Cuando me desplazo hacia arriba en mi página, no está funcionando porque no configuramos la animación para ello. Ahora a partir de esta animación, necesitamos eliminar el efecto de flexibilización Por defecto, establece efecto de flexibilización, así que aquí, voy a escribir propiedad Es EA AE, E y dentro del doble código, voy a usar Nan Value. No quiero proporcionar ningún efecto de flexibilización. Y voy a configurar este archivo y volver a mi navegador. Esta vez, si me desplazo hacia abajo en mi página, puedes notar ahora puedes notar que nuestra animación no se detiene. No hay efecto de desaceleración porque eliminamos el efecto de flexibilización Ahora, manejemos la otra condición. Aquí voy a copiar el mismo código, y voy a plagarlo condición. Ahora bien, si me vuelvo a desplazarlo, esta vez, quiero moverlo en dirección X. Pero aquí, voy a pasar el valor positivo 0%, y voy a establecer este archivo. Ahora para establecerlo 0% en exceso de dirección, significa ir a correr dirección opuesta y establecer este archivo si vuelvo a mi navegador, y esta vez si me desplazo hacia abajo en mi navegador, lo contrario desplace hacia arriba mi navegador, como pueden ver, se ejecuta la animación en dirección opuesta. Si nos desplazamos hacia arriba y nos desplazamos hacia abajo por la página, esta vez va a cambiar la dirección de esta animación porque depende del valor positivo y negativo. De acuerdo con el valor positivo y negativo, dijimos la condición. Ahora, tenemos que cambiar la dirección de la flecha. Para eso, volvamos al código de estudio de usuario nuevamente. Solo trata de entender, primero iniciamos el texto desde el -200% en dirección de excesos Es para scroll normal, y si invertimos lo desplazamos, entonces se va volviendo al 0% Ahora, tenemos que apuntar a esta flecha, esta flecha de imagen. Entonces para eso, dentro de la condición Delta Y, la primera condición aquí después de GSAP nuevamente, voy a usar GSAPGSAP dos método, dos, y luego dentro de las gramíneas redondas, dentro del doble curso, primero seleccionamos la primero Y quiero seleccionar esta imagen que está dentro de esta marca. Entonces aquí, voy a escribir la marca de puntos. Copio esta marca selectora y la voy a probar aquí. Después de eso, voy a proporcionar espacio y voy a escribir imagen ING. Entonces después del coma dentro de los terneros, dentro de los clivss aquí, aquí voy a cambiar la dirección de Voy a rotar 180 grados. Voy a usar el valor de rotación ROTA TA, rotar. 18, quiero fijar esta parte. Entonces voy a copiar el mismo selector para otra condición, s parte. Aquí estoy ti Esta vez, quiero rotarlo por cero grados. Nuevamente, va a cambiar la dirección. Entonces para pisar este archivo si vuelvo a mi navegador para que como puedan ver, estamos en mi navegador. Si me desplazo hacia abajo en mi página, pueden ver, pueden notar que va a cambiar la dirección de esta flecha. Déjame mostrarte. Después de desplazarse hacia abajo por la página , como puede ver, va a cambiar la dirección de esta flecha y mueve la animación. Entonces si me desplazo hacia arriba esta página, nuevamente, va a cambiar la dirección de la flecha y va a mover esta animación en esta dirección. Esto es lo que podemos crear usando GSAP. Ahora, volvamos al código vis studio A. Así que espero que ahora te quede claro, ¿ cómo podemos manejar la animación de texto de desplazamiento con GSA Gracias por ver este video. Estén atentos para nuestro próximo proyecto. 24. Crear barra de navegación de la página de aterrizaje: Así que bienvenidos a otro proyecto Rel tate GSP Animation. Y hoy, vamos a crear esta landing page. Después de eso, voy a animar los componentes uno por uno Vamos a construir esta landing page desde cero, y luego voy a agregar animación SAP. Particularmente en este proyecto, vamos a aprender cómo podemos usar timeline con scroll Tigger La línea de tiempo y el gatillo de desplazamiento ambos son cosa separada. Timeline nos ayuda a ejecutar la animación sincrónicamente. Ya nos enteramos de eso en nuestro proyecto anterior y gatillo de desplazamiento nos ayuda a ejecutar nuestra animación basada en el desplazamiento En este proyecto, vamos a fusionar ambas cosas. Eso te va a ayudar mucho en el futuro, y en tus próximos proyectos, puedes aplicarlo En este estudio no voy a crear ningún sitio web real, pero voy a construir esta landing page desde cero. No te preocupes. Te garantizo que disfrutarás de este proceso. Vamos a saltar al editor de código del estudio de resultados. Estoy en mis recursos editor de código stdio, y como pueden ver, ya creo la Blettemplate, index DML, y ya vinculo con archivo CSS Este es nuestro archivo CSS de estilo, y ella ya escribí el CSS predeterminado Aquí dijimos Margin zero padding zero box sizing water boox and use font family area También, decimos altura y ancho 100% a nuestro cuerpo y estimamos etiqueta. Entonces si vuelvo a mi archivo de estimación de índice, y aquí puedes ver que ya usamos el enlace CEN de esta animación SAP, y también creamos script dot js file. Entonces al principio, en nuestra etiqueta corporal, voy a crear una sección, una sección para la navegación. Al principio, voy a construir la barra de navegación de esta página web. Básicamente en este tutorial, nos vamos a centrar solo en esta barra de navegación. Voy a crear este proyecto parte por parte. Así que vamos a saltar a la es un código de estudio. Entonces al principio, aquí, voy a tomar una sección, un elemento de la sección D. Sección. Entonces voy a asignar una clase de clase y nuestro nombre de clase es la sección uno. Y en esa sección, quiero crear una barra NAP. Quiero crear Naviation bar, así que voy a usar la etiqueta NAT, NAV, NAD Entonces dentro de esta etiqueta NAT, al principio, necesitamos crear aquí necesitamos crear este texto de logotipo, Wizard, Wizard Z, Summer para escribir. Voy a tomar H una etiqueta H una, luego dentro de la etiqueta H una, aquí voy a escribir W I, ZAR D, wizardt Z. luego voy a Después de configurar este archivo, voy a abrir este archivo en mi navegador. Entonces como pueden ver así es como se ve. Ahora, volvamos al editor de código otra vez y ahora voy a crear otro componente. Quiero decir otro elemento Nb como sobre nosotros, servicios, caso de uso, precios y blog. Para eso, voy a crear otro elemento profundo, Dev y dentro de este elemento Dev. Pero antes voy a asignar una clase a este elemento profundo, y voy a escribir class, y esto es parte de clase. Dos. Puedes tomar cualquier nombre. Por ahora, voy a escribir la segunda parte y luego dentro de este de elemento, voy a tomar H uno. Aquí voy a tomar etiqueta H cuatro, rumbo a etiqueta, y voy a escribir sobre nosotros. Después de eso, voy a duplicar esta línea y luego voy a escribir. Voy a teclear servicios. Entonces voy a duplicar de nuevo esta línea. Esta vez voy a etiquetar casos de uso, casos de uso. Entonces voy a duplicar de nuevo esta línea. Esta vez voy a escribir precios. App que voy a escribir log. Entonces doblé esta línea y estoy tipo log. Entonces necesitamos crear un botón. Entonces configuro este archivo si vuelvo a mi navegador y ella adentro para crear un área de botón, este botón, solicito DCP Entonces dentro de esta página de estimación, voy a tomar un botón de etiqueta de mantequilla PU DTN, y voy a escribir request request a code, y voy a configurar este archivo Ahora, saltemos a la pila CSS y comencemos a diseñar. Al principio, voy a darle estilo a esta área de sección, así que voy a seleccionar el elemento ACC sección TIN. Después dentro de los Cls primero, voy a asignar altura, altura, voy a asignar 100% Entonces voy a asignar con también el 100%. Después de eso, voy a asignar un color de fondo por ahora, algún tipo de color de fondo. Puedes usar cualquier color voy a usar este color de disco. Y también, voy a decir que posición relativa para esta sección, posición, posición relativa. Y voy a poner este archivo. Después configuré este archivo, si vuelvo a mi navegador y voy a saltar a esta página, es como se ve. Solo uso este color de fondo para mostrarte que solo usamos el 100% de esta área. Y ahora necesitamos darle estilo a este elemento Nab. Así que volvamos al código del estudio de resultados, y voy a seleccionar la etiqueta Nab en Nab Luego dentro del Clirass primero, voy a usar esta propiedad, display y voy a usar slicks play flakes y align item, align Entonces justificar el contenido, Justificar el contenido, el espacio entre el espacio entre. Va a proporcionar espacio entre los elementos. Déjame mostrarte después de configurar este archivo, si vuelvo a mi navegador, así es como se ve. Proporciona espacio entre el logotipo y los elementos nebber Después de eso, necesitamos poner todas las tomas una al lado de la otra. Para eso, nuevamente, necesitamos usar la misma propiedad dos horas elemento Naba Volvamos al código del estudio. Esta vez, voy a darle estilo a esta clase, este elemento profundo, la segunda parte, la segunda parte. Copia el nombre de la clase. Después de eso, voy a seleccionar este en mi archivo de estilo. Y dentro del receso de color, casi voy a usar las mismas propiedades, displayflx Lin items center y justify contienen espacio entre, y lo voy a poner aquí Apres este archivo y hazlo a mi navegador, así es como se ve Después de eso, también necesitamos proporcionar brecha entre estos textos, estos números ítems. Aquí, voy a usar, propiedad gap, y voy a asignar gap 60 pixel, 60 pixel. Y voy a poner este archivo. Después de configurar este archivo, así es como se veía. Y también necesitamos agregar un poco pading alrededor de la sección Nabb Entonces aquí, voy a escribir dentro del relleno Nab. Voy a usar la propiedad padding. De arriba y abajo, voy a usar 60, 60 píxeles. Y para izquierda y derecha, voy a usar 80 píxeles. Voy a establecer este archivo. Después de establecer este archivo, así es como se ve. Después de eso, voy a aumentar el tamaño de fuente de este logotipo de texto. Para eso, necesitamos seleccionar la etiqueta H one que está dentro de la etiqueta Nap, algún tipo NV Nav. Dentro del napteg quiero seleccionar la etiqueta H one, luego dentro de los Voy a usar tamaño de fuente tamaño de fuente. Tipo Herm tamaño de fuente 50 píxeles. Y voy a poner este archivo. Después de configurar este archivo, si vuelvo a mi navegador, así es como se veía. Y luego voy a darle estilo a estos artículos Nuber. Además, voy a aumentar su tamaño de fuente. Así que volvamos al codeor otra vez y esta vez, voy a seleccionar Nav NAV Nav Después de seleccionar el NAB, quiero seleccionar H cuatro, encabezamiento cuatro, etiquetas H cuatro El interior de los versos Cli porque ponemos todos los elementos Nb dentro de la etiqueta del encabezado Entonces después de la etiqueta H cuatro, primero, voy a definir el tamaño de fuente tamaño de fuente, Tamaño del teléfono, voy a asignar tamaño de fuente 30 grande. Creo que esta es perfecta, y además le voy a asignar fuente, peso de fuente, y quiero asignarle fuente 500. Voy a establecer este archivo. Después paso este archivo, si vuelvo a mi navegador, así es como se ve. Se ve bien. Después de eso, voy a darle estilo a este botón. Entonces apuntemos a este botón. Así que volvamos a los usuarios a tu código. Y esta vez voy a apuntar a NAF y dentro del Nav, voy a apuntar el botón tag botón VU T O N botón dentro de los colores al principio, voy a asignarle poco relleno Entonces escribe padding desde arriba e abajo, voy a asignar 18 pixel padding, y desde izquierda y derecha, voy a asignar 30 pixel padding. Después de eso, voy a definir el tamaño de fuente tamaño de fuente tamaño de fuente, y voy a asignar tamaño de fuente 22 píxeles. Entonces voy a usar radio fronterizo. Radio de borde, y voy a asignar radio de borde, diez píxeles. A continuación, voy a asignar peso de fuente, peso de fuente, y voy a asignar fuente a casi 600 fuentes poco más audaces Y también para asignar frontera. Quiero dos píxeles, borde sólido, sólido sólido y, y nuestro borde coolor es que algún tipo 000, Hastag 000 Y además no quiero ningún color de fondo a este botón, así que voy a escribir color de fondo. Quiero que sea transparente. Voy a establecer este archivo. Después de configurar este archivo y volver a mi navegador, así es como se ve. Se ve bien. Después de eso, si vuelvo a mi diseño de pase de aterrizaje, aquí tenemos un icono de estrella, lado izquierdo del texto, el texto del logotipo. Entonces necesitamos encontrar el mismo tipo de elemento estrella. Entonces aquí voy a abrir un nuevo TAF y voy a buscar voy a buscar el icono de Remix Icono de Remix. Entonces necesitas dar click en este enlace, y desde esta sección primero, necesitas hacer click en este enlace de Github para acceder a esta biblioteca. Entonces voy a copiar el enlace de CDN. Este es el enlace CDN Entonces voy a copiar el enlace CDN de esta biblioteca CSS, esta biblioteca de iconos y volver a mi punto índice HML cinco Y aquí, lo voy a usar por encima del archivo CSS style dot. Voy a pegar esta fuga. Voy a establecer este archivo. Después de configurar este archivo, volvamos al navegador. De esta sección, voy a buscar icono estrella, algún tipo ESTRELLA, estrella. Después de buscar estrella, si me desplazo un poco hacia abajo , como pueden ver, proporciona algunos íconos de estrellas, y necesito este brillando a esta opción. Voy a hacer click en éste y y desde aquí, voy a copiar el código ML. Además, puedes usar SVG, PNG, y yo voy a usar pero voy a usar esta clase de código de EstiML ya predefinido Volvamos al código de estudio, y lo voy a poner dentro del H 110 antes de que el asistente establezca. Voy a establecer este archivo. Después de configurar este archivo, si vuelve a mi navegador, y así es como se ve. Si comparo con el diseño original, déjame mostrarte como puedes ver, aquí necesitamos rotar un poco la estrella. Volvamos al código e intentemos rotar esta estrella. Al principio, necesitamos seleccionar esta estrella que está dentro la etiqueta Nap y también dentro de la H un poco. Aquí estoy tipo, Nav, H uno. Después de eso, quiero pizarra la estrella que está dentro de la etiqueta I. Después dentro de las Coleras, primera propiedad, voy a usar rotar Rotar, y quiero girarlo hasta 45 grados grados. Entonces voy a aumentar el tamaño de fuente de esta estrella. Voy a escribir fuente, sí, es una fuente, así podemos aumentar el tamaño de fuente tamaño de fuente, 55 pixel, el conjunto de este archivo y volver a mi navegador. Después de ir a saltar a esta página, como puedes ver, no es rotar esta estrella porque es un texto. Es un texto en línea. Entonces necesitamos hacer este elemento bloque inline. Entonces aquí voy a escribir display Inline dog. Si lo hago Inline blog y luego este archivo una y otra vez a mi navegador, como pueden ver, esta vez rotaba esta estrella Elmate y se veía bastante bien Ahora se ve bastante similar con esta barra de navegación de ritmo de aterrizaje. Esto es para este tutorial. En el siguiente tutorial, vamos a crear la siguiente sección. Después de crear estas secciones, vamos a animar estas cosas una por una Entonces gracias por ver este video. Estén atentos para nuestra siguiente parte. 25. Crea sección de encabezado: Hola, chicos. bueno verte de vuelta. Esta es otra parte de este proyecto. Hoy en este proyecto, vamos a crear esta porción, la segunda parte de esta sección de encabezado. Aquí vamos a crear esta porción. Vamos a saltar al editor de código de Visa Studio. Estamos en mi editor de código Visa Studio. Al principio, voy a cerrar la etiqueta Nap y después voy a saltar al estilo CSS cinco. Entonces voy a quitar el color de fondo de esta sección. Entonces así voy a encomiar esta línea y volver a poner este archivo. Después configuré este archivo, si vuelvo a mi navegador, si te muestro la página, así es como se veía. Después de quitar el fondo, se ha vuelto blanco. Entonces, para la sección de encabezado, necesitamos crear una etiqueta profunda. Así que volvamos al código de Visual Studio. Después de la etiqueta Nap, voy a crear un div que clase que clase es centro, tipo Soong punto CN TR, centro Y luego dentro del elemento div central, quiero crear un total de dos elementos D, centro parte uno y centro parte dos, algún tipo, centrado. Primera parte. Entonces duplico esta línea, y la siguiente es el centro, la segunda parte. Después dentro de la parte central uno, voy a poner una etiqueta de rumbo. ¿Por qué tenemos que poner una etiqueta de encabezado? Porque si te muestro el diseño, necesitamos poner esta etiqueta de rumbo. Este encabezamiento uno. Navegar por el panorama digital para el éxito. Tenemos que escribir el mismo texto. Entonces aquí, hay de vuelta al código, y voy a usar H una etiqueta, y dentro de esta etiqueta H una, voy a atar navegando por el paisaje digital. Éxito, y voy a establecer este archivo. Después de configurar este archivo, si vuelvo a mi navegador, así es como se ve. Entonces necesitamos crear este párrafo y el botón. Para eso, volvamos al código. Pero antes de crearlo, quiero diseñar esta sección. Quiero diseñar la parte central uno y la parte central dos. Volvamos al cielo archivo CSS y aquí al principio quiero apuntar al centrado el elemento, Suma t punto centro. Después dentro de la clase, al principio, voy a usar el color de fondo para identificar el área central. Color de fondo, y quiero asignar color rojo, ROJO. Después de asignar el color de fondo, quiero asignar altura, altura, y quiero asignar altura 80%. Entonces quiero asignar trigo húmedo, y aquí en el S&W 100% Después de eso, voy a configurar este archivo y volver a mi navegador, así es como se ve. Entonces necesitamos dividir el área sentativa en dos partes. Necesitamos crear la cuarta parte, este texto y estos gráficos. Para eso, vamos a eso al navegador, y voy a usar display propriety flix Flexión de pantalla. Entonces en esa sección, esta vez, quiero apuntar a la parte central uno, este elemento profundo. Entonces voy a escribir punto centro parte uno dentro de los cálices Voy a asignar altura y peso a esta sección. Entonces voy a asignar altura 100% y voy a asignar con el 40%. Entonces también, voy a asignar un color de fondo para identificar las áreas en el tipo color de fondo. Puedes usar cualquier color, yo voy a usar este color Bisk y voy a configurar este archivo Después de configurar este archivo, si vuelvo a mi navegador, así es como se ve. Esta área es para texto, y esta área es para la gráfica. Entonces quiero agregar poco relleno en nuestro contenedor, el elemento div central principal. Para eso, aquí, voy a agregar poco relleno de toda la dirección, algún tipo, padding, et pixel. Voy a establecer este archivo. Si vuelvo a mi navegador, así es como se veía. la misma manera, necesitamos asignar el área para la parte central dos. Volvamos al código de estudio y voy a duplicar esta sección y esta vez, voy a apuntar centro parte dos, y aquí voy a asignar con 60%. Voy a añadir un color de fondo. Y puedes agregar cualquier color de fondo para la demostración, así que voy a agregar color de fondo rosa, de lo contrario, este, lo que sea. Después de establecer este archivo, así es como se veía. Ahora voy a quitar todo el color de fondo porque se ve muy molesto. Entonces voy a comentar ambas líneas. Yo solo uso el color de fondo para mostrarte el área. No necesito esto ahora, así que voy a comentar todo el color de fondo. También el color de fondo central. Voy a establecer este archivo. Después de configurar este archivo, si vuelvo a mi navegador, así es como se ve. Entonces si miro mi diseño, este diseño, como pueden ver, después del encabezado un texto, tenemos un párrafo y el botón. Es necesario crear el párrafo y el botón. Entonces para crear el párrafo aquí, aquí voy a tomar una etiqueta P para el párrafo después de la etiqueta H one, y voy a usar un total de 30 palabras, algunas escriba em 30. Voy a decir esto bien. También, necesitamos crear el botón, así que voy a escribir etiqueta de botón, elemento de botón, y aquí se puede ver en este botón se escribe libro para consultores. Voy a usar este texto, el mismo texto, libro tipo Hem para consultores. Y voy a poner este archivo. Entonces después de crear el botón, lleva al navegador. Ahora bien, así es como se ve. Ahora necesitamos darle estilo a esta sección. Así que dentro de este archivo CSS en teselas, ahora voy a apuntar. Ahora, al principio, quiero apuntar a la etiqueta de encabezado uno, H una etiqueta, que está dentro de la parte central uno. Entonces voy a copiar este selector y luego voy a pegar aquí, y después de eso, quiero lijar H una etiqueta Después dentro del Caliss voy a asignar tamaño de fuente. Tamaño de fuente, quiero asignar tamaño de fuente 90 píxeles. Entonces quiero asignar Font, wait, font, wait, 400. Quiero usar fuente poco delgada. Entonces después de configurar este archivo, si vuelvo a mi navegador, así es como se veía. Entonces necesitamos darle estilo a este párrafo. Para eso, voy a seleccionar la etiqueta P. Entonces después de eso, voy a seleccionar. En lugar de usar H uno, voy a usar P. Esta vez, voy a usar tamaño de fuente 20 píxeles y no quiero usar fuente a ocho, así que elimino esta línea. También, quiero asignarle poco a este párrafo con, y voy a usar weed 80%. Entonces quiero agregar poco margine desde arriba y también desde abajo Entonces voy a usar margin, top, 30 pixel y margin bottom, 40, si no, 30 pixel. Así que voy a usar 40 píxeles por ahora, y voy a configurar este archivo. Si configuro este archivo y vuelvo a mi navegador, así es como se ve. Solo trato de hacer coincidir el diseño con el diseño original. Entonces después de eso, necesitamos diseñar este botón, libro para consultores. Ahora necesitamos darle estilo a este botón, y así es como se ve nuestro botón. Necesitamos usar radio fronterizo poco húmedo. Además, necesitamos usar el color de fondo negro. Volvamos al código del estudio, y esta vez, voy a apuntar al botón. Entonces desde el centro parte uno, quiero apuntar al botón, PERO ENCENDIDO. Y dentro del color versus, primero, voy a usar color de fondo, color de fondo, quiero usar negro. Entonces necesitamos usar color cervatillo blanco, color de fuente opuesto, color somype, color tipo Sou, y el color de fuente Entonces necesitamos usar radio fronterizo. Radio de borde, quiero asignar diez píxeles. Y entonces tenemos que aportar un poco de relleno, creo. Relleno desde arriba e abajo, quiero asignar dos píxeles. Creo que es suficiente. Y de izquierda y derecha, quiero asignar 40 píxeles. Además, necesitamos usar fuente a ocho. Quiero poco más audaz tipo de fuente, fuente, peso, 600. Voy a usar el valor 600 y después voy a quitar el borde. Quiero quitar la frontera, veamos. Sí, no hay frontera, así que voy a quitar la frontera. Su tipo, frontera, ninguna. Después de configurar este archivo, si vuelvo a mi navegador, así es como se veía. Tenemos que asignar el tamaño de la fuente. Olvidé asignarle tamaño de fuente, así que volvamos al coitor y aquí voy a escribir tamaño de fuente, y voy a usar 25 píxeles Después de asignar el tamaño de fuente, si configuro este archivo, si vuelvo a mi navegador, así es como se ve. Ahora es bastante similar con este diseño. Ahora después de eso, en la parte central de la sección dos, necesitamos agregar este gráfico. Voy a usar el mismo gráfico pero no en este video. Porque no quiero crear este video a la ley. En la siguiente parte de este video, voy a agregar este drapi hasta pronto 26. Organiza el logotipo y el gráfico: Me alegro de verles chicos. Este es el tercer tutorial relacionado con nuestro proyecto y en este tutorial, vamos a crear la segunda sección en esa posición. Aquí vamos a colocar el gráfico y también vamos a agregar logotipos de empresa en ese puesto. Déjame mostrarte. Este es nuestro diseño original y a partir de este diseño, vamos a cortar esta imagen, este gráfico y vamos a poner el mismo gráfico en esa posición. También, uno por uno, voy a poner todos los logotipos en mi diseño. Vayamos al código de Visual Studio. Como puedes ver en mi código de Visual Studio, tenemos una carpeta llamada image ING. Ya recorto las imágenes que necesitamos para crear la landing page, como estos gráficos y los demás logotipos. Uno por uno, corté todo el logo de esta landing page. Ahora, en nuestra sección central parte dos, vamos a poner este gráfico. Aquí voy a tomar imagen dag imagen IMG, y como fuente, voy a pasar la ruta del archivo, que está en mi carpeta de imagen, imagen Img, y voy a usar esta imagen, Anunciar anunciar punto JPG y voy a configurar este Después de configurar este archivo, si vuelvo a mi navegador, déjame mostrarte. Ahora puedes ver, y si vuelvo a cargar mi navegador, así es como se veía Ahora, volvamos al archivo CSS Style Dot. Desde el archivo Style Do CSS, necesitamos averiguar la sección central de la parte dos, esta. Y después de eso, voy a apuntar a la imagen. Entonces escribe punto centro para dos, y voy a apuntar a la etiqueta imagen imagen IMG dentro de la clase, voy a asignar altura, altura, y voy a usar 100% altura del contenedor padre, 100% Voy a satisfle. Después satisfle si vuelvo a mi navegador, déjeme mostrarle y volver a cargar mi página Ahora puedes ver el resultado. Así es como se ve. Ahora necesitamos mover este gráfico a la posición correcta. Para eso, déjame mostrarte aquí en mi contenedor padre, voy a usar position property position, y en mi continente padre, voy a usar relative, y en mi continente hijo, voy a usar position absolute. Entonces desde el lado derecho, desde la derecha, voy a asignar valor cero. Así que por favor configura este archivo si vuelvo a mi navegador, y vuelvo a cargar mi página, ahora puedes ver que resuelve el problema Y si añades poco acolchado desde el lado iluminado y desde el lado derecho en nuestro contenedor central, déjame mostrarte. Entonces en nuestro contenedor central aquí, voy a usar relleno. De arriba y abajo, voy a usar 80 y de izquierda y derecha, voy a usar 100 pixel. Y de arriba e abajo, tal vez 70 píxeles sean buenos para ello. Entonces voy a configurar este archivo. Después de configurar este archivo, si vuelvo a mi navegador y vuelvo a cargar mi navegador, ahora se ve bastante bien Ahora vamos a introducir las imágenes. Vamos a eso al código de estudio de resultado y vamos a saltar al archivo index sot estimate y dentro de esta sección uno, quiero crear otra sección y voy a ponerle el nombre de los logotipos de puntos. Aquí voy a poner todas las imágenes una tras otra. Como pueden ver en mi directorio de trabajo actual, ya extraigo las imágenes y la nombro Logo dos, logo tres, logo cuatro, lo cinco, logo seis. Entonces uno tras otro, voy a ingresar todos los logotipos usando etiqueta de imagen, IMG y como fuente, voy a escribir carpeta IMG, luego voy a apuntar logo, luego voy a duplicar esta sección varias veces Esto es para el logo dos. Después lo duplico otra vez. Esto es para Logo tres y este es para Logo cuatro, y esto es para Logo cinco y el último es para Logo seis. Voy a establecer este archivo. Después de configurar este archivo, si vuelvo a cargar mi navegador, déjame mostrarte, aquí puedes ver todos los logotipos uno tras otro Ahora, a continuación, tenemos que seleccionar el continuador padre. Déjame mostrarte que necesitamos seleccionar este paren continal logos usando su nombre de clase En nuestra sección de estilo, aquí, voy a seleccionar punto perder. Después de eso, el receso de color, voy a usar esta propiedad. Display, y aquí voy a usar display flex. A continuación, voy a usar Alinear Alinear elementos en el centro. Entonces justificar el contenido, justificar el espacio de contenido entre éste. Además, voy a agregar poco relleno a estos logotipos. Relleno para relleno, de arriba e abajo, voy a usar 30 píxeles y para izquierda y derecha, voy a usar 120 píxeles. Creo que es bueno para ello, y voy a vender este cinco. Además, es necesario asignar poca altura a estas imágenes tipo dot logos. Dentro del logo, quiero crear todas las imágenes de la etiqueta de imagen, ING. Entonces dentro de la Calibra dice, voy a asignar altura, altura, voy a asignar 60 píxeles de altura, 60 píxeles, y voy a configurar este archivo Después configuré este archivo, si vuelvo a mi navegador y luego cargo mi navegador, así es como se ve. Entonces, para crear la primera sección, necesitamos saltar a esta sección número dos, la sección de servicios. Aquí voy a realizar nuestras animaciones principales, pero no voy a hacer eso en este tutorial. Vamos a iniciarlo desde el siguiente tutorial, así que hasta pronto.