Transcripciones
1. Introducción: En esta clase, te estaré enseñando los fundamentos de las transiciones
CSS y las animaciones de fotogramas clave. Después tomarás estas habilidades y construirás tu propio sitio web de una sola página, cual contendrá animaciones CSS que no solo agregan un elemento dinámico a tu página sino que además mejoran la experiencia del usuario. Oye, soy David y soy desarrollador web front-end de Norwich en Inglaterra. Tengo más de seis años de experiencia en la construcción de diversas aplicaciones digitales y sitios web para una amplia gama de clientes internacionales. Realmente disfruto ayudando a otros a mejorar sus habilidades en la Web y les
doy la oportunidad de aprender algo más hoy que nunca antes. Esta clase es para cualquier desarrollador que tenga algunos conocimientos básicos de HTML y CSS pero quiera llevar sus sitios web al siguiente nivel. Ahora en esta clase, estaré usando VS Code como mi IDE de elección, pero puedes usar cualquiera con el que estés familiarizado. También estarás hospedando tu sitio web en GitHub Pages. Ahora no te preocupes si nunca has usado GitHub Pages antes, está absolutamente bien, te llevaré a través del proceso en su conjunto, completamente gratis. Con estas habilidades ganarás con este curso, podrás ofrecer tanto más como desarrollador Web, tanto si eres o no freelancer o trabajas para una empresa, tus sitios web y aplicaciones se destacarán por completo del multitud. Aparte de los sitios web, las animaciones CSS se pueden utilizar en una variedad de productos digitales, creando aplicaciones, infografías, visualización de datos y anuncios digitales. Al final de esta clase, serás maestro en animaciones CSS, y estarás más que cómodo trabajando con transiciones y fotogramas clave. Sin más preámbulos, empecemos.
2. El proyecto de clase: El proyecto que estarás construyendo es un sitio web de una sola página, que contiene un encabezado con un menú de navegación, un pie de página, una sección para imágenes, y una sección con botones. Quiero que armes un sitio web basado en quien sea tu artista musical o banda favorita. A pesar de que te estarás centrando en las animaciones, será divertido para ti incluir un poco de contenido en cuanto a por qué son tu artista favorito. Quizás incluya algún texto sobre tus canciones o álbumes favoritos. Pero no pases demasiado tiempo preocupándote por el contenido ya las animaciones por supuesto serán el foco principal del proyecto. Este proyecto es una forma perfecta para que apliques tus nuevas habilidades de animación CSS encontradas a un sitio web del mundo real con componentes que podrían beneficiarse de algún estilo de animación. Para un proyecto exitoso, solo intenta incluir los conceptos de animación que se cubren en esta clase. Por supuesto, obtendrás puntos de bonificación por experimentar con lo que se enseña, así que por favor siéntete libre de ser creativo. Los estudiantes deben estar usando su editor de código favorito para construir su proyecto de clase. Estaré usando código VS, pero cualquier otro editor de código funcionará igual de bien. Estarás desplegando tu proyecto final en las páginas de GitHub. Por lo que se requiere una cuenta de GitHub. Pero no te preocupes, te mostraré lo fácil que es configurar esto y empujar tu trabajo a una página web en vivo para que todos lo vean.
3. ¿Por qué utilizar las animaciones?: Ahora bien, ¿por qué usar animaciones web en absoluto? Bueno, las animaciones pueden ayudar a mejorar la experiencia del usuario, y pueden proporcionar algunos comentarios sobre las acciones del usuario. Las animaciones pueden ayudar al usuario a orientarse alrededor de la interfaz. Las animaciones también son realmente buenas para llamar la atención sobre una parte particular de una página, por lo que pueden dar indicios visuales a un usuario de que se necesita alguna acción. Las animaciones pueden indicar que hay un elemento que se puede hacer clic o tal vez hay más que ver. Por supuesto, las animaciones pueden agregar movimiento a un sitio web estático, sin vida, dándole algún diseño estéticamente agradable, y son realmente buenos para establecer un movimiento con el usuario. También se pueden utilizar como alguna herramienta de branding, dando al usuario una experiencia memorable y divertida. Ahora, quiero que tomes estas cosas en consideración cuando estés creando animaciones para tu proyecto, y asegúrate de que tus animaciones sirvan algún propósito para
que exista el equilibrio adecuado entre estética y funcionalidad.
4. Transiciones de CSS: Al pasar el cursor sobre este botón, se
puede ver que la opacidad cambia. No obstante, la animación es instantánea. Añadamos una propiedad de transición. Transición, propiedad, y es la opacidad que nos gustaría transitar. Ahora, esto por sí solo no será suficiente. Tenemos que indicar la duración de la transición. Esta es la duración de la transición. Voy a hacer esto 0.2 segundos. Ahí podemos ver la animación es mucho más suave. También podemos alterar la función de temporización de transición. Ahora, habrá una lección dedicada a la función de temporización y los diferentes tipos de flexibilización que puedes elegir. De lo que esto hace, afecta el estilo de la transición misma, por lo que la velocidad de la que transita de principio a fin. También podemos sumar un retraso a nuestra transición. Hagamos un segundo. Cuando pase el cursor sobre el botón, sólo después de un segundo comenzará la transición. Ahora bien, este es un largo camino de escribir nuestras transiciones. Podemos escribir esto en taquigrafía exactamente de la misma manera. Transición, y luego puedes elegir opacidad, podemos poner en nuestra duración, podemos poner en nuestra función de temporización, y también podemos sumar nuestro retraso. Ahora bien, si eliminamos esto, esta transición debería funcionar exactamente de la misma manera. Sí lo hace. Ahora, una cosa a recordar, cuando estás usando la taquigrafía de transición, debes incluir la duración antes del retraso. Pero, ¿qué tal si queremos elegir más de una propiedad de transición? Bueno, digamos que queremos cambiar el color del texto a, digamos, azul en el hover. Simplemente podemos escribir color 0.5 segundos, digamos es, y no pondremos un retraso. Para separar las múltiples propiedades, solo
usamos una coma como esa. Ahí vamos, múltiples propiedades. Ahora es útil conocer ciertas propiedades que no se pueden transitar. Simplemente voy a quitar el color azul del texto y de nuestra transición. Lo que no puedes hacer, si querías ocultar el botón al pasar el cursor, no
puedes hacer visualización, ninguno. Está mostrando exhibición aquí. Esto simplemente no funcionará. Desaparece, pero no hay transición entre sí. Eso se debe a que tenemos display none y display block. Está encendida o está apagada, está ahí o no lo está. No hay terreno medio. Es por eso que si quieres que el botón desaparezca sin problemas, puedes usar la opacidad, así como así. ¿ Qué tal si quieres mover la posición del botón? Ahora, en lugar de usar izquierda, arriba, derecha, abajo, por ejemplo, así, recomiendo encarecidamente, y este es un truco personal, usar transform, translate. Ahora voy a mover esto a la derecha por 10 píxeles para que podamos usar TranslateX. Hagamos 10 pixeles en nuestra transición. Nos aseguraremos de que el transformador sea seleccionado. Yo sólo voy a quitar el retraso aquí. Podemos ver la transición al instante. Ahí vamos, simpáticos y suaves. Ahora, la razón por la que preferiría usar transform, translate al mover en item, es que obtendrás un mejor rendimiento que usar left, bottom, top, right, etc. ¿Qué tal si quisieras cambiar el tamaño del botón? Ahora, en lugar de seleccionar ancho y alto, de nuevo, por un mejor rendimiento, voy a usar transform, scale. Ahora, inicialmente, haré este 0.8 de su tamaño original. Ahí se puede ver que es un poco más pequeño. Entonces en el hover, hagamos que la báscula vuelva a subir a una, así. Ahora, otro consejo personal, hora de transformar la báscula, si quieres hacerla más grande en el hover, sobre todo cuando se trata de imágenes, intenta no ir por encima de una. Esto es para garantizar la claridad y la calidad de imagen nunca se pixelará. No está tan mal cuando se usa un botón HTML aquí. Pero si esto fuera una imagen y decimos establecer la escala para ser dos, esto se pixelaría ahora. Por eso empecé en 0.8 o figura por debajo de uno, luego escalar hasta uno. Estas son solo algunas cosas a considerar cuando estás iniciando tu proyecto de clase.
5. Funciones de sincronización: Aquí tenemos un botón donde he establecido un ancho máximo de 250 píxeles, y luego al pasar el cursor, aumentaré el ancho a 300 píxeles. Ahora nuestra transición, por supuesto, está afectando el ancho máximo. Yo he hecho esto, tengo un segundo que es muy lento, sin embargo, es útil para este ejemplo. Entonces la función de sincronización está configurada para facilitar, y la facilidad son las funciones de temporización de las que hablaremos en esta lección. Facilidad nos dará una bonita animación, donde se acelera en el medio y luego se ralentiza al final. ¿ Cuáles son los otros valores? Bueno, veamos un par de ejemplos más, y probemos ease-in. Ahora, ease-in comenzará lentamente y luego se acelerará al final. Probemos ease-out, que nos dará lo contrario. Empezaremos rápidamente, y se ralentiza al final. Echemos un vistazo a lineal. Ahora, lineal nos dará exactamente la misma velocidad a lo largo de la animación. Tenemos una transición consistente a través de afuera. Ahora, algo ligeramente diferente. Echemos un vistazo a los pasos. Dentro de paréntesis necesitamos darle un número, entonces ¿cuántos pasos queremos y cómo se verá esto? Ya ves que hay tres pasos para llegar a los 300 píxeles y luego volver de nuevo. Si cambiamos esto a seis, tendremos seis escalones espaciados uniformemente. Ahí vamos. Sin embargo, no nos limitamos a estas funciones de flexibilización, porque podemos llegar a las nuestras, y para ello, podemos usar los valores cúbicos bezier. Dentro de los paréntesis, podemos dar algunos de nuestros propios valores. Voy a tirar algunos números aleatorios aquí dentro, 0.45, vamos a poner esto aquí,
0.9, y a ver qué nos da esto. Nada demasiado especial. Juguemos alrededor de algunos valores más y veamos qué nos da esto, y se remonta al final. Esta es nuestra función personalizada de flexibilización de la transición. Los valores de bezier cúbicos se componen de cuatro valores individuales, x1, y1, x2, e y2. Ahora, estos números pueden ser cualquier cosa aparte de x1 y x2, que debe ser un número entre cero y uno. Ahora estos valores se basan en una curva que da el estilo de animación. Ahora mirando la flexibilización lineal, sabemos que la velocidad es consistente a lo largo y ancho, representada por esta línea recta en la gráfica. El ratio de salida y la relación de tiempo es consistente a lo largo de
0, 0, 1 y 1. Pero ¿qué hay de diferente función de sincronización como facilidad? Bueno, sabemos que la facilidad se acelera en el medio como lo muestra esta fuerte inclinación en la curva, luego aliviarse al final, donde podemos ver que la curva se vuelve más horizontal a medida que termina. Ahora, si quieres experimentar con tus propios valores de bezier cúbicos, aquí tienes un consejo útil si estás en Google Chrome. Solo voy a traer aquí las herramientas de desarrollo, y resaltar el botón. Ahora en transición aquí, si solo abrimos esto, podemos ver nuestra función de temporización de transición y aquí tenemos nuestros valores personalizados. Ahora, si solo pasamos el cursor sobre este ícono aquí, puedes verlo dice editor bezier cúbico abierto. Si hacemos click en eso, podemos ver una curva útil aquí la cual podemos cambiar moviendo estos mangos y nuestros valores empiezan a cambiar. Esto afectará nuestro botón por aquí. También hay algunos presets de lado aquí. Hacemos click en eso, rápido fuera, lineal en. Hagamos click en un poco más de facilidad que podamos saber. Lineal y lento en. Fuera y atrás, probemos esto. Este es un bonito patio de recreo para que experimentes con tus funciones de temporización de transición, muy práctico.
6. Marcos clave de CSS: Ahora, las transiciones son geniales cuando se quiere animar entre dos estados diferentes. Pero, ¿qué pasa si tu animación necesita tener múltiples pasos? Bueno, aquí es donde entran los fotogramas clave CSS. ¿ Cómo escribimos fotogramas clave? Debajo de nuestros estilos, podemos escribirlos en la misma hoja de estilos, y por supuesto puedes separar tus fotogramas clave en su propio archivo CSS de animación si quieres. Entonces es @keyframes, y luego la siguiente palabra es el nombre de tu animación, y esto puede ser cualquier cosa que quieras. Simplemente llamaré a esta modela-animación. Dentro de fotogramas clave, es necesario especificar una posición inicial y una posición final, donde anima desde, y a dónde anima. Para este ejemplo, animaremos de rojo a azul. Esto por sí solo no funcionará. Necesitas decirle a tus fotogramas clave qué elemento te gustaría animar. Nos gustaría animar la plaza. Dentro de plaza, nombre de animación es el nombre que elegimos a continuación, que es shape-animation. Entonces similar a nuestras transiciones, debes especificar una duración. Digamos que dos segundos. Ahí vamos, anima cada dos segundos. Ahora, ¿qué pasa si te gustaría animar más pasos entre el de y el de para? Bueno, esencialmente estos se construyen a partir de porcentajes. Empezaríamos en cero por ciento, luego la animación termina en 100 por ciento. Añadamos un punto medio de decir, 50 por ciento. Cambiemos el color de fondo a verde, y cambiemos la forma de nuestro cuadrado. Démosle un radio de frontera del 50 por ciento. Ahí vamos. He cambiado a un círculo a medio camino al 50 por ciento, luego al 100 por ciento. Ahora, notarás que el cuadrado no termina en azul mientras que la animación sí termina en azul, pero luego vuelve a su estado original de rojo. Ahora bien, si te gustaría mantener esto como azul cuando termine la animación, hagámoslo. Hay otra propiedad llamada animación-modo de relleno. Nos gustaría que esto fuera hacia adelante,
así que vamos a ver cómo funciona esto, y allá vamos, la plaza está terminada en azul. Ahora, vamos a añadir algunas propiedades de animación más. Ahora movamos nuestra forma. Vamos a mover esto, girar los píxeles hacia la derecha, y 200 píxeles hacia abajo. Ahí vamos, en movimiento diagonal. Añadamos otro paso. Por lo que 25 por ciento, agrega otro color. Guardemos el amarillo, y movamos esto a la derecha por 200 píxeles, y veamos cómo se ve esto. Eso es bastante rápido, voy a tener que cambiar esto a cuatro segundos. Sería bueno tener un tercer paso donde esta plaza,
básicamente, nos gustaría que se moviera a la derecha, luego abajo,
luego a la izquierda aquí, luego de vuelta a su posición original. Lo que voy a hacer es que voy a hacer este 75 por ciento, y voy a transformar: traducir la posición a cero, 200 píxeles. Veamos cómo se ve esto. Ahí vamos. En este ejemplo, no necesitamos especificar el 100 por ciento porque el estado original es del 100 por ciento. Es esencialmente cero y 100 por ciento. Después de que el fotograma clave golpee 75 por ciento, si el cuadrado está aquí abajo o la forma está aquí abajo, entonces volverá a su estado original. Hay otra propiedad que me gustaría mostrarles, animación-iteración-recuento. Si ponemos esto en infinito, como posiblemente puedas adivinar, la animación continuará para siempre. Ahora, sólo voy a comentar esto, así que esto no me da dolor de cabeza. Ahí vamos, se detuvo. Ahora, al igual que te mostré con la propiedad de transición, hay una forma abreviada de escribir esto, solo animación. Podemos especificar la animación-forma, y luego nuestra duración, y luego nuestro modo de relleno. Se pueden incluir funciones de temporización de la misma manera, una propiedad de flexibilización como esta. Si solo elimino estos, debería funcionar exactamente de la misma manera, ahí vamos. Hay una bonita propiedad de flexibilización añadida a ella también. Ahora, al igual que la propiedad de transición de nuevo, puede agregar una duración de retardo. Se puede especificar cuándo comienza la animación. Digamos que dos segundos. Después de dos segundos, nuestra forma anima, y ahí la tienes. Se puede ver lo fácil que es crear una animación de múltiples pasos.
7. Configuración de proyectos: Empecemos a trabajar juntos en nuestro proyecto. Ahora antes de conseguir la codificación, echemos un vistazo a configurar el proyecto para que tengas todo lo que necesitas. Te mostraré paso a paso cómo voy a estar poniendo mi sitio web de una sola página junto de mi artista favorito. Pero en lugar de que copies mi código exactamente, asegúrate de tomar lo que estás aprendiendo y aplicarlo a tu propio sitio web. Por supuesto puedes usar las transiciones y animaciones que te voy a estar mostrando en mi proyecto, pero te insto a que aparezcan las tuyas propias. Ahora, dentro de una carpeta de proyecto, necesitas crear un archivo HTML índice para tu marcado de página web, un archivo style.css, y esto es para tus animaciones anuales de estilos, y una carpeta para tus imágenes. Ahora, con respecto a las imágenes, simplemente
he sacado el mío de Internet, lo que normalmente no recomendaría que lo hicieras. No obstante, como estás siguiendo un tutorial y no creando un sitio web de producción, no necesitas preocuparte por temas de derechos de autor. Para alojar tu proyecto en una página para que todos los vean y así yo y otros podemos darte comentarios, te
mostraré cómo hospedar tu proyecto en GitHub Pages. Es completamente gratis y es fácil de hacer. Ahora, si aún no tienes una cuenta de GitHub, por favor ve a github.com y regístrate. Ahora, ya tengo una cuenta, así que no voy a pasar por todo el proceso, pero solo sigue las instrucciones en pantalla y estarás configurado. La forma más sencilla de empujar tu trabajo hasta GitHub es descargar y usar GitHub Desktop. Esto se puede descargar desde desktop.github.com. Usando GitHub Desktop, podrás tomar instantáneas de cada etapa de tu trabajo, y luego al final, tendrás todo tu trabajo listo para hospedarte en GitHub Pages. Te mostraré cómo hacer esto a lo largo del proyecto. Cuando tengas GitHub Desktop en funcionamiento, asegúrate de estar asignado como tu cuenta de GitHub. Si no estás seguro de que lo estás, sólo yendo a Preferencias en la parte superior aquí, y allá puedo ver que efectivamente estoy firmado en mi cuenta. Ahora, vamos a crear un nuevo repositorio para su proyecto. Para ello, vaya a Archivo, y Nuevo Repositorio. Ahora nombre del repositorio, voy a llamar a esto Deftones Transitions, y necesitas seleccionar la ruta para la que te gustaría crear tu repositorio. Voy a dar clic en “Crear proyecto”. Ahora si solo muevo esto aquí arriba, se
puede ver que ha creado la carpeta Deftones Transiciones aquí. Ahora, debes asegurarte de que tus archivos que creamos
al principio de esta lección estén contenidos dentro de esa carpeta repo. Yo sólo voy a mover los de ahí adentro, y ahí están. Ahora, vamos a aumentar de nuevo el tamaño de esto. Ahora, tenemos el nombre de nuestro repositorio aquí arriba, y se puede ver en la pestaña Cambios, tenemos nuevos archivos que comprometer, y estos son de hecho nuestros archivos que creamos antes. Ahora, para comprometer estos, debemos escribir un pequeño mensaje para ir con el commit, y yo solo llamaré a este Comprometido Inicial. Yo sólo voy a comprometer esto a la rama principal, así. Ahora necesitamos publicar nuestro trabajo hasta GitHub, y para ello, solo podemos hacer click en “Publicar repositorio”. Ahora asegúrate de estar contento con el nombre. Sólo voy a dar click en “Publicar”. En unos segundos, se debería empujar hacia arriba. Genial. Para asegurarnos de que nuestro trabajo está en GitHub, puedes hacer clic en “Ver en GitHub” aquí. Entonces, mientras hayas iniciado sesión en tu cuenta de GitHub, puedes ver tu nombre de usuario aquí, el repositorio que acabamos de crear y tus archivos. Genial. Ahora deberías tener todo lo que necesitas para ahora empezar a codificar tu proyecto.
8. Proyecto - HTML: Ahora, si abres tu archivo HTML en tu editor de código favorito, estaré usando VS Code aquí, empecemos a trabajar en nuestro marcado. Ahora, obviamente, voy a estar codificando mi página web de una sola página. Pero solo echa un vistazo a lo que estoy haciendo y ve cómo puedes aplicar las cosas que vas a estar aprendiendo para tu propio sitio. En VS Code para crear plantillas de un archivo HTML, solo
puedo golpear el signo de exclamación y la pestaña. Usando el plugin Emmet en VS Code, esto me da un buen archivo HTML base. Mi página será sobre los Deftones, así que cambiaré el título ahí. Necesitamos enlazar a una hoja de estilo. Nuevamente, enlace a nuestra hoja de estilo y la href será style.css que de hecho es nuestra hoja de estilo aquí. En primer lugar, vamos a mirar construir una cabecera. Ahora, crearé un div dentro del encabezado con una clase de envoltura. Ahora, envolver estaré usando a través de todos mis componentes para que todos tengan el mismo ancho. Echemos un vistazo a h1. Es una bonita cabecera grande con el nombre de tu artista favorito. Entonces voy a estar construyendo un menú de navegación. Dentro de eso, habrá una lista desordenada, y habrá algunos elementos de lista dentro. Voy a dar a cada ancla, una clase de nav__anchor. Estos no eran en realidad click en cualquier lugar ya que sólo para presentación, así que voy a añadir un # allí. Tengamos una falsificación sobre pagina, copiemos y peguemos esos sobre. Vamos a tener uno sobre blog, y vamos a tener una página de contacto. Suficiente en navegación. Ahora, fuera del encabezado, voy a incluir una sección de imágenes. Vamos a dar un div o image-seccion en realidad. Voy a hacer estas etiquetas de sección, y luego dentro usaremos la envoltura. Vamos a crear un div con clase de image-seccion image-container. Entonces dentro de ahí, tendremos una bonita imagen de fondo. Porque es una imagen de fondo, no
estaré usando la etiqueta de imagen. Haré esto en un div. Daré a esto una clase de image-section__image. Ahora, para la imagen de fondo, vamos a enlazar aquí usando una etiqueta de estilo en línea. Background-image, URL, y luego necesitamos enlazar a nuestra primera imagen, y habré guardado estas dentro de la carpeta de imágenes, por lo que images/image-1.png. Debajo de ahí, vamos a crear una etiqueta de párrafo. Podemos crear un poco de texto y le daré una clase image-section__text. ¿ Qué debemos escribir aquí? Voy a escribir sobre mis canciones favoritas por ellos. Por supuesto, el contenido que incluyas puede ser lo que quieras. No tienes que copiarme. Si escribo canción 1, pongamos esto en una nueva línea, así que usaré ahí una etiqueta de break. Kimdracula es una de mis canciones favoritas por ellos, así que incluiremos eso. Ahora. Voy a incluir un par de imágenes más. Copiemos este div, péguelo en un par de veces más. Lo que necesitamos cambiar aquí es que incluiremos mi segunda imagen. Entonces canción favorita número 2, disfruto algo llamado hexagrama. Imagen número 3, cambiemos eso. Mi canción favorita número 3. ¿ Qué tal alrededor del pelaje. Ahora, antes de seguir adelante, voy a abrir esto en un navegador web. Simplemente puedes encontrar el archivo HTML, hacer doble clic en eso, y eso se abrirá en tu navegador. Lo que voy a estar usando es ir a vivir aquí en VS Code. Esta es una extensión, si no lo tienes ya. Buscamos servidor en vivo, es este top de aquí. Ahora, lo que esto me permite hacer es, cuando empecemos a trabajar en este CSS, verás las actualizaciones inmediatamente dentro del navegador. Sólo voy a abrir un servidor en vivo, y echemos un vistazo en el navegador. Reduzca esto. Ahí vamos. Ahí está nuestra primera parte de contenido aquí. Sigamos adelante. Ahora, quiero incluir una sección con algunos textos más, pero algunos botones para que podamos jugar con algunas animaciones flotando en los botones. Voy a crear una sección aquí con una clase de grupo de texto. Nuevamente, incluiremos la envoltura. Entonces dentro de la envoltura, vamos a crear un text-group__container, que contiene todo, y luego pensemos en nuestros textos. Utilizamos un párrafo, text-group__text. Toca la cruz. Entonces vamos a incluir algo de información sobre la banda. Voy a escribir sobre de dónde son. Deftones son una banda
de metal alternativo de Sacramento en California. Primer bit de contenido. Ahora, vamos a incluir un botón que podemos animar, pasar el cursor. Voy a usar dos secciones aquí. Dos secciones de texto, las cuales tendrán dos botones. Llamemos a este botón, le
daremos una clase de botón doble. Vamos a darle a esto un href. Esto no está haciendo click en ninguna parte, así que solo usaremos un # ahí. Entonces el llamado a la acción puede ser, haga clic aquí. Como dije, voy a hacer esto dos veces, así que vamos a copiar el contenedor, pegarlo abajo. Entonces, ¿qué puedo escribir sobre la banda? Lo que puedo hacer es quizá hablar de los integrantes de la banda. El miembro son, Chino, que está en la voz, Stephen, que está en la guitarra principal, Sergio, que está en el bajo, Abe, que es un baterista impresionante, y luego Frank, que es el DJ y en las teclas. Genial. Un poco de contenido de texto. El segundo botón ya es bueno para ir. Ahora, como se mencionó, no tienes que seguirme exactamente. Se puede cambiar la forma en que funciona el nav, cambiar los enlaces de navegación. No tienes que tener una sección de imágenes, o si lo haces, no tiene que venir antes de la sección de texto y los botones. Básicamente, el diseño depende de ti. Cuando llegamos a las animaciones, nuevo, depende de ti. Te voy a estar mostrando varios estilos y técnicas que puedes usar, así que intenta aplicar lo que estás aprendiendo a tu propia página a tu manera. Estos dos botones compartirán la misma animación de transición. Me gustaría un tercer botón el cual tenga su propia animación única, así que voy a añadir una sección aquí. Voy a darle una clase de sección de texto. Ahí adentro, tendremos nuestra envoltura. Entonces de nuevo, vamos a tener un párrafo text-section__text. Vamos a incluir un poco más de contenido. Hablemos de mi álbum favorito. Han producido nueve álbumes de estudio, siendo White Pony mi favorito. Yo puedo desplazar eso hacia arriba para que puedas ver. Como dije, incluiré otro botón. Vamos a darle a esto una clase de button-main, y la idea para este botón independiente es, estaré usando algunas animaciones de fotogramas clave en lugar de transición. Pero llegaremos a eso en la siguiente sección o la siguiente sección cuando hagamos algunas animaciones. Lo que me gustaría que incluyeras en tu página es un pie de página. Dentro de tu pie de página, dentro de mi envoltorio, me gustaría que incluyeras sólo un párrafo para decir que el sitio web está hecho por ti. Por favor ponga su nombre aquí. Pondré el mío. Sitio web es por mí. Excelente. Eso voy a guardar, y podemos ver el contenido de la derecha aquí. Genial. Una cosa antes de irme es, voy a incluir algunas fuentes personalizadas en mi página, que voy a obtener de Google Fonts. Lo que puedo hacer es aumentar ese tamaño. Vayamos a Google Fonts aquí. Ahora, estamos en Google Fonts. Se puede echar un vistazo. Podemos tener un desplazamiento a través y ver si hay alguna fuente que te gustaría incluir. Ahora, ya sé que quiero estar usando la fuente alata. Cuando hayas encontrado uno que te guste, si solo haces clic en eso y luego seleccionas el estilo, y luego a la derecha aquí, te dará un bonito enlace el cual podrás incluir en tu archivo HTML. Voy a copiar eso e incluirlo justo encima de la hoja de estilo. Justo así. Por último, antes de pasar a nuestra hoja de estilo, sólo
voy a comprometer mi trabajo aquí. Usando GitHub Desktop, puedes ver que el índice es el padre en el que habíamos estado trabajando, y este es todo nuestro nuevo contenido. Si quieres empujar tu trabajo, puedes hacer lo mismo que yo. Yo sólo voy a escribir un mensaje aquí, marcado de características. Voy a cometer esto, y luego voy a empujar esto hasta GitHub. Ahora, pasemos a nuestros estilos.
9. Proyecto - CSS: Una vez que estés contento con tu marcado, abre tu hoja de estilos, style.css y empecemos a añadir algunos estilos a una página. En la mía, voy a seleccionar todo y solo para incluir algunos estilos base. Voy a incluir box-size, border-box y voy a incluir la familia de fuentes, que incluirá la fuente de Google que he elegido. Quitemos todos los márgenes. Quitemos todo el relleno. Ahora mi clase de envoltura, ahora
quiero hacer que mi ancho máximo de todos los componentes sea de 940 píxeles. Añadamos algo de relleno lateral de 20 píxeles. Voy a mostrar, flexionar todos mis componentes. Alineemos los ítems a centrar. Justify-content para ser espacio entre. Por supuesto el margen, vamos a hacer cero en la parte superior y luego auto en la izquierda y la derecha, por lo que todo está centrado. Podemos ver nuestras fuentes funcionando muy bien ahí. Ahora, empecemos a bajar la página. En primer lugar, voy a incluir el encabezado. Voy a darle a esto un color de fondo de un color dorado. Ahora, te animaré a escoger tus colores, así que no copies los míos. Acolchado superior e inferior de 20 y luego cero izquierda y derecha. En primer lugar, echemos un vistazo a este nav. Voy a mostrar flex los niños y justify-content, vamos a añadir algo de espacio entre. Ahora vamos a apuntar a cada elemento de la lista. Quitemos los puntos de bala. Tipo de estilo de lista, ninguno y luego vamos a darles a todos un margen a la izquierda de 50 píxeles. Ahí vamos. Se puede ver que todo está espaciado ahora. Ahora por los propios anclas. Para todos los anclajes, voy a quitar el subrayado, así que decoración de texto, ninguna. Entonces para los anclajes nav mismos. Déjame solo comprobar que esa es la clase correcta. Sí lo es. Anclaje de Nav, hagamos estos negros. Vamos a darle un tamaño de fuente de digamos, 20 píxeles. Nuestra posición, relativa. Nos estamos dando forma muy bien. Bajemos a nuestra sección de imágenes. Clase de sección de imagen. Voy a asegurarme de que haya un color de fondo de negro. Sección de imagen y luego tenemos la clase de contenedor de imágenes que está dentro. Les vas a dar un desbordamiento de oculto. Esto se hará evidente cuando empecemos a trabajar en la transición o la animación hover en estas imágenes en cuanto a por qué estoy incluyendo desbordamiento oculto. Volveremos a eso. Ya que tengo tres imágenes, vamos a asegurarnos de que todas sean un tercio, así que 33.3 por ciento de ancho. Ahora para las propias imágenes, imagen section__ imagen. Vamos a mostrar, flexionar estas imágenes, alinear elementos. Asegurémonos de que estén en el centro y lo mismo para justify-content, asegurémonos de que estén en el centro. Démosles algunas dimensiones. Altura, voy a hacer que 400 pixeles. Entonces démosles un relleno. Nada en la parte superior e inferior sino 20 píxeles a la izquierda y a la derecha. Ahora, el fondo en sí a la imagen de fondo. No quiero repetirlas. Asegurémonos de que estén centrados, así que 50 por ciento. Entonces para el tamaño, quiero que la imagen cubra ese espacio así. No todas las imágenes están apareciendo. Déjame sólo comprobar si todo es correcto. Imagen dos y tres. Por eso. Tenemos PNG para uno, JPEG, JPEG para dos y tres, por eso no están emparejando. JPG y ahí están nuestras otras imágenes. Ahora el plano para el texto de la imagen. Mi canción favorita aquí. Mi idea es cuando pasamos el cursor sobre las imágenes, quiero que aparezca el texto. Actualmente no está ahí. Después pasamos por encima de él, aparece. Vamos a darle a este texto algunos estilos iniciales pero no nos preocuparemos por las animaciones hasta más adelante. Voy a darle al texto un color de fondo de ligeramente negro pero con media opacidad. Es transparente. Cero, cero, cero para negro y luego 0.5 para 50 por ciento opacidad y luego haremos que el texto en sí sea blanco f f f f. tamaño de fuente, hagamos esto 20 píxeles, texto se alinee para estar centrado y luego lo puedes ver ahí. Inicialmente haremos cero la opacidad y aumentaremos la opacidad a una cuando sumemos la transición. Volveremos a eso. El texto de abajo, otro texto de grupo de texto. Démosles un margen inferior de 25 píxeles. El contenedor de grupo de texto, que me olvidé. El contenedor [inaudible] vamos a darle algo de relleno de 50 píxeles por todas partes. Eso es mejor. Ahora los propios botones. Todos los botones sostendrán algunos estilos similares. Fondo, vamos a quitar eso y luego vamos a añadir nuestro propio borde de borde sólido dos píxeles y luego negro. Asegúrese de que el cursor sea efectivamente un puntero. Aumentemos el tamaño de la fuente a 18 píxeles. Demos a los botones algún relleno de cinco píxeles arriba e abajo, 20 píxeles izquierda y derecha y me aseguraré de que la posición sea relativa. Se ven bien. Nuevamente, volveremos a las animaciones flotando para estos botones. Pasemos a esta sección de texto. Sección de texto, color de fondo de, vamos a darle un gris de
e e e. relleno superior e inferior de 50 pixels y cero izquierda y derecha. Necesitaré quitarle ese colon ahí. Eso es mejor. Ahora, vamos a darle algunos estilos a la envoltura dentro de esta sección de texto. Es ligeramente diferente, por lo que display flex. El motivo por el que es diferente es porque quiero que la dirección flex esté en una columna, no en una fila. Ahora están encima el uno del otro, el texto y el botón. Ahora, alineemos los ítems a centrar y haremos lo mismo para justificar que el contenido sea centro también. El texto en sí, sección texto__ texto. Vamos a dar nuestro margen inferior de 25 píxeles y alinear el texto para ser centrado. Eso se ve bien. Ahora, el botón como parte de esta sección de texto, así botón principal, creo que le dimos a esto una clase de. No quiero ver el gris detrás de los botones, así que vamos a darle a esto un color de fondo de blanco. Entonces finalmente, si nos desplazamos hacia abajo. Echemos un vistazo a este pie de página. El pie de página, voy a hacer este negro para encajar con el diseño, pero [inaudible] de negro. Entonces otra vez, al igual que nuestro nav, le
daré el color de este bonito color dorado. Esto coincide. Desplácese hacia abajo. Sí, ahora este es el estilo ahí. Puedes agregar algo de relleno por todas partes. Vamos a dar relleno de 20 píxeles. Voy a asegurarme de que el alineamiento de texto esté en el centro. Vamos a aumentar el ancho. Veamos cómo se está dando forma a esto. Sí, eso se ve bien. Esos son los estilos base o los estilos estáticos para mi sitio web de una sola página. Ahora, a medida que avanzas a través de las lecciones, comenzaremos a agregar algunas transiciones y algunas animaciones de fotogramas clave para realmente darle vida a esto un poco. Yo sí, por supuesto, solo quiero comprometer mi trabajo hasta GitHub. Eso lo haré ahora. Podemos ver en el archivo índice, aquí es donde cambié las imágenes de PNG a JPEG y luego nuestra hoja de estilo es, por
supuesto, todos nuestros estilos. Voy a incluir un mensaje commit de característica, agregar estilos, commit y push.
10. Proyecto - Nav Bar: Voy a empezar a agregar algunas animaciones de transición a mis elementos. Ahora quizá no copie exactamente lo que les voy a mostrar en las próximas lecciones. Pero piensa en las técnicas que te estoy mostrando y propongo algunas de tus ideas, tus propias ideas para
tu sitio web de una sola página. En primer lugar, voy a pensar en animar estos elementos de navegación. Creo que lo que me gustaría hacer es cuando pases por encima de estos elementos del menú, una línea negra dibuja de debajo de cada palabra. Para ello, primero iré y crearé un pseudo elemento en el nav_anchor. Este va a ser nuestro elemento subyacente. Entonces nav_anchor después. Ahora me gustaría hacer que el color sea negro. Hagamos que la altura sea dos píxeles. Asegurémonos de que el ancho sea 100 por ciento de su padre, que será la palabra anterior. Al tratarse de un pseudo elemento, siempre
debes incluir contenido, donde esto puede ser una cadena en blanco. Ahora, necesitamos posicionar este absoluto, lo cual podemos hacer porque el padre se posiciona relativo y ahora se pueden ver las líneas dibujando ahí. Ahora pensemos en dónde nos gustaría colocarlo. Abajo menos cinco píxeles por lo que está abajo, y luego a la izquierda, queremos asegurarnos de que esto es cero así es a la muy izquierda de la palabra. Eso se ve bien. Creo que ahora podemos empezar a pensar en nuestra animación hover. Ahora debajo de todos nuestros estilos estáticos, solo
voy a escribir un comentario aquí el cual se puede flotar y luego todas nuestras animaciones y transiciones se pueden sentar abajo aquí. En el nav_anchor, cuando pasamos por encima de él, queremos apuntar al elemento after. Ahora, para perforar esto, estaré usando la escala de transformación x, que significa horizontalmente, así de izquierda
y derecha, y queremos ajustar esto al ancho completo, que será uno. Lo que esto significa es que cuando volvemos a nuestros estilos estáticos, necesitamos asegurarnos de que el elemento after, la escala x esté inicialmente establecida en cero, y desaparezcan. Ahora cuando se trata de nuestra transición, queremos apuntar a la transformación porque esto es lo que estamos apuntando aquí. Voy a hacer esto a lo largo de 0.2 segundos y usaré la flexibilización de la facilidad de salida. Ahora veamos cómo se anima esto. Genial, desde el centro. Ahora bien, si quisieras animar, digamos de izquierda a derecha, aquí es donde puedes usar el origen de transformación porque esto indicará dónde está la posición inicial. Si configuro esto en 0, 0, entonces x e y, se puede ver que la línea dibuja de izquierda a derecha. Pero me gusta que se mueva desde el centro hacia afuera. Entonces solo eliminaré esto. Genial. Ahora cuando estés contento con tus animaciones, por favor no olvides comprometer tu trabajo en el escritorio de GitHub y empujar tu trabajo a tu cuenta de GitHub.
11. Proyecto - imágenes: Ahora voy a pensar en cómo me gustaría animar estas imágenes, que deberían tener algún texto que
aparecerá frente a ellas una vez que pases por encima de las imágenes. Ahora, en el texto de la imagen, la opacidad se establece actualmente en cero. Si acabamos de poner esto en uno, se
puede ver el texto ahí. Ahora, por alguna razón que el texto no está sentado donde yo lo quiero, debería estar aquí en el centro. Imagino que hay algo mal con nuestro marcado, y de hecho lo hay, este texto debería estar dentro de la imagen div. Permítanme que actualice esto, y el último. Si guardamos eso, ahí vamos, mucho mejor, ahí debe estar el texto. Genial. Voy a volver a poner la opacidad a cero porque en esto vamos a estar animando. Una vez que estemos aquí, hagamos la transición, y es la opacidad a la que estamos apuntando, también los 2.2 segundos, y nuestra facilidad para salir. Ahora, vamos a apuntar a la imagen. Image-section_image, así que esto es lo que estaremos usando para pasar el cursor y traer el texto. Entonces es efectivamente los textos de la sección de imágenes en los que se estarán animando. Sólo necesitamos volver a ajustar la opacidad a una. Ahí entra el batido. Lo que me gustaría hacer con el texto, es quizá aumentar el tamaño del mismo así como la opacidad. Lo que voy a hacer es en el hover, siguiente escala de transición, y poner esto en uno. Entonces cuando lleguemos al texto, pongamos la escala inicial en 0.8. Más pequeño, y luego aumenta de tamaño. El motivo que no está animando en cómo me gustaría, es que esto debería ser una transformación, no una transición. Entonces también tenemos que sumar la transición aquí misma. Transforma 0.2 segundos, facilidad de entrada. Tanto la opacidad, como la transformación están siendo blanco. Imagina que eso aún no funciona porque creo que aquí. Sí, dije transición en lugar de transformar. Eso es un error fácil de cometer, así que no cometas el mismo error. La transición y la transformación son ambas muy diferentes. Ahí vamos. Ahí está nuestra transformación, transitando. Además, creo que me gustaría agregar algo de movimiento a estas imágenes. De nuevo, afectaré la escala en esta imagen. En transición, voy a apuntar a la escala de transformación. Transforma 0.2 segundos, y vamos a facilitar la entrada y salida. Entonces para la imagen misma, cuando pasemos el rato sobre ella, así que solo copiaré esto. Podemos transformar la escala porque el valor predeterminado es uno. Pondré esto en 1.1, para luego ver cómo se ven las imágenes. Genial. Trabajando a la perfección. Ahora, ahora dije en una lección anterior, que no se debe transformar escala por encima de 1.0 sobre todo cuando se trata de imágenes. Ahora, la razón por la que lo estoy haciendo aquí es porque sé que el tamaño completo de estas imágenes son mucho más grandes que este conjunto inicial dimensiones, y es por ello que las imágenes no se están pixelando. Todavía se ve bien. Ahora, después de que hayas comprometido tu trabajo, pasemos a la siguiente transición.
12. Proyecto - botones: Ahora voy a pensar en cómo me gustaría animar estos dos botones en el hover. Mi pensamiento inicial está en flotar, me gustaría que
apareciera un fondo dorado de abajo hacia arriba en una transición agradable y suave. Para que eso funcione, voy a crear un pseudo-elemento en ambos botones y que formará nuestro fondo dorado. Para apuntar a estos dos botones y sólo a estos dos botones, no al tercero, necesito recordar qué clase les dimos. Fue botón doble. Usaremos eso. Justo debajo de nuestra clase de botón, vamos a crear este pseudo tras elemento. Sé que quiero que el fondo sea mi bonito color dorado. Debemos incluir contenido si se trata de un pseudo-elemento. Desearía que la altura fuera eventualmente del 100 por ciento y ahí hay un punto y coma. Vamos a asegurarnos de que llena el espacio de los botones, izquierda necesita ser cero. Para ello, debemos asegurarnos de que la posición esté establecida en absoluta, entonces la parte superior puede ser cero. El ancho debe ser del 100 por ciento, porque estamos llenando el espacio. Ahí vamos, y podemos ver el fondo apareciendo ahí. No obstante, ya no podemos ver nuestro texto. Por lo tanto, necesitamos establecer el índice z para que sea menos uno, por lo que se sienta detrás. Eso se ve bien. ¿ Qué es lo que estaremos transicionando? Será escala transformada esta vez. ¿ Por qué? Porque será el movimiento vertical. Pondré esto en cero, y desaparece. Con respecto a la transición, podemos apuntar a la transformación 0.2 segundos de fácil entrada. Se puede ver que aquí hay un tema común cuando se trata de la duración de la transición. A mí me gusta mucho usar 200 milisegundos, eso es solo una preferencia, y me gusta usar la facilidad de salida como la flexibilización. Pero te insto a que solo experimentes con tus propios números y tus propias funciones de temporización y veas qué funciona bien para ti. Desplázate hacia abajo hasta nuestra sección de flotación. El botón doble clase al hover, vamos a apuntar al elemento after y estableceremos la escala de transformación y, para ser uno. ¿ Cómo se ve esto? Se ve bastante guay. No obstante, como
dije, en realidad no quería que apareciera desde el centro hacia afuera, quería que apareciera desde abajo. Esto de nuevo, es donde puede entrar el origen transformado. Offset origen de transformación para ser cero y cero. Tenga en cuenta que aparece de arriba hacia abajo, nos estamos acercando. Lo que realmente necesito establecer es la parte y o transformar los orígenes. origen de la transferencia x es cero, y actualmente es cero, esto debe ser del 100 por ciento, por lo que comienza desde abajo. Ahí vamos. Ahí están mis dos botones completos. Si vas a estar animando botones tú mismo, tal vez tengas que pensar en cómo puedes animar posiblemente el borde. Podría cambiar el ancho de eso, o el color, o tal vez al pasar el cursor, puede agregar una sombra, o podría cambiar el color del texto, o afectar la opacidad. Hay muchos aspectos del botón en los que se puede realizar la transición al pasar el cursor. Ten una jugada alrededor y ve qué funciona bien para tus botones. Simplemente voy a comprometer mi trabajo a GitHub. En el escritorio de GitHub, podemos ver que los estilos, aquí está nuestro botón se duplicó después de los estilos, y el hover aquí abajo. Entonces solo escribe mensaje de commit, función, colon, transiciones de
botones, voy a comprometer esto, y luego empujar esto hacia arriba.
13. Proyecto clave: En esta lección, les voy a mostrar cómo voy a utilizar animaciones de
fotogramas clave para animar el botón final. Ahora, mi idea para mi animación de fotograma clave es cuando pasas
el cursor por aquí, el ancho del borde aumenta de tamaño, y lo voy a hacer hasta que muevas el ratón. Construyamos esta animación de fotogramas clave. Si bien estamos en la sección de flotación, hagamos @keyframes y llamaré a esto BorderGrow y esto se puede nombrar cualquier cosa que queramos. Al cero por ciento, el estilo inicial tendrá un borde, sólido dos píxeles, y eso será negro. Por lo que 000. En realidad no será la frontera que estaré animando, pero será de hecho la sombra de caja. Esto dará la ilusión de que la frontera crezca en tamaño. Sombra de caja será de 000, por lo que el pixel no estará ahí, y eso será negro. Entonces el fotograma clave final, por lo que un 100 por ciento. Por lo que el paso clave final. El borde permanecerá como está, pero la sombra de caja será 00, pero luego se extenderá dos píxeles por dos píxeles y seguirá siendo negra. Entonces cuando pasamos el cursor en el botón principal, por lo que botón dash colon principal se desplaza. Añadamos la animación, que se llama BorderGrow. Voy a hacer esto bastante lentamente a lo largo de un segundo. Solo quiero que la función de temporización sea lineal, así que no usaré facilidad de entrada y quiero que esto se anime para siempre. Bueno, hasta que quitemos el ratón del botón, veamos cómo se ve esto. Ya casi está ahí, pero como puedes ver cuando la sombra de caja está a su ancho completo, retrocede a su estado original, que no queremos. Lo que me gustaría que sucediera, es que crezca en tamaño y luego transitara hacia atrás, no retrocediendo. Podemos hacer eso usando la palabra alterna. Esto alternará hacia adelante y hacia atrás entre la animación. Así como eso, eso es genial. Si bien estoy aquí sin embargo, me gustaría hacer que el color de fondo sea dorado. Eso significa que solo necesitamos agregar una bonita transición aquí para el color de
fondo 0.2 segundos, facilidad de entrada. Hermosa. Eso se ve bien. Por último, comprometamos nuestro trabajo. Característica. Botón, fotograma clave, animación, y voy a hacer un mensaje, y vamos a comprometer este trabajo y luego empujar este trabajo hacia arriba. Echemos un vistazo final a cómo se ve mi sitio web de una sola página. Esta es nuestras transiciones de navegación, tengo algunas imágenes y texto agradables, algunas transiciones de botón flotar, y una animación final de fotograma clave. Al igual que en lecciones anteriores, te
animaré a experimentar con tus propios estilos, tus propias transiciones, y tus propias animaciones de fotogramas clave. Trata de no copiar exactamente lo que he hecho y ve qué se te ocurre. De hecho, cuando se trata de tus animaciones de fotogramas clave, quizá
quieras incluir muchos más pasos de los que he hecho aquí. Solo tengo un paso inicial manera de terminar paso, pero quizá quieras tener algunos pasos provisionales con tu animación de fotogramas clave. Pero ten una jugada alrededor y vean con qué estás contento.
14. Comparte tu proyecto: Una vez que te hayas comprometido y empujado hacia arriba tu última parte de trabajo en GitHub Desktop, entra en tu cuenta en github.com, y luego haz clic en tu repositorio. Por lo que el mío se llama deftones-transiciones. Después verás tus archivos fuente. Tengo mi carpeta de imágenes, tenemos mi archivo de índice, mis estilos aquí abajo. A la derecha aquí, podemos ver que han habido ocho commits. Si hago clic en eso, se puede ver la lista de confirmaciones de lecciones anteriores, y la más reciente fue la animación de fotogramas clave de botón. Eso está todo bien. Eso está todo presente y bien. Cuando se trata de publicar tu página en GitHub Pages, necesitas entrar en la configuración. Después nos desplazaremos hacia abajo hasta la parte inferior de la página. Verás GitHub Pages está aquí. Pero dice, no soy capaz de publicar esto todavía porque necesito asegurarme que el repositorio sea público y actualmente esté configurado en privado. Abajo dice, cambiar la visibilidad del repositorio. Este repositorio es actualmente privado. Voy a cambiar esto, y lo haré público. Para confirmar esto es lo que quiero hacer, dice, por favor escriba y luego mi nombre de repositorio, así mi nombre completo, y luego deftones-transiciones. Para confirmar, entiendo, y quiero cambiar la visibilidad del repositorio. Hagámoslo. Ahora esto se pone a público. Si nos desplazamos hacia abajo hasta las Páginas de GitHub, puedes ver algunas opciones aquí. En primer lugar, la fuente. Tenemos que decirle a GitHub qué nombre de sucursal queremos que vea GitHub Pages. Hemos estado empujando nuestro trabajo a la rama principal, así que esto es lo que seleccionaré aquí. Entonces está en la raíz del directorio, por lo que podemos dejar eso tal y como está y voy a dar click en Guardar. Una vez que eso lo permita, volvamos a desplazarnos hacia abajo hacia el área y dice, tu sitio está listo para ser publicado, y nos da una bonita URL aquí. Si comprobamos esto, puede
que aún no esté listo, pero eso se debe a que GitHub Pages tardará unos minutos en publicar tu obra final. Vamos a abrir esto, abrir una nueva página en una pestaña nueva, lo siento, vamos a dar click en eso. En realidad está todo publicado y listo para salir. Todas nuestras animaciones están aquí, todas nuestras transiciones están aquí, y esta es la URL de mi sitio web de una sola página publicada. Te animo a compartir la URL a tu sitio web publicado de GitHub Pages y tal vez escribas sobre las transiciones que has agregado agregando
todo esto a la sección de tu proyecto de la clase. Ahora, esto me permitirá ofrecerte cualquier retroalimentación y cualquier sugerencia. También los animo a interactuar con los demás alumnos, para que puedan ofrecerse unos a otros algún apoyo. Por supuesto, si tiene alguna pregunta o necesita algún consejo, entonces por favor hágamelo saber. Obviamente estoy feliz de ayudar.
15. Resumen: Enhorabuena enorme por completar este curso. Has logrado seguirme conmigo y crear tu propio sitio web de una sola página lleno de transiciones y animaciones. Ahora deberías tener una comprensión bastante decente de los diversos aspectos de las animaciones y transiciones
CSS que ahora puedes utilizar en tus futuros proyectos web. Esperemos que hagas justamente eso. Ahora podrás ofrecer mucho más como desarrollador web y poder demostrar tus nuevas habilidades encontradas en la creación de sitios web dinámicos. Por último, sólo quiero decir un gran agradecimiento por suscribirse a este curso. Realmente sí significa mucho. Sin su apoyo, no sería capaz de hacer contenidos como este. De verdad espero que hayas aprendido algo de estas lecciones. De verdad espero que hayas disfrutado de este curso, y si lo hiciste, por favor tómate el tiempo para dejar una revisión del curso, realmente
hace una gran diferencia. Con eso dicho, muchas gracias, ahora adelante y codigo.