Crear sitio web de cartera personal con respuesta

1. Introducción: Bienvenido al nuevo curso, donde puedes aprender sobre cómo construir un sitio web de portafolio personal desde cero con solo tres tecnologías principales, HTML, CSS y JavaScript. Si quieres crear tu propio portafolio, lo que te ayudará a representarte de la mejor manera y ser contratado. Entonces este es el curso adecuado para ti. Si le preguntas a alguno de los empleadores o gerentes de proyecto cómo elegir a los mejores desarrolladores, cada uno. Pero lo más importante del desarrollador para representarse a sí mismo o a sí misma con un buen defecto. Si estás familiarizado con HTML, CSS y JavaScript, entonces todos ya pueden crear un sitio web de portafolio personal realmente bueno que te permitirá expresarte y mostrar a todos tus habilidades y conocimientos. A lo largo de este curso, construiremos una plantilla de sitio web de cartera que estará llena de características y efectos modernos y hermosos. Porque si quieres crear un sitio web usando solo esas tres tecnologías centrales , entonces definitivamente debería ser uno avanzado y genial. No decimos que se convertirá en tu propio sitio web de portafolio y podrás copiarlo. Pero será una gran inspiración que te ayudará a crear tus propios sitios web de portafolio o mejorarlo si todos tienen uno. Como ya dijimos, construiremos este proyecto desde cero absoluto. No usaremos ninguna de las herramientas, bibliotecas y frameworks de terceros. Una vez que construimos un sitio web, entonces te enseñaremos a alojar el proyecto y hacer vida para que esté disponible para todos. Y además, podrás conocer cómo hacer que el formulario funcione con el fin de obtener feedback de tus invitados, hará que el proyecto qué partes sean de grandes tamaños para que cada usuario pueda acceder al sitio web desde cualquier dispositivo óptico. Creo que este curso será interesante y útil para todos. O sea, es tártaro o desarrolladores experimentados. Así que no esperes y únete a nosotros 2. Configuración: Hola y bienvenidos al curso. Nos alegra que estés aquí y esperamos que disfrutes del curso antes de que profundicemos y empecemos a crear nuestros proyectos. En primer lugar, tenemos que preparar nuestro ambiente de trabajo. Estoy seguro que la mayoría de ustedes ya están preparados para escribir el código. Si es así, entonces puedes sentirte libre de saltarte este video y saltar a los proyectos de inmediato. Pero si no, entonces ese no es el problema. Sigamos adelante y montemos algunas herramientas. A lo largo de este curso, necesitaremos dos herramientas principales, que son el navegador web moderno y un editor de texto. Como navegador web, voy a usar mayormente Google Chrome. Y también en algunos casos también necesitaremos la ayuda de Mozilla Firefox. Estoy seguro de que ya sabes cómo instalar estos navegadores web, y creo que todos ya los tienen. Pero de todos modos, veamos cómo descargarlos. Para obtener el Google Chrome, tenemos que ir a esta URL aquí y descargar el navegador web. El proceso de instalación es bastante sencillo, así que no voy a pasar por él. En cuanto al Mozilla Firefox, tienes que usar esta URL y descargar el navegador web desde aquí. Ambos enlaces se adjuntarán a esta conferencia. Bien, sigamos adelante y hablemos del editor de texto. Vamos a usar Visual Studio Code porque estos momentos es uno de los mejores editores de textos del mundo. Por supuesto, puedes sentirte libre y usar tu editor de texto favorito. Depende de ti, pero te recomiendo usar el código VS. Para poder descargar el código VS, tienes que visitar este sitio web y obtener el editor de texto ya sea para Windows o Mac o Linux. Este enlace también se adjuntará a esta conferencia. El proceso de instalación del Visual Studio Code también es muy sencillo, así que estoy seguro de que no va a tener ningún problema con él. Bien, así que una vez que instales ambas herramientas estarás bien para ir Así que vamos a saltar directamente a los proyectos 3. Vista previa de proyecto: Hola y bienvenidos a la primera conferencia de este curso en la que voy a repasar el proyecto y describir todas estas secciones en detalle. Antes de eso, me gustaría mencionar que el proyecto se creará en base a HTML, CSS y JavaScript. Por lo que debes tener una comprensión básica de esas tecnologías para poder seguir todas las conferencias. Bien, sigamos adelante y repasemos los proyectos. El primer tramo que vamos a construir será el aterrizaje, en el que tenemos esos círculos animados. Se mueven. Una vez movemos el cursor. También en el centro de los préstamos, tenemos la imagen del diseñador web y círculos improbables. Se mueve dentro de su propio círculo y crea este efecto agradable y fresco. Además, la imagen se mezcla con el fondo. Entonces aprenderás sobre cómo crear este efecto usando CSS. En la esquina superior derecha de la página, tenemos un par de elementos de navegación. Están conectados a las secciones adecuadas. Si hacemos clic en ellos, entonces navegaremos a las secciones correspondientes. Además, si empezamos a desplazarnos hacia abajo, los elementos de navegación se transformarán en el icono del menú. Y si hacemos clic en él, entonces se mostrarán de nuevo. En la esquina superior izquierda de la página, tenemos el logo, el nombre completo del diseñador. En los lados izquierdo y derecho del préstamo, se puede ver el texto que es pegajoso. Si empiezo a desplazarme hacia abajo, se quedará atascado por un tiempo. ¿Bien? Además de eso, tenemos aquí botón con un bonito efecto hover Si hago clic en este botón, nos navegará a la sección de proyectos. Bien, eso es todo sobre el aterrizaje. A continuación tenemos la sección Acerca de mí. Incluye textos grandes que por defecto se mezclan con el fondo. Y si empiezo a pasar el cursor sobre el texto, entonces los electrones se volverán más ligeros con unos bonitos efectos de animación Además de eso, tenemos aquí un botón similar que nos permite navegar a la sección de contacto. Bien, eso es todo sobre esta segunda sección. A continuación viene la sección del proyecto, que creo que es una de las secciones más interesantes del proyecto. Por defecto, vemos aquí seis proyectos diferentes. Si vuelo el cursor sobre ellos, entonces las imágenes comenzarán a desplazarse muy bien hacia arriba en un entorno 3D Si hago clic en alguno de los proyectos, entonces ellos se expandirán. Podrás desplazarte hacia abajo y consultar el proyecto en detalle. Aquí tenemos botón de cierre. Si hago clic en él, entonces se cerrará el proyecto. Además de que tenemos aquí, botón Mostrar más. Si hago clic en él, entonces se mostrarán un par de proyectos ocultos. La página se desplazará hacia abajo automáticamente. El texto en el botón se cambiará a mostrar menos. Y también la flecha girará según la dirección de desplazamiento. Si hago clic en el botón entonces los proyectos se ocultarán. Bien, a continuación viene la sección de Servicios. Tenemos aquí un par de servicios diferentes que se muestran en una fuente grande. Si hago clic en ellos, entonces se expandirán y se mostrarán algunas descripciones. Bien, después de eso será la última sección del proyecto, que es el contacto. Consiste en un par de campos de entrada diferentes. Y también tenemos aquí un botón Enviar. En realidad esta forma funciona. Quiero decir que los campos están validados y también el usuario puede enviar un mensaje. Porque una vez que construyamos el proyecto, lo alojaremos y lo haremos vivir. Si siento los campos. Y luego haz clic en enviar solicitud, se enviará el formulario y recibirás el mensaje. Como dije, el formulario está validado. Por ejemplo, si dejo los campos vacíos y envío el formulario, entonces obtendremos algunos mensajes de error. Justo al final de la página, tenemos una bonita presentación de diapositivas de los íconos de las redes sociales Además de eso, tenemos un par de características adicionales en el proyecto. Como puedes ver, el cursor tiene el círculo y los puntos, y se mueven con el cursor muy bien. A continuación, si paso el cursor sobre algunos elementos como proyectos o servicios, entonces el círculo cambiará de forma y obtendremos la forma de los elementos de Harvard Además de eso, tenemos un bonito efecto con el icono Menú y la barra de progreso. Si vuelo el cursor sobre ellos, entonces se volverán pegajosos para el cortesano Pero si muevo el cursor lejos de sus posiciones iniciales, obtendrán sus lugares predeterminados. Por último, voy a hablar de la barra de progreso. Se coloca en la esquina inferior derecha y tiene una posición fija. Una vez que empecemos a desplazarnos hacia abajo en la página, entonces este círculo blanco comenzará a sentirse con la línea roja. Una vez que vayamos hasta la página se llenará todo el círculo. Y también la flecha girará. Si hago clic en la barra de progreso, entonces navegaremos hasta la parte superior de la página. Además de eso, podemos hacer clic en la barra de progreso. Nos permitirá navegar hacia abajo sección por sección. La barra de progreso trabaja con la sección del proyecto. Si amplío el proyecto, entonces la barra de progreso se actualizará y comenzará a funcionar de acuerdo a la imagen. Pero si cierro el proyecto entonces la barra de progreso seguirá funcionando de acuerdo a la página. Bien, así que eso es todo sobre estas secciones y características del proyecto Como ya dijimos, va a responder a los diferentes tamaños de pantalla. Si inspecciono la página, cambie al modo responsive y verifique el proyecto. En los diferentes tamaños de pantalla. Verás que responde. Me gustaría mencionar aquí una cosa, el proyecto está construido sobre un tamaño de pantalla extra grande. En esto coincide con 1920 píxeles de ancho y 1080 píxeles de alto Si está utilizando el tamaño de pantalla relativamente más pequeño que el proyecto, puede que no se vea bien durante las conferencias. Por lo que recomiendo cambiar al modo de respuesta y establecer el ancho y la altura así. De todos modos, no tienes que preocuparte porque al final del proyecto, haremos que el sitio web sea responsive Como ya mencioné, alojaremos el proyecto y lo haremos vivir usando Netlify Entonces creo que estamos listos para comenzar. A continuación, necesitamos configurar algunas herramientas y estaremos listos para ir. Entonces, sigamos adelante. 4. Preparar antecedentes y crear estilos comunes: Bien, entonces estamos listos para comenzar a construir nuestros proyectos. He creado una nueva carpeta en el escritorio en la que solo tengo las imágenes. O sea, tenemos aquí un par de carpetas diferentes para diferentes imágenes. Sigamos adelante y abramos esta carpeta en código VS y creemos nuestros archivos de trabajo. Necesitamos tres expedientes diferentes. El primero va a ser index.html. Entonces el siguiente va a ser sobresaltado CSS. En cuanto al tercero, deberían ser scripts punto js. Después abre el archivo index.html y crea el documento HTML básico. Para eso, voy a usar uno de los paquetes de código VS incorporados que se llama emmet Tenemos que poner un signo de exclamación y luego golpear Tab o Enter Aquí tenemos etiquetas HTML básicas. Lo primero que voy a hacer es cambiar el título. Vamos a insertar aquí. Nick Brown, diseñador creativo. Después de eso, vinculemos archivos CSS y JavaScript. Voy a abrir etiqueta de enlace en los elementos de cabeza. Y luego tenemos que especificar aquí la ruta del archivo. Para el archivo JavaScript, tenemos que abrir la etiqueta script justo encima de la etiqueta de cuerpo de cierre. Y luego en el atributo source tenemos que especificar la ruta del archivo. Bien, así que los tres archivos están vinculados y ahora podemos ejecutar el proyecto al navegador Para eso. Como ya mencioné anteriormente, voy a usar Live Server. Nuevamente, nos permite ejecutar el proyecto en vivo en el navegador y realizar actualizaciones y cambios sin actualizar la página cada vez. Por último, voy a colocar el navegador y el editor de texto como para que podamos comenzar. Entonces lo primero que voy a hacer es crear estos fondos oscuros. Y también crearemos algunos estilos de reset y comunes. En primer lugar, sigamos adelante y comencemos con el marcado HTML Vamos a insertar tus comentarios. Contenedor de página. Y contenedor fuera de página. Luego abra la etiqueta div y se asigne a su contenedor de clase. Por lo que este elemento incluirá todo el contenido de la página web. A continuación, voy a crear otra etiqueta div para el fondo de la página. Pero primero, insertemos sus nuevos comentarios. En realidad, prefiero separar el código con los comentarios porque nos permitirá escribir código más limpio y comprensible. Así que vamos a insertar su página BG y fuera de página vg. Bien, así que eso es todo sobre el marcado HTML en este momento, vamos al archivo CSS Como dije, voy a preparar algunos reset y estilos comunes. Entonces, insertemos nuevos comentarios. Estilos comunes. De estilos comunes. Después selecciona todos los elementos usando un asterisco. Entonces, antes que nada, voy a deshacerme del default, margin y padding de cada elemento. Pongamos a ambos a cero. Entonces voy a hacer el box-sizing border-box. En este caso, el relleno y borde se incluirán en el tamaño del elemento. A continuación, voy a eliminar el subyacente por defecto de los enlaces. Entonces necesitamos usar decoración de texto con el valor none. Además, quiero deshacerme de las viñetas predeterminadas de los elementos de la lista. Vamos a establecer el estilo de lista, escriba a ninguno. Entonces voy a quitar el contorno por defecto de los elementos. Vamos a ponerla en ninguna. En realidad en bosquejo, estoy en la frontera que aparece una vez que nos enfocamos en los foros y botones. Entonces lo último que quiero hacer es definir la familia de fuentes. A lo largo de este proyecto, usaremos dos fuentes diferentes de Google. Así que sigamos adelante y visitemos el sitio web de Google Fonts. Entonces la primera fuente que voy a buscar a se llama euro. Seleccionemos todos los estilos. Para vincular la fuente, tenemos dos formas diferentes. Podemos copiar el enlace aquí y pegarlo en el elemento head en el archivo HTML. O podemos hacer clic en Importar, tomar esta URL y pegarla en el archivo CSS. Este teléfono va a ser nuestro predeterminado. Vamos a definirlo para cada elemento. Aquí necesitamos, el nombre de la fuente, JIRA y sensorial. Bien, el siguiente teléfono entonces voy a buscar se llama Poppins Voy a seleccionar todos estos estilos excepto el italiano quiere. Entonces toma el enlace y pégalo también en el archivo CSS. Bien, así que todos esos estilos se aplicarán a cada elemento que creará a lo largo del proyecto A continuación, voy a encargarme de la unidad de medida. A lo largo del proyecto, utilizaremos la rampa como unidades de medida. Por defecto, una RAM es igual a 16 píxeles porque el tamaño de fuente del elemento HTML es igual a 16 píxeles. Quiero convertir una RAM en diez píxeles porque creo que será más conveniente y fácil de calcular. Para ello, tenemos que disminuir el tamaño de fuente de los elementos HTML y convertirlo en 62.5 por ciento Entonces en este caso, un rem será igual a diez picos. Bien, eso es todo con respecto a los estilos comunes en este momento, sigamos adelante y cuidemos el trasfondo Vamos a insertar nuevos comentarios para la página necesitamos n de la página BG y seleccionemos elementos div. Entonces se va a arreglar el fondo. Si echamos un vistazo al proyecto terminado y nos desplazamos hacia abajo, verás que está fijo y no se mueve. Entonces, fijemos su posición para arreglar. A continuación, voy a definir este ancho y alto. Vamos a establecer el ancho al 100%. En cuanto a la altura, voy a hacer que sea el 100% de la ventana Por lo tanto, necesitamos aquí tiene que ser h. ¿Bien? Después de eso, voy a poner la imagen como fondo. En primer lugar, usemos una función de degradado lineal porque quiero oscurecer un poco la imagen. Vamos a insertarte el valor RGBA con un color negro y con los puntos de opacidad siete Y luego volver a usar el mismo valor RGBA con la opacidad a 0.7 Después de eso, voy a definir la ruta de la URL de la imagen. Y tenemos que especificar aquí el camino de la imagen. Tenemos carpeta de imágenes y la imagen para el fondo, que se llama bg dot JPG. Además de eso, vamos a establecer la posición al centro y también establecer fondo. Repetir, no repetir. Y por último, cuando se define el tamaño del fondo, hagámoslo de color. Bien, así que aquí tenemos nuestra imagen de fondo a pantalla completa A continuación, voy a encargarme del cursor. Entonces, sigamos adelante. 5. Crea círculo de ratón animado: Bien, Así que una vez que tenemos preparar Fondo y Crear algunos Estilos Comunes. A continuación voy a sacar aquí del cursor. Quiero decir ese Círculo y el punto, que se mueve según los movimientos del ratón. Además de eso, si paramos el ratón, verás que el círculo y los puntos se están animando Además, si vivimos la página, entonces desaparecerán. Bien, así que eso es lo que vamos a hacer en este video. En primer lugar, vamos a crear esos dos elementos en el archivo HTML. Voy a hacer eso fuera del contenedor. Vamos a insertar nuevos comentarios, mouse Circle y de Mouse Circle. Entonces vamos a tener dos elementos distintos. El primero va a ser el círculo del ratón, y el segundo van a ser los puntos. Me refiero al punto del ratón. Bien, sentémonos sobre el HTML. Siguiente. Voy a darle estilo a ambos elementos. Así que vamos a insertar nuevos comentarios en CSS justo después de los Estilos Comunes. Necesitamos mouse Circle. Y de Círculo de Ratón. A continuación, seleccione Círculo de ratón. Al principio voy a definir su anchura y altura. Vamos a ponerlos a seis RAM. Entonces necesitamos frontera con los valores 0.1 run solid. Y como el color, voy a usar C7, un seis a dos Y también voy a hacer que el elemento sea redondeado usando border-radius 50 por ciento Bien, entonces aquí tenemos el círculo. A continuación, tenemos que cuidar su posición. Voy a fijar la posición dos fija. Entonces en estos momentos el círculo ya no es factible porque terminó detrás del fondo. Y para arreglarlo, usemos la propiedad z-index Tenemos que asignarle algún valor superior a cero. Digamos 300. Bien, eso es todo con respecto al círculo. Por ahora. Sigamos adelante y cuidemos el segundo elemento, que es un punto. Vamos a seleccionarlo y definir su ancho y alto. Voy a hacer que ambos apunten fibrina y también cambien el color de fondo Usemos nueve P 0 D E. Así que aquí tenemos los puntos. Ahora tenemos que encargarnos de su posición. Tenemos que hacer su posición fija. En realidad, algunos de estos mosaicos serán similares para ambos elementos por lo que podemos seleccionarlos simultáneamente. Entonces podemos agarrar esas tres líneas de código y pegar. Entonces tú. Bien, eso es. este momento, ambos elementos están estilizados y ahora es el momento de que funcionen usando JavaScript. Lo primero que tenemos que hacer es seleccionar ambos elementos. Así que vamos a crear una nueva variable. Voy a llamarlo Círculo de Ratón. Después selecciónela usando el método selector de consultas. Tenemos que especificar aquí el nombre de la clase, mouse Circle. A continuación voy a seleccionar el punto del ratón. En realidad podemos duplicar esta línea de código. Después cambia el nombre de la variable. Va a ser el punto del ratón. Y también cambiar el nombre de la clase. Necesitamos el punto del ratón. Bien, después de eso, necesitamos crear una función en la que tengamos que definir las posiciones superior e izquierda para ambos elementos. Al principio, vamos a comentarios inseguros. Círculo de Ratón y Círculo de Ratón. Luego crea una función de flecha. Lo voy a llamar Mouse Circle N. Esta función tomará dos parámetros, X e Y. Esos parámetros serán los valores de las propiedades superior e izquierda. Para definirlos, voy a usar las propiedades de estilo y texto CSS. Vamos a adjuntar la propiedad de estilo a Mouse Circle, seguido de la propiedad fiscal CSS, en la que podemos definir múltiples estilos CSS. Entonces como decíamos, tenemos que definir las posiciones superior e izquierda como el valor de la posición dura. Voy a pasar aquí el parámetro Y, seguido de los píxeles. Y entonces necesitamos propiedad dejada con un valor X píxeles. adelante y dupliquemos esta línea de código y cambiemos dando vueltas a dos puntos Bien, así que ahora tenemos que llamar a esta función y definir los argumentos adecuados para los parámetros X e Y. Tenemos que ejecutar esta función cuando el ratón se mueve. Es decir, tenemos que adjuntar los eventos de movimiento del ratón a los elementos del cuerpo. Y una vez que se desencadene este evento, entonces tenemos que llamar a esta función. Al principio, adjuntemos un oyente de eventos al cuerpo. Cuando un cuerpo de punto de documento seguido del método add event listener Entonces tenemos que pasar aquí el tipo de los eventos, que va a ser el movimiento del ratón. Y también necesitamos aquí una función de devolución de llamada, que se ejecutará una vez que se desencadene el evento Además, voy a pasar aquí objeto de evento. Al principio. Veamos la consola, cómo funciona este evento. Abramos las herramientas del desarrollador y cambiemos a la pestaña de la consola. Entonces una vez que comencemos a mover el mouse entonces ocurrirá el evento. ¿Correcto? Ahora, quiero mirar el objeto event, que pasamos aquí en la función callback Entonces ahora si movemos el mouse, obtendremos el objeto de evento mouse en la consola. Si bajamos ocho, entonces encontraremos aquí muchas propiedades diferentes. Vamos a usar el cliente X y el cliente. ¿Por qué propiedades? En realidad, nos dan la distancia desde los bordes superior e izquierdo de la vista. Entonces esos valores deberían ser los argumentos de la función. Quiero decir, esos valores serán las posiciones superior e izquierda del círculo y los puntos. Entonces, antes que nada, vamos a crear variables. Voy a usar let declaration. Nombremos la variable como X. Debería ser igual a E punto cliente X. Luego duplicar esta línea de código y cambiar X a Y. Después de eso, tenemos que llamar a la función me refiero Mouse Circle F N, y tenemos que pasar X e Y como argumentos. Entonces ahora si movemos el ratón que el círculo y los puntos se moverán con el curso. ¿Correcto? Ahora, como puedes ver, necesitamos cambiar ligeramente las posiciones de ambos Elementos porque necesitamos que el cursor esté en el centro del círculo con un.para lograrlo, tenemos que mover ambos elementos según el eje X e Y en tenemos que mover ambos elementos -50 por ciento Transformar la función Transformar Traducir Y tenemos que pasar aquí -50 por ciento dos veces. Bien, entonces ahora las posiciones de ambos elementos están fijas. Y lo único que tenemos que hacer es agregar un poco de animación a ambos Elementos. Para eso, tenemos que usar fotogramas clave CSS. Primero, vamos a crear la animación para el Círculo de Ratón. Entonces durante la animación, voy a aumentar y disminuir el tamaño de los elementos un par de veces. Crear fotogramas clave. Voy a llamarlo como Mouse, Circle y él. Me refiero a la animación. Entonces al 0%, el ancho y alto serán seis RAM. Entonces vamos a duplicar este código. A continuación va a ser el 25%. Voy a aumentar ambos valores a ocho RAM. Entonces otra vez, duplica el código. El siguiente paso va a ser el 35 por ciento. El ancho y la altura van a ser RAM completa. A continuación, tendremos 70%. Los valores serán un tranvía. En cuanto al último paso, me refiero al 100%, necesitamos de nuevo valores predeterminados, seis rampa. ¿Bien? Entonces los fotogramas clave están listos, y ahora tenemos que aplicar esas reglas al Círculo del Ratón Sigamos adelante y utilicemos la propiedad de animación. Primero, necesitamos especificar el nombre de los fotogramas clave, Mouse Circle Anime Que especificar la duración va a ser de 10 s. también, ejecutaremos la animación infinitamente Y luego voy a usar una de las funciones de cronometraje de animación, lineal. Bien, así como pueden ver, el círculo se está animando Hagamos esto de manera similar a los puntos del ratón. En el caso de Mouse dots, voy a aumentar el tamaño sólo una vez. Así que vamos a crear fotogramas clave CSS. Voy a llamarlo Puntos de ratón, Anime. Entonces al 0%, voy a hacer ancho y alto 0.5 RAM. Estos son los valores predeterminados que el siguiente paso va a ser del 55%. Cambiemos los valores, hazlos 1.5 g. y luego al final de la animación, me refiero al 100%. Necesitamos, nuevamente el valor por defecto es 0.5 g, ¿verdad? Entonces los fotogramas clave están preparados para los puntos del mouse. Sigamos adelante y asignemos a él y propiedad de animación. Necesitamos aquí el nombre de los fotogramas clave, mouse dot anim, seguido de la duración 10 s. Por otra parte, necesitamos infinito y lineal ¿Bien? Entonces, como puede ver, ambos elementos están animando y tenemos aquí un bonito efecto Antes de terminar esta conferencia, voy a hacer un par de cosas. Una vez que el cursor sale de la página, quiero ocultar ambos Elementos. Para eso, voy a usar uno de los eventos llamados mouse leave. Adjuntemos el oyente de eventos al cuerpo. Entonces necesitamos especificar aquí el evento mouse leave, seguido de la función callback Entonces para ocultar los elementos, voy a usar opacidad con el valor cero Entonces, cuando Mouse Circle estilo punto opacidad de punto con valor cero, luego duplica esta línea de código y cambia dando vueltas a dos Ahora, si dejamos la página, entonces desaparecerán el círculo y el punto. Y si volvemos, entonces volverán a aparecer. Bien, ya casi terminamos. Sólo tenemos que hacer una cosa más. En realidad, tenemos aquí un pequeño tema. Si vuelvo a cargar la página y los mantengo fuera de la página, entonces el círculo y el punto terminarán en la esquina superior izquierda de la página No necesitamos eso. Tenemos que arreglar ese problema. Voy a ocultar ambos elementos por defecto y luego hacerlos visibles solo quiere que se produzca el movimiento del mouse eventos. Entonces necesitamos asignar a ambos Elementos opacidad cero por defecto Entonces necesitamos pasar opacidad uno con la parte superior y dejar posiciones dentro de la función Entonces ahora si vuelvo a cargar la página entonces se solucionará el problema Bien, Finalmente, hemos terminado con el ratón Círculo. Pasemos a la siguiente conferencia. 6. Crear y personalizar encabezado de sitios web: Bien, ahora es el momento de comenzar a trabajar en nuestra primera sección, que va a ser esta Landing page Tenemos aquí un par de elementos diferentes con bonitos efectos de animación. Esos círculos se mueven una vez que movemos el ratón. Y como se puede ver, se mueven en sentido contrario. También en el centro del Landing, tenemos un círculo grande en el que se puede ver la imagen del diseñador con algunos efectos agradables. Además de eso, tenemos un logotipo en la esquina superior izquierda de la página, y también algunos elementos de texto en los lados izquierdo y derecho del Landing. Sigamos adelante y comencemos a crear un marcado HTML. Vamos a insertar nuevos comentarios justo después de la página Fondo. Necesitamos la Sección Uno de la Sección Uno. Después abre la etiqueta de sección con la clase Sección uno. Entonces como dijimos, esta sección incluirá un par de elementos diferentes. El primero va a ser el logo. Vamos a insertar nuevos comentarios para logo. Entonces voy a abrir etiqueta de enlace con un logo de clase. Y como el contenido, te voy a instituir, Nick Brown. Muy bien. A continuación tendremos Círculos Animados. Entonces, insertemos nuevos comentarios para los círculos animados. Entonces en general vamos a tener cinco círculos. Cuatro de ellos serán pequeños, y además tendrán un círculo grande en el centro. Vamos a abrir una etiqueta DIV para la clase. Círculos. Va a ser el envoltorio de pequeños círculos. Los círculos se crearán usando etiquetas DIV. Entonces abramos TikTok con las clases Circle y Circle one El primero va a ser Nombre de clase común también. El segundo, lo usaremos para estilos individuales. Duplicemos esta línea de código tres veces y luego cambiemos los nombres de las clases. Bien, además de eso, necesitamos otro círculo en el que tenga la imagen del diseñador Permite abrir la etiqueta DIV. Será el envoltorio. Vamos asignados a la clase Círculo Principal. Y luego inserta tu etiqueta de imagen. Especificemos aquí la ruta de la imagen. Tenemos la carpeta de imágenes que necesitamos para seleccionar la carpeta llamada Landing. Y entonces la imagen se va a diseñar dot JPG. Bien, eso es todo, sobre los círculos. A continuación, voy a crear elementos de rumbo, que se colocarán en los lados izquierdo y derecho del Aterrizaje. Vamos a insertar nuevos comentarios. Texto destacado. Y de texto de características. Voy a abrir la etiqueta de encabezado H4 con las clases texto destacado y texto de función uno Nuevamente, el nombre de primera clase se utilizará para Common Styles. En cuanto al segundo, lo usaremos para estilos individuales como contenido. Vamos a insertar tu creatividad. Entonces voy a duplicar esta línea de código. Cambia el nombre de clase al que necesitamos incluir texto, y también cambia el contenido que debes diseñar. Bien, así que vamos a hablar del marcado HTML. Ahora mismo, aquí no hay nada visible porque el fondo está fijo y los elementos terminaron detrás de él. Arreglemos ese problema al principio. Insertemos nuevos comentarios para la sección uno en el archivo CSS. Después selecciona esta sección Elementos y cambia su posición, conviértela en un relativo. Entonces ahora los elementos son visibles y luego podemos comenzar a personalizarlos. Definamos el ancho y alto de esta sección. Voy a establecer con el 200 por ciento. En cuanto a la altura, va a ser el 100% de la ventana gráfica. Bien, ahora es el momento de Personalizar el logo. Vamos a insertar nuevos comentarios para logo. A continuación, seleccione los elementos de enlace. En primer lugar, voy a definir su posición. Hagámoslo absoluto. Como recuerdas, se va a colocar en la esquina superior izquierda de la página Así que voy a establecer la posición superior a la RAM ya que tanto la posición izquierda va a ser de cinco corridas. Además, aumentemos el tamaño de la fuente, hazlo a Ram. Voy a transformar texto en mayúsculas También cambia el color, hazlo blanco, ¿verdad Eso es todo sobre el logo. Ahora tenemos que seguir adelante y Personalizar el resto de los elementos. Antes de que empecemos pequeños círculos, quiero encargarme del círculo principal porque en este momento como pueden ver, tenemos aquí una imagen grande que abarca casi la totalidad de los préstamos. En primer lugar, quiero colocar el contenido de esta sección, el centro. Y para eso, usemos flexbox. Tenemos que configurar la pantalla para flexionar. Entonces para poder enviar a los elementos horizontalmente, necesitamos justify-content En cuanto al centrado vertical, necesitamos alinear los elementos. Centro. Bien, entonces el contenido está centrado y ahora tenemos que empezar a trabajar en el círculo principal. En primer lugar, voy a insertar comentarios, Círculos animados. Y de círculos animados. Después selecciona el Círculo principal y define ancho y alto. Voy a ponerlos a los dos en 55 RAM. Y también establecer la posición en absoluto. Ahora mismo la imagen es demasiado grande. Tenemos que mantener el tamaño de la imagen, pero también tenemos que aplicar con un alto al elemento padre. Estoy en el círculo principal. Entonces voy a usar desbordamiento oculto. Bien, entonces ahora el problema está arreglado. Hagamos que el elemento sea redondeado usando border-radius 50%. Además de eso, necesitamos enviar a la imagen dentro del círculo. Para eso, podemos usar, nuevamente los libros flux con el fin evitar escribir el mismo código una y otra vez, voy a crear una nueva clase en los Estilos Comunes. Llamémoslo centro y asignado a él display flex, justifique el centro de contenido y alineemos el centro de elementos. Entonces me voy a deshacer de estos estilos desde el elemento section. Y en lugar de eso, podemos asignar el centro de clase a la sección y también al círculo principal. En el archivo HTML. En este momento la imagen está centrada y tenemos que personalizarla un poco. Seleccionemos Imagen. Ahora, quiero usar una de las propiedades CSS llamada mix blend mode. Nos permitirá mezclar la imagen con este fondo oscuro. Esta propiedad puede aceptar diferentes valores. Se puede jugar con ellos. En este escenario, creo que el mejor es Color. Esquivar. Bien, eso es todo sobre el círculo principal. Sigamos adelante y cuidemos el resto de los Círculos. Seleccionemos envoltorio, dale a Elements. Y al principio definir su posición, hacerla absoluta. Y también establecer las propiedades top e left, ambas a cero. A continuación, voy a expandir este elemento a todo el Landing. Para eso voy a establecer, podemos esconderlos dos 200 por ciento. Como recuerdas, hemos creado cuatro pequeños círculos diferentes. Voy a alinearlos usando una cuadrícula CSS. Crearemos dos columnas y dos filas. Y colocaremos cada círculo en la celda separada de la cuadrícula. Así que al principio vamos a establecer display a grid que con el fin de definir columnas, voy a usar la propiedad llamada grid template columnas. Como dijimos, tendremos dos columnas similares. Entonces voy a usar la función repeat, que tomará dos argumentos. El primero va a ser el número de las columnas a. En cuanto al segundo, será el tamaño. Como el tamaño. Voy a usar una unidad fraccionaria. Duplicemos esta línea de código y cambiemos las columnas en filas. ¿Está bien? Para poder ver el diseño de la cuadrícula, voy a inspeccionar la página. Y en la pestaña Elementos, encuentra los círculos. Como puede ver tenemos aquí un pequeño botón llamado grilla. Si hago clic en él, se mostrará el diseño de la cuadrícula. Tenemos aquí cuatro celdas diferentes y cada círculo irá en una celda separada. Sigamos adelante y seleccionemos Círculo y definamos su ancho y alto. Voy a ponerlos a los dos a 20 para correr. También con el fin de hacerlos redondeados utilizan para el radio con el valor del 50%. Y luego voy a usar algún color temporal. Quiero decir, el color de fondo. Vamos a ponerla en rojo. Entonces, como puede ver, los cuatro círculos se colocan en una celda separada. Se alinean automáticamente porque tenemos cuatro celdas. Y para los círculos, no necesitamos definir un diseño de cuadrícula para su Círculo. Lo único que tenemos que hacer es colocar círculos en el centro de las celdas. Y para eso, podemos usar una línea, auto centro. Se enviará a los elementos verticalmente. Y también necesitamos justificar egocéntricos, que enviarán al elemento horizontalmente ¿Está bien? Ahora tenemos que Personalizar cada Círculo por separado. Sigamos adelante y comencemos con el círculo uno. Voy a definir los antecedentes. Usemos URL y especifiquemos la parte de la imagen. Necesitamos imágenes de carpeta que Landing. Y después tenemos que seleccionar Circle one, IMG dot JPG. A continuación, voy a especificar la posición, hacerla centro. Y también necesitamos establecer Background repeat en no-repeat. Y por último, definamos el tamaño del fondo, hagamos que cubra. Llegó. Entonces tenemos aquí una bonita imagen de fondo. A continuación voy a crear una frontera. Vamos a establecer su ancho 2.5 RAM que el estilo del borde va a ser punteado. Y como el color, vamos a usar un B14 ser 18. Además de eso, quiero que el borde esté fuera de la imagen. Y para eso necesitamos usar Clip de fondo con el cuadro de contenido de valor. Muy bien, veamos ahí. Bueno, el primer círculo, ahora mismo, voy a duplicar este código tres veces. Después cambia los nombres de las clases. Además, voy a cambiar los nombres de las imágenes. Y además de eso, voy a cambiar las fronteras. Para el segundo orden, necesitamos el mismo ancho que para el estilo va a ser discontinuo Y también cambiar el color. Necesitamos F, F, B, D, 07. Entonces para el tercer círculo, voy a aumentar el ancho. Vamos a convertirlo en una RAM. Después cambia el estilo. Va a ser el doble. Y también cambia el color, hazlo nueve. Doe. Como parte del último Círculo, el ancho va a ser 0.7. Debería ser doble. Y como el color, vamos a usar el blanco. Bien, así que los cuatro círculos son Personalizar. Lo único que voy a hacer es disminuir su opacidad Vamos a asignar a Círculo. Estoy en el nombre de clase común opacidad 0.5. ¿Está bien? Entonces, finalmente, con los círculos ya terminamos. A continuación, voy a encargarme de los textos Elementos, los cuales deben colocarse en los lados izquierdo y derecho. Sigamos adelante e insertemos nuevos comentarios. Para texto destacado. Seleccionemos ambos encabezados con un texto destacado de nombre de clase común Voy a aumentar el tamaño de la fuente, hacer que se ejecute. También. Cambia el color, hazlos blancos y transforma el texto en mayúsculas Bien, después de eso, voy a alinear ambos encabezamientos en los lados izquierdo y derecho Para eso, voy a usar margen. Seleccionemos el primer encabezado con su clase individual Feature text1, y utilicemos margin con los siguientes valores Voy a ponerla a cero en la parte superior, luego R0, el lado derecho Entonces tendremos cero en la parte inferior y daremos la vuelta por el lado izquierdo. Duplicemos este código. Cambiar el nombre de la clase. Necesitamos Feature text2, y también cambiar los valores Voy a dejar el valor del lado superior como cero. Entonces tendremos marrón tan que cero y luego auto. Bien, entonces consideremos que los elementos están alineados de la manera correcta A continuación, voy a colocar las letras verticalmente en una columna. Para eso, necesitamos establecer el ancho a cero. Y también necesitamos usar una de estas propiedades CSS llamada word wrap con una palabra de salto de valor. Por lo que los electrodos se colocan verticalmente. A continuación voy a aumentar el espacio entre las letras. Para eso podemos aumentar la altura de la línea. Hagámoslo 3.5. Bien, así que casi terminamos con el Desembarco. Lo único que quiero hacer es cambiar la posición de esos elementos de rumbo. Si echamos un vistazo al proyecto terminado y nos desplazamos hacia abajo, verás que los encabezados se vuelven pegajosos por un tiempo. Así que vamos a definir su posición y hacerla pegajosa. Entonces, si queremos pegar los elementos en el borde superior de la ventanilla, entonces tenemos que establecer la posición superior a cero Bien, por último, hemos personalizado una Landing page. Ahora es el momento de hacerlo dinámico. O sea, tenemos que agregarle algunas animaciones y efectos agradables. Entonces pasemos a la siguiente conferencia. 7. Círculos de animación: Bien, entonces tenemos Personalizar una Landing page en una conferencia anterior, y ahora tenemos que hacerla dinámica Tenemos que animar esos círculos en el movimiento del ratón. Antes de empezar a trabajar en ello, quiero escoger el único tema minúsculo. Tenemos dos palabras en los lados izquierdo y derecho. El segundo habría sido un diseño, no un diseñador. Así que vamos a cambiarlo en el archivo HTML. ¿Correcto? Así que vamos a hacer que la animación funcione usando JavaScript. Pasemos al archivo script.js. Lo primero que voy a hacer es seleccionar círculos y la imagen. Antes de eso quiero hacerte un cambio rápido. En realidad, este archivo va a ser grande, así que sería mejor si colocamos esas dos variables dentro de los comentarios. Bien, después de eso, voy a crear nuevos comentarios para los círculos animados de abajo. Entonces, como decíamos, voy a seleccionar los círculos y la imagen. Vamos a crear una nueva variable. Voy a llamarlo Círculos. Tenemos múltiples círculos, por lo tanto, voy a usar query selector all method. Especificemos aquí el nombre de la clase Circle. A continuación, voy a seleccionar imagen. Vamos a crear nueva variable y llamarla IMG principal y seleccionar Imagen usando el método selector de consultas Tenemos que especificar aquí el nombre de clase de los elementos padre, círculo principal, y luego el nombre objetivo, IMG Bien, después de eso, voy a crear una función, llamémosla animar Círculos. Esta función tomará tres parámetros. El primero va a ser un objeto de evento y además tendrá parámetros X e Y. Nos ayudarán a definir las direcciones de los movimientos del ratón. Entonces nuevamente, tenemos que mover círculos, quiere que el ratón se mueva, y tenemos que moverlos en sentido contrario. Lo que significa que si el ratón va hacia la izquierda entonces los círculos deben moverse hacia la derecha. Y lo mismo necesitamos verticalmente. Si el ratón va hacia arriba, entonces el círculo debería ir hacia abajo. Bien, así que antes que nada, quiero mencionar aquí lo principal de la disfunción, que es que tenemos que definir la posición del ratón usando el cliente X y el cliente ¿Por qué propiedades en la posición del ratón? Me refiero a la posición de ocho cuando deja de moverse. Entonces tenemos que comparar estos valores con la nueva posición del Ratón y obtendremos la dirección del movimiento del ratón. Entonces sigamos adelante y comencemos a escribir el código. Será más comprensible y la práctica, necesitamos crear dos variables para el cliente X y el cliente. ¿Por qué propiedades? Voy a llamar a la primera variable X. Debería ser igual a cero. Después duplica esta línea de código y cambia X a Y. Después de eso, tenemos que almacenar los valores de declive X y cliente. Por qué propiedades en esas variables. Entonces necesitamos aquí, me piden que sea igual a E punto cliente X y lo mismo necesitamos para dirección y Entonces nuevamente, esas variables almacenarán la última posición del mouse. Ahora bien, si queremos obtener la dirección del movimiento del ratón, simplemente podemos comparar los parámetros X e Y con las variables amex y M Y. Para eso, necesitamos usar una sentencia if en la que tenemos que definir si X es menor que M X. Si esta condición es verdadera, entonces voy a ejecutar a la consola algunos textos como movidos a la izquierda. Entonces voy a crear otra declaración if en que tenemos que definir la dirección y Entonces necesitamos Y es menor que MI. Y luego voy a correr a la consola, moverme hacia arriba. ¿Correcto? Ahora podemos llamar a esta función cuando el ratón mueva eventos inspirados, ya todos hemos utilizado este evento anteriormente. Entonces tenemos que llamar a esta función. Aquí. Tenemos que pasar los argumentos E, X e Y. ¿Bien? Entonces, inspeccionemos la página y cambiemos a la pestaña de la consola. Si nos movemos hacia arriba, entonces lo obtendremos en la consola. Y si me muevo hacia el lado izquierdo, entonces obtendremos el resultado adecuado en la consola. Ahora sabemos cómo obtener las direcciones de los movimientos de la boca y pudimos definir el movimiento de los círculos. De la misma manera podemos definir la dirección del movimiento del ratón hacia el lado derecho y hacia abajo. ¿Bien? Entonces, cuando el ratón se mueve hacia el lado izquierdo entonces los círculos deben moverse hacia el lado derecho. Y para ello, tenemos que incrementar los valores de sus posiciones izquierdas. En primer lugar, tenemos que mirar a través de los Círculos Los seleccionamos usando el selector de consultas método all el cual devuelve y objeto similar a matriz llamado node list Entonces tenemos que mirar a través de la lista de nodos y cambiar la posición de retraso para cada Círculo. Para mirar a través de la lista de nodos, voy a usar uno de los métodos de ayuda de matriz llamados for-each Tenemos que adjuntarlo a los círculos. El método forEach toma un argumento. Va a ser la función de devolución de llamada, que a su vez toma un parámetro y es el elemento actual durante el bucle Entonces como decíamos, tenemos que cambiar la posición izquierda del círculo. Por lo tanto, necesitamos aquí la propiedad llamada Style, seguida de left. Y voy a cambiar la posición por cien pixeles. Ahora bien, si muevo el ratón hacia el lado izquierdo , entonces los círculos no se moverán porque ahora mismo tienen una posición estática predeterminada. Entonces tenemos que cambiarlo y hacer relativo. Entonces ahora si me muevo hacia el lado izquierdo entonces los círculos se moverán hacia la derecha. En este momento se movieron sin ningún efecto. Lo arreglaremos usando las propiedades de transmisión sol. Al principio, vamos a encargarnos de los movimientos. Además de esos círculos, también tenemos que mover la imagen. Entonces necesitamos al estilo IMG Principal, no a la izquierda. Y el valor cien píxeles. Al igual que los círculos, necesitamos cambiar la posición de la imagen y tenemos que hacerla relativa. Entonces si nos movemos hacia la izquierda entonces los círculos y la imagen se moverá hacia el lado derecho, derecho. Sigamos adelante y nos ocupemos del movimiento hacia arriba. Simplemente podemos agarrar este bloque de código y pegarlo dentro de la segunda sentencia if. Lo único que tuvimos que hacer es cambiar la posición izquierda a arriba. Entonces, si muevo el ratón hacia arriba, entonces los Elementos bajarán. ¿Correcto? Entonces dos direcciones están listas. Ahora tenemos que encargarnos del resto de las direcciones. O sea, cuando movemos el ratón hacia la derecha y hacia abajo, para eso tenemos que usar else if declaraciones donde tenemos que considerar condiciones opuestas. Entonces necesitamos aquí X es mayor que M X. Si esta condición es cierta, entonces tenemos que mover los elementos hacia el lado izquierdo. Por lo tanto, tenemos que disminuir los valores de la posición izquierda. Vamos a copiar este código. Pégalo aquí y agrega signos menos. Necesitamos lo mismo para la segunda declaración if. Vamos a crear declaraciones else-if como la condición que necesitamos, Y es mayor que Entonces toma el código de aquí y otra vez, agrega los signos menos. Entonces, como puedes ver, las cuatro direcciones funcionan bien. Ahora tenemos que hacer este hecho más suave. Para eso tenemos que usar la transición. Necesitamos, te quedas con una duración 2 s. y top 2 s. En realidad, también necesitamos la misma transición para la imagen. Así que vamos a agarrar esta línea de código y pegarla para la imagen. Bien, así que ahora tenemos un bonito efecto suave. En realidad, tenemos aquí un pequeño tema. Si vuelvo a cargar la página y empiezo a mover el mouse entonces los círculos saltarán hacia arriba Y para arreglar eso, necesitamos definir la cima y dejar posesiones por defecto Pongamos a ambos a cero. También necesitamos lo mismo para la imagen. Bien, así que finalmente, ya terminamos. Antes de terminar esta conferencia, quiero hacer una cosa más. Usamos aquí, 100 píxeles un par de veces. Y tal vez necesites cambiar este valor en el futuro. Y para eso deberías cambiarlo en todas partes. Entonces creo que sería mejor si almacenamos este valor en la variable y luego usamos esta variable abajo, vamos a crear la variable Z y hacerla igual a cien. Entonces voy a cambiar como los pixeles con la variable Z. Bien, eso es todo Hemos terminado de trabajar en los Círculos animados. Sigamos adelante. 8. Crear y personalizar el botón principal: Bien, entonces en la última conferencia creamos esos círculos animados Y ahora voy a trabajar en este botón de aquí. Tiene algunos buenos efectos de hover. Una vez que pasemos el cursor sobre él, entonces este círculo amarillo se expandirá a todo el botón No importa de qué lado se ciernen. El botón de. Este elemento amarillo aparecerá de todos los lados. Y también el botón girará ligeramente. este momento vemos aquí los proyectos, y si hacemos clic en él, navegará a la sección de proyectos. Pero en esta conferencia, sólo voy a crearla y personalizarla. En cuanto a la navegación se encargará de ello más adelante. Antes de que empecemos a trabajar en el botón, voy a agregar un par de cosas más a los préstamos. Quiero alejar un poco esos pequeños círculos del círculo principal porque tendrán más espacio para moverse. En cuanto al círculo principal, quiero expandirlo un poco al flotar Bien, antes que nada, vamos a mover los círculos. Voy a hacer eso usando margen. Entonces, para el primer y tercer círculo, necesitamos margen izquierdo con valor menos diez RAM En cuanto a los círculos segundo y cuarto, vamos a usar margin-right con valor menos diez Bien, eso es todo sobre este pequeño círculo. Entonces, sigamos adelante y cuidemos el círculo principal. Voy a aumentar su anchura y altura al flotar. Así que vamos a seleccionar círculo principal con hover y luego establecer ancho y alto, ambos a 75 correr Además de eso, voy a usar la transición. Para un efecto suave. Necesitamos con una duración puntos en segundo y luego altura con la misma duración. Entonces, si vuelo el cursor sobre el círculo principal, entonces no pasará nada La razón es que aquí tenemos el círculo y los puntos. Están frente a la boca. Y bloquean los eventos puntero. Para arreglar eso, tenemos que asignar a ambos elementos. Eventos puntero, ninguno. Bien, entonces ahora todo estuvo bien y podemos empezar a trabajar en el botón En primer lugar, vamos a crear el marcado HTML. Vamos a insertar ya sabías comentarios. Para botón principal. Yo lo llamo principal porque tendremos un par de botones de búsqueda en la página web. El botón se creará utilizando un enlace de elementos. Vamos a asignarle clase main btn. Por lo que el botón consistirá en un par de partes diferentes. Tendremos una flecha que se creará usando tres líneas. Y también tendremos elemento span con los proyectos de texto. Vamos a abrir la etiqueta div, que envolverá el contenido del botón que se le asigna clase main btn content Entonces voy a crear líneas usando etiquetas div. Con la línea principal BGN de clase. Necesitamos tres de ellos. Y luego finalmente, necesitamos span element con los proyectos de contenido. Vamos a insertar nuevos comentarios en el archivo CSS. Para botón principal. A continuación, seleccione elementos de enlace y establezca su posición en absoluto. Por lo que ahora se coloca en el centro de la página. Si selecciono todos los elementos, entonces lo verás en el centro. Bien, vamos a agregarle algunos estilos más. Voy a definir ancho y alto. Hagamos a ambos 13 RAM. También cambia el color de fondo. Voy a usar tu llamada o 90 E, 0 E. Y también hacer el redondeo del botón usando border-radius 50% Bien, Siguiente, voy a cambiar su posición. Quiero colocarlo en la parte inferior de esta sección. Así que pongamos la rampa inferior 23. Entonces lo último que voy a hacer ahora mismo respecto a este elemento es crear una frontera. Lo necesitamos con los valores apuntan a RAM de lo que el estilo va a ser punteado. En cuanto al color, va a ser blanco. Bien, sigamos adelante y personalicemos el contenido. Selecciónelo. Y antes que nada, definamos su anchura y altura. Voy a ponerles a ambos el 200 por ciento. Y también voy a crear frontera. Vamos a asignarle un punto a ram punteado, y también usar el color E7 P E 08 Así que ahora mismo el contenido tiene la forma de esta consulta Voy a hacerlo redondeado. Entonces usemos border-radius con un valor del 50 por ciento. ¿Bien? A continuación, voy a crear un pequeño espacio entre esas fronteras. Para eso, voy a asignar al botón principal un poco de relleno. Hagámoslo 0.1 rampa. Por defecto, establecemos box-sizing border-box para cada elemento Y nos permite mantener sin cambios el ancho y la altura de los elementos. Y empuja el contenido del elemento. Bien, veamos el contenido ahora mismo. A continuación, voy a crear la flecha. Para eso tenemos tres elementos div vacíos. En primer lugar, voy a esconder este panel destinado por un tiempo Y luego selecciona las líneas. En primer lugar, voy a poner posición en absoluto. Entonces voy a definir la posición superior. Hagámoslo para RAM. Además, necesitamos definir la anchura y la altura. El ancho va a ser de tres RAM. En cuanto a la altura, voy a hacerla 0.5 gram y además crear un borde con el valor es 0.1 RAM sólida. Y el color blanco. Aquí tenemos las líneas. De un vistazo, parece que tenemos aquí solo una línea, pero las tres líneas se colocan una encima de la otra. Necesitamos posicionar cada uno de ellos por separado. Pero antes de eso, los voy a centrar dentro del contenido. Para eso, voy a usar flexbox. Podemos asignar al centro de clases de contenido y a los elementos HTML. Bien, entonces ahora las líneas se colocan en el centro. A continuación, tenemos que posicionar cada línea por separado para crear una flecha. Empecemos por la primera línea. Voy a seleccionar la línea btn principal con el selector nésimo hijo Y tenemos que especificar aquí el número uno. Entonces voy a rotar la línea según el eje z en -45 grados Entonces se gira la primera línea. Hagamos lo mismo para la segunda línea. En realidad, voy a duplicar este código, luego cambiar el número que necesitamos, y también deshacerme del signo menos. Entonces, como pueden ver, ambas líneas se rotan, pero eso no es lo que necesitamos. Ahora mismo. Se rotan desde el centro. Es decir, el origen de la transformación es el centro. Tenemos que cambiarlo. En el caso de la primera línea, necesitamos que el origen de la transformación quede al centro. En cuanto a la segunda línea, necesitamos centro derecho. Entonces ahora tenemos un mejor resultado, pero aún así necesitamos hacer algunos cambios. Quiero mover ambas líneas horizontalmente. Es decir, tenemos que mover la primera línea hacia el lado izquierdo. En cuanto al segundo, debemos moverlo hacia el lado derecho. Así que voy a hacer eso usando la función translate x. Para la primera línea, necesitamos aquí -0.65 RAM. Como probablemente la segunda línea, necesitamos el mismo valor, pero sin el signo menos. Bien, así que finalmente, las dos primeras líneas se colocan correctamente Lo único que quiero hacer es deshacerme de partes de las fronteras de ambas líneas. Para el primero, necesitamos para el paseo, el valor ninguno. En cuanto al segundo, necesitamos frontera izquierda. Ninguno. Bien, sigamos adelante y nos ocupemos de la tercera línea. Vamos a seleccionarlo usando nuevamente el enésimo selector secundario. Entonces, en el caso de la tercera línea, tenemos que rotar ocho según el eje z 90 grados. Y también necesitamos moverlo usando función translate x por 0.5 rampa. En cuanto a la frontera a la izquierda, ninguna. Bien, así que finalmente, tenemos aquí una flecha. Sigamos adelante y personalicemos este elemento span, que ahora mismo está oculto al HTML. Deshagámonos de este comentario desde aquí y luego seleccionemos elementos span en el archivo CSS. En primer lugar, voy a definir esta posición. Hagámoslo absoluto. Y luego moverlo un poco hacia abajo usando posición inferior con un valor de tres rampa y también cambiar el color, hacerlo blanco. Entonces aquí tenemos este elemento span. Vamos a agregarle un par de estilos más. Tenemos que cambiar el tamaño de la fuente. Hagámoslo 1.1 RAM. Además, voy a aumentar el peso de la fuente. Hagámoslo 600, y luego transformemos el texto en mayúsculas Bien, así que eso es todo sobre este elemento span. Lo único que voy a hacer en este video es rotar el propio botón. Así que vamos a asignarle transformar. Girar 40 grados. Bien, vamos a ver. El botón se crea y se personaliza. A continuación tenemos que crear un efecto hover. Entonces pasemos a la siguiente conferencia. 9. Agrega efecto de ondulación al botón principal: Así que en la conferencia anterior, hemos creado y Personaliza el botón principal en la página de aterrizaje. Y ahora tenemos que crear un efecto hover. Volvamos a echar un vistazo al proyecto terminado. Entonces, una vez que pasemos el cursor sobre el Botón el círculo amarillo cubrirá el contenido Aparece desde el lado exacto donde entramos la boca y además el contenido está rotando ligeramente. Crearemos este efecto usando animaciones JavaScript y CSS. Bien, vamos a la respuesta del archivo script.js para escribir el código, insertar nuevos comentarios, Botón Principal y de Botón Principal Entonces lo primero que tenemos que hacer es conseguir las coordenadas del cursor dentro del botón. Es decir, necesitamos obtener la parte superior y dejar que las posiciones del cursor midan desde los bordes superior e izquierdo del botón. Antes de hacer eso, necesitamos seleccionar el botón en sí. Así que vamos a crear la variable principal BTN y seleccionar la parte inferior usando el método selector de consultas Tenemos que especificar aquí el nombre de la clase Principal ser diez. Después de eso, tenemos que adjuntar a él y oyente de eventos con un mouse enter events Así que necesitamos agregar el método de escucha de eventos que el evento llamado mouse enter y también la función de devolución de llamada. Así que el método enter mouse se dispara solo una vez cuando pasamos el cursor sobre el elemento Entonces como decíamos, tenemos que conseguir las posiciones superiores izquierdas del cursor dentro del Botón Para obtener estos puestos, necesitamos usar el cliente X y cliente ¿por qué propiedades? Como recuerden, nos dan las posiciones superior e izquierda del cursor medidas desde los bordes superior e izquierdo de la ventana gráfica Entonces, para que las posiciones del curso estén dentro del botón, necesitamos encontrar la diferencia entre las propiedades X e Y del cliente y las posiciones izquierda y superior del curso. Entonces para que sea más comprensible, escribamos el código. Al principio. Hagamos una pausa aquí y objeto de evento. A continuación, te voy a mostrar cómo obtener la información sobre los elementos. Para ello, podemos usar uno de los métodos llamados get bounding client rect Corremos a la consola y veamos qué nos da este método. Necesitamos E dot, target, dots, get delimitador rect cliente Entonces, si pongo el cursor sobre el botón, entonces obtendremos un objeto llamado DOM react Si lo dejé caer, aquí encontrarás un par de propiedades diferentes. Tenemos las posiciones, quiero decir abajo, izquierda a derecha y arriba. También tenemos aquí la anchura y altura de los elementos. Además de eso, puedes ver aquí X e Y propiedades. Y en realidad son las mismas que las propiedades izquierda y superior. Entonces podemos usar esos valores para calcular las posiciones superiores izquierdas del cursor dentro del botón Voy a crear nueva variable. Vamos a llamarlo a la izquierda. Entonces necesitamos E punto cliente X menos E punto, puntos objetivo. Obtener el método rect del cliente delimitador. Y tenemos que usar aquí la posición izquierda. Entonces veamos esta variable en la consola. Cuando pasamos el cursor sobre el buxom, entonces obtendremos la posición izquierda del Pero ahora dentro del Botón. Es decir, se mide desde el borde izquierdo del botón. ¿Bien? De la misma manera, necesitamos definir la posición superior. Simplemente podemos duplicar este código, luego cambiar el nombre de la variable que necesitamos top. También necesitamos a tu cliente ¿por qué? Y luego otra vez arriba. Bien, entonces ambas posiciones están definidas y ahora necesitamos crear nuevos elementos sobre esas posiciones Lo haremos usando uno de los métodos dom llamados create Elements. Voy a declarar una nueva variable fuera de los eventos. Vamos a llamarlo ondulación. Entonces abajo, necesitamos crear nuevos elementos Div. Usando el método create element. Necesitamos especificar el nombre de la etiqueta dentro de los paréntesis Después de eso, necesitamos definir las posiciones superiores izquierdas del Ripple Y usaremos los valores que aquí definimos. Entonces necesitamos aquí Ripple dot, style, dot left. Después abre los backticks e inserta tu variable a la izquierda, que acabamos de definir Entonces voy a duplicar esta línea de código y cambiar a la izquierda a arriba. Entonces se crea el elemento, pero necesitamos agregarlo al botón Para ello, tenemos que usar uno de los métodos llamados prepare, y agregará los elementos como el primer hijo del elemento padre. Tenemos que pasar aquí el valor ripple Así que para demostrar que el elemento está creando al pasar el cursor, vamos a cambiar a la pestaña Elementos Y luego pasa el cursor sobre el botón. Entonces como puedes ver, el elemento deep se crea dentro del botón. Y también tenemos aquí las posiciones izquierda y superior. Bien, siguiente en Personalizar este elemento en el archivo CSS Vamos a crear una nueva clase. Voy a llamarlo ondulación. Para que las posiciones superiores de la izquierda funcionen, necesitamos definir la posición de la Ondulación Hagámoslo absoluto. Entonces voy a definir ancho y alto. Vamos a establecer ambos 200 por ciento, y también cambiar el color de fondo. Usemos tu color, u0, v0. Oh ocho. Bien, eso es todo sobre estos mosaicos del Ripple en este momento Para aplicarlos a los elementos, tenemos que agregar esta clase a la lista de clases de elementos. Entonces necesitamos la lista de clases de puntos de Ripple. Entonces necesitamos usar el método llamado add. Y tenemos que pasar por aquí. Ondulación. Bien, entonces si pasa el cursor sobre el botón, entonces aparecerán los nuevos elementos Si paso el cursor sobre el botón varias veces, entonces se crearán los múltiples elementos Pero en realidad, lo arreglaremos pronto. En primer lugar, hagamos que estos Elementos sean redondeados usando radio fronterizo 50 por ciento Y también tenemos que moverlo hacia la izquierda y hacia arriba en un -50 por ciento Para eso, usemos Transformar que la función translate con los valores -60% y nuevamente -50% Entonces ahora tenemos un mejor resultado y es momento de crear una animación. Entonces, por defecto, el ancho y la altura de este elemento serán cero. Y una vez que pasamos el cursor sobre el botón, entonces el tamaño del informe debería aumentar con la animación Entonces necesitamos crear fotogramas clave CSS. Voy a llamarlo Ripple Anime. Entonces tendremos dos pasos. Al cero por ciento, la anchura y la altura de los elementos van a ser cero. Eso es lo que 100%. Voy a hacerlos al 100%. Bien, entonces los fotogramas clave están listos. Ahora ¿cómo aplicar estos Estilos? Entonces los elementos que utilizan una propiedad de animación, necesitamos especificar aquí el nombre de los fotogramas clave, Ripple Anime, y también la duración, que va a ser 0.5 s. así que ahora si pongo el cursor sobre el botón, entonces el elemento aparecerá Pero como pueden ver, tenemos aquí un par de temas. Una vez que aparece el elemento y sus tamaños aumentados, entonces se esconde. Por lo que necesitamos mantener el estatus que tenemos al 100%. Para eso necesitamos usar un valor llamado forward. Entonces ahora este problema se soluciona y el elemento ya no tiene alturas. El siguiente tema es que el tamaño del elemento no es suficiente para cubrir el botón, así que tenemos que aumentarlo. Hagamos dentro de la altura, ambos 200 por ciento. Entonces ahora este tamaño es dos veces más grande, pero aún así no es suficiente porque si entro al mouse y lo detengo en el borde del Botón, Ripple no lo cubrirá. Así que vamos a aumentar dentro de ocultar ligeramente. Vamos a hacerlos 210%. Bien, ahora el problema está arreglado. Lo siguiente que voy a encargarme es esconder las partes exteriores del Ripple. Para ello, podemos usar simplemente desbordamiento oculto. Bien, entonces ahora tenemos un resultado mucho mejor. Lo siguiente que quiero hacer es deshacerme del Ripple, quiere que el ratón deje el botón. Tenemos que usar uno de los eventos llamados Hoja de ratón. Así que vamos a adjuntar a Main BTM event listener con mouse live events y con una función callback Para deshacernos de los elementos, tenemos que utilizar uno de los métodos llamados remove child. Y tenemos que especificar aquí el nombre multivariable. Bien, así que ahora todo funciona a la perfección. Lo último que voy a hacer es rotar el contenido del botón al flotar Y también necesitamos cambiar el color de la frontera. Así que sigamos adelante y seleccionemos BTN principal con hover, seguido del contenido del Botón Entonces voy a rotar los elementos 60 grados. Necesitamos Transformar, Rotar de seis a ocho grados. Y también voy a cambiar el color del borde que se le asigna, punto a correr punteado. Y como el color, voy a usar 90 II. Además de eso, necesitamos una transición para un efecto suave. Y en realidad tenemos que usarlo dos veces. Quiero decir, necesitamos usarlo por defecto para los elementos y también en hover Entonces, por defecto, necesitamos transición Transformar 0.2 s que frontera con la misma duración. En cuanto a la transición al hover, necesitamos los mismos valores, pero Transformar tendrá poco retraso, 0.5 s. Bien, así que finalmente, ya terminamos El Botón funciona perfectamente. Tiene algunos efectos y animaciones agradables. Creo que lo que es interesante y diferente, y espero que te haya gustado. Ahora tenemos que seguir adelante y encargarnos de la siguiente sección. 10. Crear y diseñar sección sobre mí: Bien, hemos terminado de trabajar en la primera sección de la conferencia anterior, y ahora es el momento de encargarnos de la siguiente sección, que va a ser sobre mí Esta sección consta de un encabezado y algunos textos que tienen efectos de animación agradables y geniales. Por defecto, el impuesto no es del todo visible porque se mezcla con un fondo oscuro. Y una vez que pasemos el cursor sobre él, cambiará su color Y también las conferencias comenzarán a animarse. Además de eso, tendremos aquí el botón, que es similar al botón que hemos creado en la última conferencia. Entonces eso es todo sobre la segunda sección. Sigamos adelante y comencemos a crear un marcado HTML. Insertemos nuevos comentarios para la sección dos. Después abre la etiqueta de sección con la clase sección dos. Por lo que en general tendremos tres elementos diferentes. El primero va a ser este encabezamiento de sección. Entonces voy a insertar sus comentarios, encabezamiento de la sección dos. Después final de la sección dos rumbo. Entonces abramos la etiqueta de encabezado H1 con la clase, sección dos encabezando con el contenido sobre mí. Bien, A continuación tendremos un párrafo para el texto. Vamos a insertar nuevos comentarios sobre mí textos y de, sobre mi texto. Y luego abre la etiqueta P con la clase sobre mi texto. En realidad, voy a dejar este elemento m tipicos. Insertaremos aquí el texto usando JavaScript. Bien, veamos sobre el marcado HTML de la segunda sección, agregaremos aquí el botón principal que enumeré un poco más tarde Entonces en este momento el encabezado no es visible porque está colocado detrás del fondo. Lo arreglaremos pronto. Sigamos adelante y comencemos a personalizar esta sección. Voy a insertar nuevos comentarios en el archivo CSS, sección dos y sección dos. A continuación, seleccione un elemento de sección y establezca su posición en relativa. Entonces ahora si selecciono todos los elementos, entonces veremos el encabezado sobre mí. Vamos a crear algo de espacio dentro de esta sección. Voy a hacer eso usando relleno. Vamos a configurarlo en diez RAM en la parte superior, que diez RAM en el lado derecho, 15 RAM en la parte inferior y diez rem en el lado izquierdo. Bien. Entonces ahora mismo voy a encargarme de los textos. Creo que será mejor si los comentarios vamos a salir por un tiempo Entonces como dije, vamos a crear textos usando JavaScript. Pero primero vamos a seleccionar el párrafo que envolverá el texto. Voy a insertar tus nuevos comentarios sobre mi texto de, sobre mi texto. Después crea una nueva variable, voy a llamarla About Me text y seleccionar párrafo usando el método selector de consultas. Especificemos aquí el nombre de la clase sobre mutex. Bien, después de eso, voy a crear una nueva variable que almacenará el texto del párrafo Voy a llamar a esta variable sobre mi contenido de texto. El texto en sí va a ser el siguiente. Soy diseñadora y creo sitios web ganadores de premios. La mejor experiencia de usuario. Y no hablé mucho, solo contáctame. Así que vamos a transformar este valor de cadena en una matriz. Cada carácter, incluidos los espacios en blanco, serán los elementos separados de una matriz Y luego crearemos elementos span para cada ítem. Y almacenaremos estos personajes en elementos span. Para transformar este valor de cadena en una matriz, voy a usar array dot from method. Tenemos que pasar aquí el nombre de la variable. Sigamos adelante y veamos en la consola cómo se ve. Voy a inspeccionar la página y cambiar a la pestaña de la consola. Entonces como puedes ver aquí, tenemos una matriz en la que puedes encontrar todos los caracteres y los espacios en blanco como los elementos separados Así que ahora necesitamos almacenar cada carácter en los elementos span. Para ello, tenemos que recorrer la matriz, crear elementos span y asignarles cada carácter. Entonces, para recorrer la matriz, voy a usar uno de los métodos de ayuda de matriz llamados para cada uno, que tomará un Parámetro, va a ser la función de devolución de llamada, que a su vez tomará un parámetro Y va a ser el elemento actual de la matriz durante el bucle. Entonces ahora tenemos que crear un span elementos. Y para eso voy a usar crear nuestro método. Vamos a crear una nueva variable y llamarla span. Y luego usa el método create element. Tenemos que especificar el nombre de la etiqueta dentro de los paréntesis Entonces se crean los elementos span y ahora tenemos que asignarles elementos de matriz como el contenido del texto. Así que tenemos que abarcar el contenido del texto de punto y debe ser igual al carácter. Por último, tenemos que añadir estos elementos al párrafo Necesitamos de mi, texto punto anexar niño Tenemos que especificar aquí las variables pan. Bien, así como puedes ver, el párrafo se muestra en la página Ahora tenemos que darle estilo. Primero. Seleccionemos un párrafo. Insertar nuevos comentarios sobre mutex, y apagado sobre nuevo texto A continuación, seleccione párrafo. Voy a disminuir su ancho. Hagámoslo ocho por ciento. Después coloca el párrafo en el centro usando margen o fila. Después de eso, voy a seleccionar este elemento span. Entonces, antes que nada, cambiemos la familia de fuentes. En este caso, voy a usar teléfonos llamados Poppins san-serif que aumentar el tamaño de la fuente, que sea Poppins san-serif que aumentar el tamaño de la fuente, que sea 15 RAM. Entonces voy a hacer que la fuente más audaz usando font-weight bold, y luego cambiar el color Que sea una k Bien, continuación, voy a agregarle un par de estilos más. Aumentemos ligeramente el espaciado, hagámoslo 0.5. Rem. También disminuye la altura de línea, hazla 0.9 y usa sombra de texto con valores 001 RAM Y como el color, voy a usar 90 E 0 E. ¿Bien? Entonces el texto se ve bien. A continuación, voy a establecer su posición en relativa porque necesitamos cambiar su posición durante la animación. Lo último que quiero hacer es mezclar el párrafo con un fondo. Para eso, voy a usar la propiedad CSS llamada mix blend mode. Y voy a configurarlo para esquivar de color. Bien, entonces el texto está estilizado. Y ahora podemos crear la animación. Durante la animación, cambiaremos el color de las letras y también cambiaremos ligeramente la posición. Vamos a crear fotogramas clave CSS. Voy a llamarlo sobre mí textos, anime. Entonces, al cero por ciento, voy a establecer el color a AAA, que es el predeterminado. Y también voy a definir la posición superior. Vamos a ponerla a cero. Entonces del 10% al 90%, voy a cambiar el color y la posición superior. Vamos a establecer el color en blanco. En cuanto a la posición superior, va a ser para carnero. En cuanto al cien por ciento, necesitamos los mismos estilos que usamos al 0%. Bien, así que los fotogramas clave están listos y tenemos que aplicar los estilos al texto una vez que coloquemos el cursor sobre los elementos de este panel, lo voy a hacer usando JavaScript Necesitamos adjuntar un oyente de eventos a este elemento span con mouse enter event Así que tenemos que añadir el método de escucha de eventos. Y tenemos que pasar aquí el evento mouse enter y también la función callback Siguiente Voy a pasar aquí un objeto de evento. Y luego tenemos que definir la animación para el target del objeto de evento. Entonces tenemos que apuntar no a la animación de estilo. Entonces tenemos que especificar aquí el nombre de los fotogramas clave, que es sobre mi texto Y en el siguiente valor va a ser duración 10 s. y también, necesitamos ejecutar la animación infinitamente Entonces, si coloco el cursor sobre el texto, entonces obtendremos un bonito efecto de animación Bien, así que en realidad con los textos Acerca de mí, ya terminamos. Y ahora tenemos que encargarnos de este rubro de sección. Y también debemos agregar a esta sección botón de permanecer. Al principio, vamos a personalizar el encabezado. este momento está oculto, así que vamos a deshacernos del comentario Luego inserte nuevos comentarios en el archivo CSS, sección dos encabezamiento. Y del rubro de la sección dos. A continuación, seleccione los elementos de encabezado. Voy a establecer su tamaño de fuente para que se ejecute. Después hazlo un poco más ligero usando font-weight 300, también cambia el color, hazlo blanco y transforma el texto en Después de eso, voy a encargarme de su posición. Vamos a establecerlo en absoluto. Voy a centrar los elementos verticalmente. Entonces voy a poner el 250 por ciento superior. En cuanto a la posición izquierda va a estar tan RAM. Y luego para centrar el elemento perfectamente cuando transformas, traduce y con el valor -50% Bien, entonces a continuación voy a colocar el rumbo verticalmente. Para eso necesitamos ser cero. Y también tenemos que usar una de estas propiedades CSS llamadas word break con el valor break off. Y por último, voy a aumentar la altura de la línea. Vamos a ponerla en cuatro. Bien, así que eso es todo sobre el rumbo. Lo último que voy a hacer en esta conferencia es insertar el botón principal en la segunda sección. Voy a agarrarlo de la primera sección y pegarlo aquí. También cambia el contenido que necesitamos aquí. Hablemos. Bien, entonces aquí tenemos un botón, pero tenemos algunos problemas. En realidad, no está centrado. Y también si me cierro sobre él, no vamos a obtener ningún efecto dominó Al principio, cuidemos su posición. Voy a instituir nuevos comentarios. Botón principal de la sección dos. Y de la sección dos botón principal. Con el fin de aplicar los estilos solo a este botón en particular. O sea, si queremos anular los estilos predeterminados con los nuevos, necesitamos seleccionarlo con la combinación de sus elementos padre. Entonces necesitamos la sección dos, seguida del botón principal. Voy a fijar su posición izquierda en el 50 por ciento. Entonces voy a cambiar de posición inferior. Hagámoslo menos cinco RAM. Y luego para centrar el elemento horizontalmente, necesitamos transformar, traducir x -50% Entonces el botón está centrado, y ahora tenemos que encargarnos del efecto dominó. Antes de hacer eso, voy a agarrar los estilos del Batson principal y pegarlos en los estilos comunes Porque a lo largo de este proyecto tendremos un par de tales botones. Por último, tenemos que solucionar el problema del efecto dominó. Va a ser tranquilo sencillo. Tenemos que seleccionar todos los botones. Entonces cambiemos el nombre de la variable. Voy a llamarlo btn principal. Y seleccionarlos usando el método QuerySelector all. Como saben, este método devuelve una lista de nodos. Así que tuvimos que recorrer esta lista. Necesitamos BTS principal con forraje. Pasemos aquí el btn. Entonces tenemos que agarrar todo este código e insertarlo aquí. Y tenemos que cambiar el btn principal y el btn por todas partes. Bien, así que ahora todo va a la perfección. Tenemos aquí un efecto pulsador. Y finalmente con la segunda sección, ya terminamos. Pasemos al siguiente. 11. Crear y personalizar sección de proyectos - Parte 1: Bien, así que una vez que hayamos terminado con la segunda sección en la que hemos creado un texto animado Ahora es el momento de seguir adelante y empezar a trabajar en una de las secciones más interesantes e importantes, que es mi trabajo. Por lo que esta sección incluirá los proyectos del diseñador. En realidad, esos proyectos son las partes de nuestro curso anterior donde construimos diez sitios web responsive bastante grandes desde cero, para que puedas consultarlo. En este caso, utilizamos aquí las imágenes de los proyectos. En este momento solo se muestran seis proyectos. Pero abajo tenemos un botón Mostrar más. Si hago clic en él, entonces el resto de los proyectos aparecerán con un efecto de desvanecimiento. El botón ahora se muestra, mostrar menos. Y si le hago clic, entonces volveremos sólo seis proyectos. Otra vez. Si vuelo el cursor sobre el proyecto, entonces se desplazará muy bien hacia arriba Y además de eso, si hago clic en el proyecto, se expandirá. Y podrás ver todo el proyecto. En realidad, esas son imágenes similares, pero con diferentes tamaños. Esas grandes imágenes están creando sobre la marcha cuando hacemos clic en el proyecto, realidad Delos no es para sobrecargar la página web, ¿verdad? Esta sección tiene muchas características y efectos geniales, así que comencemos a construirla. En primer lugar, como de costumbre, voy a comenzar con el marcado HTML Vamos a crear nuevos comentarios en el archivo HTML para la Sección tres. Después abre la etiqueta de sección con una clase sección tres. Entonces en general tendremos tres partes distintas. El primero va a ser el rumbo. Vamos a insertar nuevos comentarios. Rúbrica de la sección tres. Y de la rúbrica de la Sección tres. Después abre la etiqueta de rumbo H1 con la sección de clase tres rumbo. Y como el contenido, vamos a instituir mi trabajo. Bien, A continuación vamos a tener proyectos. Entonces necesitamos aquí nuevos comentarios. Proyectos y de proyectos. Vamos a abrir la etiqueta div con una clase. Proyectos. Será el envoltorio de los proyectos. En general tendrá diez proyectos diferentes, quiero decir, diez imágenes diferentes. Y cada uno de ellos será envuelto por un elemento div. Así que sigamos adelante y lo abramos con el proyecto de clase. Y luego inserte aquí una imagen. Cuando se especifica aquí la ruta del archivo. Déjame seleccionar Project one JPG. Bien, dupliquemos este proyecto nueve veces y luego cambiemos rápidamente los nombres de las imágenes. Tenemos que usar los números 2-10. Bien, así que eso es todo sobre las imágenes. Además de eso, tendremos el botón principal en esta sección, pero nos encargaremos de ello un poco más tarde. Eso es todo sobre el marcado HTML. este momento, las imágenes no son visibles porque se colocan detrás del fondo. Entonces sigamos adelante y personalicemos esta sección. Voy a insertar nuevos comentarios para la Sección tres. A continuación, seleccione el elemento de sección y defina su ancho y alto. Voy a ponerlos a ambos al 100%. Entonces voy a crear algún espacio dentro de la sección usando padding. Necesitamos 20 RAM en la parte superior que cero en el lado derecho, rabieta en la parte inferior y cero en el lado izquierdo Y también establecer la posición en relativa. Bien, entonces ahora vemos aquí las imágenes y el encabezamiento. En realidad, como en la sección anterior. Voy a encargarme del rumbo un poco más tarde. Entonces sigamos adelante y coméntelo y empecemos a trabajar en los proyectos. Necesitamos nuevos comentarios para los proyectos. A continuación, seleccione un div elementos. Entonces antes que nada, voy a alinear los proyectos. Y para eso, usemos Flexbox. Como saben, hemos definido un centro de clases para el diseño flex. Así que vamos a seguir adelante y asignarlo al elemento div en el archivo HTML. A continuación, voy a colocar los proyectos en diferentes líneas. Para eso tenemos que usar flex wrap con el valor rab. Y además de eso, vamos crear algo de espacio en la parte inferior de los proyectos usando padding bottom con valor 15 ran Bien, veamos sobre los elementos div wrapper. Ahora mismo. Estas imágenes se ven un poco feas. Tienen diferentes tamaños. Así que vamos a seguir adelante y personalizarlos. Voy a seleccionar el proyecto en sí. En primer lugar, definamos el ancho y la altura. Voy a poner ancho a cuatro para rampa. En cuanto a la altura va a ser de 45 corrieron. Una vez que definimos el ancho y la altura de las imágenes, luego se cubrieron entre sí. Para ocultar las partes exteriores de las imágenes, necesitamos usar. Desbordar, oculto, y también crear algo de espacio alrededor de las imágenes usando margin, el valor cinco corrió. Derecha. Después de eso. Voy a cambiar el color de fondo de los proyectos. Quiero decir, quiero crear un espacio negro alrededor de las imágenes. Entonces cambiemos el color de fondo, hazlo negro. A continuación, voy a seleccionar la imagen y disminuir su ancho. Hagámoslo 90%. Y también, para mantener la calidad de la imagen. O sea, para evitar encogerlo, voy a usar la cubierta de alimentación de objetos Entonces tenemos aquí el fondo negro, pero como pueden ver, tenemos que centrar las imágenes. Y para eso usemos flexbox. Necesitamos display flex. Y luego para centrar, voy a usar justify-content Bien, por ahora, tenemos un espacio negro en los lados izquierdo y derecho de las imágenes Y también necesitamos mostrarlo en la parte superior de las imágenes. Para eso, voy a bajar un poco las imágenes. Así que pongamos la posición a absoluta. Entonces necesitamos posición relativa para el elemento padre, que es el proyecto. Y después de eso, voy a cambiar la primera posición. Hagámoslo correr. Bien, entonces ahora tenemos espacio negro en tres lados. A continuación, voy a crear una frontera alrededor de los proyectos. Vamos a asignarle punto para correr punteado. Y como el color, vamos a usar 90 E 0 E. Además, voy a hacer el borde ligeramente redondeado. Usemos border-radius. Devaluamos 0.5 g. Y finalmente, cambiemos el título, el puntero del cursor Bien, así que eso es todo. Los proyectos son personalizados y voy a crear el efecto hover Echemos un vistazo al proyecto terminado. Si pasamos el cursor sobre los proyectos que sobre las imágenes, nos desplazaremos muy bien hacia arriba Además, notarás que las imágenes están sesgadas en las diferentes direcciones Quiero decir, las imágenes pares e impares. Para eso usaremos fotogramas clave CSS. Bien, al principio voy a lograr desplazarme hacia arriba la imagen al flotar Y después de eso, nos encargaremos de esta parte de la cola. Voy a crear un efecto hover usando JavaScript. Entonces una vez que el ratón entra en el proyecto, entonces debemos definir la posición superior de la imagen. Y eso lo necesitamos para todos los proyectos. Entonces, antes que nada, tenemos que seleccionarlos. Insertemos nuevos comentarios en el archivo JavaScript. Necesitamos proyectos. Y proyectos. Entonces crea variable y llámala proyectos. Así que voy a seleccionarlos usando el selector de consultas todo método. Especificemos aquí el proyecto de nombre de clase. Bien, entonces se seleccionan los proyectos. A continuación, tenemos que revisarlos y adjuntar cada oyente de eventos del proyecto con mouse enter event Así que necesitamos para cada método que toma un parámetro es la función de devolución La función de devolución de llamada en sí toma un parámetro, que es el elemento actual durante el bucle Entonces como dije, tenemos que adjuntar el detector de eventos a cada proyecto Así que necesitamos usar add event listener método con mouse enter events Y con la función de devolución de llamada que se ejecutará una vez que pasemos el cursor sobre el proyecto Bien, Ahora como dije, tenemos que cambiar la posición de las imágenes. En primer lugar, tenemos que acceder a ellos. Para eso. Voy a usar una de las propiedades de cúpula llamada primer elemento hijo. Entonces necesitamos puntos de proyecto. Primer elemento hijo. Ahora tenemos el acceso a los elementos de la imagen y luego tenemos que definir la posición superior. Entonces necesitamos el estilo de la parte superior. Así que todas las imágenes tienen diferentes alturas. Y tenemos que averiguar cuánto necesitamos desplazarnos hacia arriba cada imagen Tenemos que restar la altura del proyecto de la altura de la imagen Por eso, tenemos que desplazarnos hacia arriba por la imagen. El valor de las dos posiciones va a ser negativo. Entonces ahora necesitamos definir la altura de la imagen. Por lo tanto, necesitamos aquí el punto del proyecto, primer elemento los puntos secundarios compensan la altura. Y tenemos que restar la altura del proyecto. Por lo tanto, necesitamos proyectos de altura de desplazamiento de puntos. Y luego necesitamos tus piezas. Bien, así que lo último que voy a hacer ahora mismo es hacer que el efecto de desplazamiento Entonces necesitamos hacer la transición con top. Y la duración 4 s. Así que como puedes ver, las imágenes se desplazan hacia arriba más suaves Pero tenemos aquí un par de temas. Una vez que el ratón vivió el proyecto, necesitamos desplazarnos hacia abajo la imagen nuevo a su posición predeterminada. Y también necesitamos el espacio negro en la parte inferior que simplemente podemos agregar aquí, 20. En cuanto a la hoja del ratón, necesitamos adjuntar un nuevo detector de eventos al proyecto Entonces necesitamos el método AddEventListener con eventos en vivo del mouse y también con eventos en vivo del mouse y también Entonces en este caso, tenemos que establecer la posición para correr. Entonces necesitamos proyecto dot, primer elemento child dot style, dot top igual a, para correr. Bien, entonces ahora todo funciona a la perfección y podemos seguir adelante y encargarnos de este efecto de señales Para eso, tenemos que crear un CSS keyframes. Primero, los voy a crear para las imágenes antiguas. Así que durante la animación tenemos que rotar las imágenes un par de veces, horizontal y verticalmente. Llamemos a los fotogramas clave Alt, IMG, anime. Entonces, al cero por ciento, no necesitamos rotar los elementos. Entonces necesitamos transformar, rotar y cero. Entonces en el siguiente paso, al 25%, voy a rotar elementos según eje y menos dos grados Y también necesitamos rotar los elementos de acuerdo al eje X dos grados. A continuación, agregue 30%. Voy a copiar esta línea de código y pegarla aquí. Necesitamos que el valor de rotar y sea de dos grados. En cuanto a la función rotate x, necesitamos aquí menos dos grados. En cuanto al 100%, no necesitamos rotar el elemento. Los fotogramas clave están listos. A continuación tenemos que seleccionar todas las imágenes. Entonces necesitamos aquí proyecto seguido del enésimo selector hijo Y tenemos que especificar aquí lo que necesitamos hover seguido de imagen Entonces, para poder aplicar los fotogramas clave CSS, tenemos que usar animación Necesitamos aquí el nombre de los fotogramas clave fuera, IMG, anim, seguido de la duración 4 s. Y también voy a usar aquí un poco de tiempo de retardo, 0.2 s. Así que ahora mismo, si pongo el cursor sobre la primera imagen, entonces no pasará nada especial No vemos aquí un efecto sesgado. Ocurre porque tenemos que crear un entorno 3D para los elementos y para eso, tenemos que usar una de las propiedades CSS se llama perspectiva. Vamos a ponerla en rampa 20. Entonces ahora si pongo el cursor sobre la imagen, entonces se sesgará muy bien en el espacio 3D Bien, sigamos adelante y hagamos lo mismo con las imágenes pares Podemos duplicar todo este código. Cambiemos todo en incluso asfalto los fotogramas clave. Solo necesitamos cambiar los lugares de las propiedades transformadas en 25.50 por ciento de escalones Entonces ahora se puede ver que todo funciona bien. A continuación, voy a agregar un poco de tiempo de retardo antes de que la imagen se desplace hacia arriba. Hagámoslo 0.2 s. bien, así que antes de terminar esta conferencia, voy a hacer una cosa más Voy a disminuir la opacidad para cada imagen por defecto Hagámoslo 0.5 y luego aumentémoslo en hover. Necesitamos opacidad uno. Y también agrega aquí la transición. Bien, eso es todo ahora mismo. A continuación, vamos a crear un evento click y expandir las imágenes. Entonces, sigamos adelante. 12. Crear y personalizar sección de proyectos - Parte 2: Bien, entonces en la conferencia anterior la creamos y personalizamos los proyectos Quiero decir, tenemos imágenes alineadas y también hemos creado un efecto hover Lo siguiente que vamos a hacer es expandir el proyecto una vez que hagamos clic en él, como está en la versión terminada del proyecto. Antes de hacer eso, voy a arreglar un pequeño problema que tenemos en el apartado anterior. Si pongo el cursor sobre el botón desde la parte inferior, entonces no pasará nada El motivo es que la sección del proyecto cubre el botón parcialmente. Entonces dos picos que voy a disminuir la parte superior de relleno para esta sección. Hagámoslo diez RAM. Y también voy a agregar aquí margin top con valor Tan ran ran. Entonces ahora como pueden ver, el problema está arreglado. Bien, volvamos a la sección de proyectos. Entonces cuando hacemos clic en el proyecto, entonces tenemos que crear unos nuevos elementos. Es decir, esta gran imagen. Por defecto, no existe. Solo se crea OnClick. Entonces nos ayuda a no sobrecargar la página web porque esas imágenes son realmente las grandes. Lo primero que voy a hacer es adjuntar el oyente de eventos al proyecto con el evento click Al principio, insertemos sus nuevos comentarios. Imagen de grandes proyectos. Y voy a elegir la imagen del proyecto. A continuación, adjunte el oyente de eventos al proyecto. Haremos clic en eventos y ampliaremos una función de devolución de llamada. Entonces como decíamos, tenemos que crear un nuevo elemento OnClick Pero antes de crear la imagen, al principio, necesitamos crear un envoltorio de la imagen. Estoy en el fondo oscuro que aparece al principio. Para crear el elemento, voy a usar el método create. Vamos a crear una nueva variable. Voy a llamarlo gran envoltorio IMG. Y luego crear los elementos usando el método create element. Cuando se debe especificar aquí el nombre de la etiqueta, se crea el elemento. A continuación, voy a asignarle un nombre de clase. En realidad, podemos hacerlo de un par de maneras diferentes. En este caso, voy a usar la propiedad llamada className Entonces necesitamos gran ING, rapero dot nombre de clase. Y el valor va a ser proyecto IMG rapero. ¿Correcto? Ahora tenemos que agregar un nuevo elemento al contenedor. Primero, seleccionemos el contenedor en sí. Voy a crear una nueva variable. Y luego seleccione contenedor usando el método QuerySelector. Cuando acaba de especificar aquí el contenedor de nombre de clase. Después de las deudas. Para poder adjuntar el envoltorio de imagen al contenedor, necesitamos usar uno de los métodos llamados append Niño tendrá que especificar aquí gran IMG, Robert. Bien, veamos sobre el envoltorio. Para ver que el elemento está creando onclick. Inspeccionemos la página y veamos la pestaña Elementos. Una vez que haga clic en el proyecto, entonces se crearán los elementos. Bien, antes de crear la imagen en sí, al principio, voy a darle estilo al envoltorio. Vamos a instituir nuevos comentarios, imagen de proyecto grande. Y de imagen de gran proyecto. A continuación, seleccione el envoltorio. Se va a fijar la posición del envoltorio . Además, voy a definir propiedades superiores e izquierdas. Pongamos a ambos a cero. Entonces voy a expandir elementos de toda la ventana gráfica. Y también voy a cambiar el color de fondo. Vamos a establecer ancho y alto, ambos al 100%. En cuanto al color de fondo, voy a usar el valor RGBA Vamos a insertar tu color negro con la opacidad 0.9. Bien, ahora si hago clic en el proyecto, entonces se mostrará el wrapper Como saben, el envoltorio debe mostrarse desde arriba con un poco de animación. Entonces voy a crear los fotogramas clave CSS. Antes de eso, vamos a disminuir la altura de la envoltura, hacerla cero. Y luego crear fotogramas clave CSS. Voy a llamarlo anime envoltorio IMG. Entonces, en general, tendremos dos pasos diferentes. Al 0%, la altura va a ser cero. En cuanto al 100%, voy a aumentar la altura al 100%. Entonces voy a usar la propiedad de animación. Tenemos que especificar aquí el nombre de los keyframes IMG wrapper anime Que el siguiente valor va a ser la duración de un segundo. Y además de eso, voy a mantener la altura cien por ciento cuando termine la animación. Entonces necesitamos aquí adelante Así que si hago clic en el proyecto, entonces el envoltorio aparecerá de la parte superior muy bien. Bien, eso es todo sobre el rapero de imagen en este momento. A continuación voy a tomar aquí de la imagen en sí, como el wrapper, tenemos que crear este elemento. Entonces voy a crear una nueva variable. Vamos a llamarlo grande IMG. Y luego crear elementos. Especificemos aquí el nombre de la etiqueta IMG. Entonces se crea el elemento. Y a continuación voy a asignarle un nombre de clase para los estilos CSS. Así que necesitamos gran nombre de clase punto IMG. Y el valor va a ser proyecto. Estoy en lo cierto. Ahora para probar si la imagen se muestra al click, voy a definir su nombre en el atributo source y darle el nombre de cualquiera de las imágenes. Para definir el atributo para los elementos, tenemos que usar uno de los métodos llamados set attribute. Se necesitan dos argumentos. El primero es el nombre del atributo. En este caso, necesitamos fuente SRC. En cuanto al segundo argumento va a ser la parte de la imagen. Entonces necesitamos imágenes que la carpeta Proyectos y la imagen con el nombre proyecto, uno, big dot JPG. Y por último, tenemos que adjuntar una imagen al envoltorio usando el método append child Entonces ahora si hago clic en el proyecto se mostrará la imagen grande. Ahora mismo, si hago clic en alguno de los proyectos, se mostrará la misma imagen. Me refiero al primero. Porque definimos la parte de la imagen con la primera imagen, no necesitamos eso. Tenemos que mostrar la imagen similar para cada proyecto. Para ello, tenemos que tener acceso a la ruta de la imagen en la que se hace clic Sigamos adelante y creamos una nueva variable. Voy a llamarlo camino IMG. Para poder acceder al atributo source al principio, necesitamos acceder al elemento image en sí. Entonces necesitamos proyecto punto, primer elemento hijo. Entonces necesitamos obtener este atributo fuente usando el método get attribute. Tenemos que especificar aquí nombre del atributo como RC. Veamos en la consola qué nos da esta variable. Si hago clic en el proyecto, entonces obtendremos la ruta de la imagen en la consola. Si hacemos clic en cualquier otro proyecto, entonces obtendremos el camino adecuado de la imagen. Bien, entonces desde este camino, necesitamos de todo lo que se coloque del lado izquierdo de los puntos Porque las imágenes grandes tienen una trayectoria similar, pero los nombres reales de las imágenes son diferentes. Tienen grandes después de los números. Entonces, para agarrar la primera parte de la ruta, voy a usar uno de los métodos de ayuda de matriz llamados split. Tenemos que dividir el camino en punto. Ahora bien, si hago clic en el proyecto, obtendremos una matriz con dos ítems diferentes. El primero es el camino sin extensión de la imagen. En cuanto al segundo es el JPG de extinción. Para seleccionar el primer ítem, necesitamos definir el número de índice como cero. Ahora bien, si hago clic en el proyecto, entonces obtendremos la primera matriz ¿verdad? Derecha. Ahora tenemos que usar este ítem y agregar al nombre de la imagen, big dot JPG. Para ello, tenemos que cambiar este camino y hacerlo dinámico. Vamos a abrir backticks e insertar aquí la ruta de la imagen variable, y luego agregarle guión, big dot JPG Bien, entonces ahora si hago clic en los proyectos, entonces obtendremos las imágenes adecuadas, ¿verdad? Todo estuvo bien y tenemos que darle estilo a las imágenes. Me refiero a los grandes. Así que vamos a seleccionarlos. Vamos a establecer el ancho al 100%. También, voy a hacer al Congreso como el redondeado usando border-radius con el valor 0.5 rem Además, vamos a crear relleno. Voy a hacer que sea siete rem en la parte superior e inferior y 20 RAM en los lados izquierdo y derecho. Y también disminuir ligeramente la opacidad, hacerla 0.9. Bien, entonces las imágenes se ven bien. Ahora tenemos que agregarles y animación. Por defecto, los voy a ocultar y mostrar una vez que hagamos clic en el proyecto y aparezca el rapero Sigamos adelante y creamos fotogramas clave CSS Voy a llamarlos anión IMG. Entonces en general vamos a tener dos pasos. Al 0%, voy a establecer escala de los elementos es cero. En cuanto al 100%, voy a hacer escala uno. Y también usa animación. Necesitamos aquí el nombre de los fotogramas clave, IMG anime, también la duración 1 s. Y necesitamos tiempo de retardo, que va a ser 1 s. En este caso, necesitamos hacer escala cero como estilo predeterminado de la imagen Y también tenemos que mantener la escala uno quiere que termine la animación. Para hacer eso, podemos establecer la escala de transformación a cero por defecto y luego usar forward en la propiedad de animación como ya lo hicimos para el envoltorio de imagen. O simplemente podemos usar aquí el valor llamado ambos, que harán el mismo trabajo. Entonces, si hago clic en el proyecto, entonces aparecerá la imagen. En este momento aparece desde abajo, y quiero mostrarlo desde arriba. Entonces tenemos que cambiar el origen de la transformación. Necesitamos top center. Bien, entonces ahora tenemos un resultado mucho mejor. En este momento no podemos desplazarnos hacia abajo en la imagen. Desplazamos la página misma, que está oculta. Para ello, voy a usar la propiedad overflow con los valores ocultos. Desplazarse. Ahora somos capaces de desplazarnos hacia abajo en la imagen, pero como pueden ver, aquí tenemos dos barras de desplazamiento. Uno para la imagen y el segundo para la página. Para solucionarlo, debemos asignar al elemento body overflow hidden usando JavaScript. Entonces necesitamos documento punto, cuerpo, estilo punto, desbordamiento de punto y con el valor oculto. Bien, ahora todo funciona a la perfección. Y lo único que voy a hacer en este video es crear el botón de cerrar. Una vez ampliamos la imagen. En primer lugar, vamos a crear el marcado HTML para el Buxton Voy a instituir nuevos comentarios, proyecto botón Ocultar. Y de proyecto Ocultar botón. Después abre la etiqueta del botón con una altura de proyecto de clase, btn Voy a pasar aquí una de las entidades HTML5. Va a ser la flecha. Aquí necesitamos, l AQ, U0, punto y coma, seguido de la palabra cerrar Después de eso, voy a personalizar el botón. Vamos a insertar nuevos comentarios en el archivo CSS para el botón. Después selecciónelo. En primer lugar, voy a definir la posición del botón. Se va a colocar en la esquina superior derecha. Entonces voy a fijar la posición para arreglar. Y luego voy a hacer top y las propiedades correctas, ambas cinco corrieron. Siguiente. Voy a hacer transparente el color de fondo. También deshazte del borde predeterminado. Entonces voy a cambiar el color del texto. Hagámoslo blanco. Después aumenta el tamaño de la fuente, hazlo a Ram. A continuación, voy a crear algo de espacio entre las letras. Hagámoslo 0.1 RAM y también cambiemos el tipo del curso lo hará punto. Bien, entonces aquí tenemos el patrón de cierre. Si hago clic en los proyectos entonces el envoltorio de imagen lo cubrirá. Entonces tenemos que arreglarlo. Y para eso, usemos la propiedad z-index con algún valor mayor que cero. Digamos diez. Bien, así que por defecto, necesitamos ocultar el botón y mostrarlo. Una vez que hacemos clic en el proyecto. Para ocultar los elementos, voy a usar Transform. Escala con un valor de cero. También visibilidad oculta. Para volver a mostrar el botón, una vez que hagamos clic en el proyecto, voy a usar una nueva clase en CSS, en la que definiremos los nuevos estilos, estos estilos para mostrar el botón. Entonces voy a llamar al cambio de clase. Y luego tenemos que seleccionar project hide, btn. No usamos aquí el espacio entre esas dos clases porque seleccionamos el mismo elemento con dos nombres de clase diferentes. Si el elemento no tiene ninguna de esas clases, entonces esos estilos no se aplicarán al elemento. Entonces necesitamos transformar la escala uno y la visibilidad visible. Bien, a continuación debemos agregar el cambio de clase al botón onclick usando JavaScript Por lo que necesitamos seleccionar un botón en sí. Vamos a crear una nueva variable y llamarla Project hide btn. A continuación, seleccione un botón utilizando el método QuerySelector. Especificemos aquí el nombre de la clase, project hide, btn. Después tenemos que agregar el cambio de clase al botón una vez que damos clic en los proyectos. Entonces necesitamos aquí altura del proyecto, btn, puntos, lista de clases, punto add No tengo que especificar aquí el nombre del cambio de clase. Además de eso, debemos eliminarlo cuando hacemos clic en el botón mismo. En este caso, voy a usar manejador de eventos onclick porque en el caso del oyente de eventos, el evento click se agrega varias veces y no necesitamos Necesitamos disparar un evento click solo una vez. Entonces voy a escribir aquí altura del proyecto, btn punto onclick, que debería ser igual a una función de flecha Y aquí tenemos que eliminar el cambio de clase de la lista de clases. Además de eso, necesitamos quitar el envoltorio de la imagen grande. Entonces voy a escribir aquí grande IMG, rapero punto, quitar. Y también necesitamos cambiar el valor del viejo flujo. Por qué propiedad para que el elemento del cuerpo vuelva a desplazarse. Entonces necesitamos documento dot, body, dot style, dot overflow, y value call. Bien, así que todo funciona bien. Lo único que voy a hacer es agregar un poco de transición al botón de cerrar. Tenemos que hacer la transición sólo cuando aparece el botón. Entonces tenemos que instituir con el cambio de clase. Vamos a configurarlo para transformar y duración 0.5 s. Bien, así que finalmente terminamos Todo funciona a la perfección. A continuación, tenemos que encargarnos de este botón Mostrar más. Entonces, sigamos adelante. 13. Agrega función "Mostrar más" a los proyectos - Parte 1: Bien, así creamos y personalizamos los proyectos. agregamos un par de efectos diferentes, como los eventos de hover y click este momento, los diez proyectos se muestran en la página, y creo que no se ve del todo bien. Y además no se verá bien cuando hicimos que nuestro proyecto respondiera a tamaños de pantalla más pequeños. Entonces voy a esconder algunos de los proyectos. También agrega aquí un botón Mostrar más. Y una vez que el usuario haga clic en él, entonces mostraremos los diez proyectos. En lugar de mostrar más, mostraremos, mostraremos esto. Y también cambiaremos la dirección de la flecha. En realidad, la flecha nos muestra la dirección del desplazamiento, lo que sucede onclick Además de eso, los proyectos se están mostrando y ocultando con algunos Fade Effects. Bien, así que eso es todo. Qué vamos a hacer en este video. Empecemos. Lo primero que voy a hacer es ocultar los últimos cuatro proyectos. Y voy a hacer eso usando JavaScript. Todos ya tenemos aquí para cada método. Con el fin de recorrer los proyectos. Proyectos es una lista de nodos y cada proyecto tiene su propio número de índice. Tenemos que ocultar los últimos cuatro proyectos. Los proyectos que tienen números de índice del seis al nueve. Entonces necesitamos acceder a esos proyectos. Para eso tenemos que pasar aquí otro parámetro, que será el número de índice. Ahora, necesitamos usar una declaración if en la que tengamos que definir si yo es mayor o igual a seis. Si esta condición es cierta, entonces tenemos que ocultar los proyectos. Así que necesitamos aquí proyecto y punto estilo punto CSS texto. Y tenemos que pasar aquí a las propiedades CSS. El primero se va a mostrar con el valor none. En cuanto al segundo, necesitamos opacidad cero Entonces, como pueden ver, los últimos cuatro proyectos ya están aquí. En realidad este código, quiero decir la declaración if funciona bien, pero podemos escribir de manera más concisa En lugar de la sentencia if, podemos usar lógica y operador. Entonces podemos deshacernos de si palabra clave, también las llaves Y tenemos que añadir aquí y operador, que se expresa por dos ampersands Entonces, si el lado izquierdo es verdadero, entonces simplemente podemos agregar un bloque de código en el lado derecho del operador. Entonces como pueden ver, tenemos aquí exactamente el mismo resultado. Ahora, es el momento de agregar aquí el botón. Se quedará botón, que ya hemos utilizado un par de veces. Entonces vayamos al archivo index.html. Agarra el botón de la sección anterior y pegarlo aquí. Voy a cambiar el contenido que necesitamos aquí, mostrar más. Y también vamos a agregarle otra clase, proyectos, BTN. Y también cambiar los comentarios que necesitamos aquí proyectos. Pero como puedes ver aquí, tenemos el botón ahora mismo, se coloca en el lado izquierdo de la página. Entonces tenemos que centrarlo. Insertemos nuevos comentarios en el botón Proyecto del archivo CSS. Y de botón de proyectos. Después selecciona el botón con los proyectos className recién agregados btn Para centrar el elemento, voy a usar la posición izquierda con un valor del 50%. Y luego para una censura perfecta, necesitamos transformar traducir X con el valor -50 por ciento. Entonces como puedes ver, el botón se coloca en el centro. Bien, ahora voy a agregar un detector de eventos al botón con el evento click Una vez que hacemos clic en él, tenemos que mostrar los proyectos ocultos. En primer lugar, insertemos comentarios. Botón Proyecto y del botón Proyecto, y luego seleccione el botón en sí. Voy a crear una nueva variable. Llamémoslo Proyectos btn y botón de selección usando el método selector de consultas Necesitamos aquí Proyectos de Clase btn. Bien, a continuación necesitamos adjuntarle un oyente de eventos Con eventos de clic y con una función de devolución de llamada Entonces lo primero que vamos a hacer es evitar la acción por defecto. Cuando hacemos clic en el botón, quiero decir, una vez que hagamos clic en el botón, navegaremos hasta la parte superior de la página. Entonces no necesitamos eso. Voy a pasar aquí un objeto de evento. Y entonces necesitamos puntos. Prevenir el valor predeterminado. Ahora como puede ver, ya no navegamos hacia arriba. En este momento es el momento de lograr mostrar y ocultar los proyectos. Para eso al principio, necesitamos recorrer los proyectos Así que voy a usar para cada método con una función de devolución Te voy a pasar dos parámetros distintos. El primero va a ser el proyecto. En cuanto al segundo, necesitamos nuevamente el número de índice. Quiero decir, ahora necesitamos tener acceso a los proyectos ocultos. Como recuerdas, lo hicimos usando el número de índice. El número de índice es mayor o igual a seis, entonces significa que solo tenemos acceso a los proyectos ocultos. Entonces voy a usar aquí y si las declaraciones que tenemos las definidas, si yo es mayor o igual a seis. Entonces, si esta condición es cierta, entonces tenemos que lograr mostrar y ocultar los proyectos. Para eso, voy a crear una nueva variable, que va a ser el valor booleano Voy a llamarlo Show, Hide, Bu. Y por defecto, voy a establecerlo en true. A continuación, necesitamos otra sentencia if en que tengamos que comprobar si el valor booleano es verdadero o falso Entonces voy a pasar aquí el nombre de la variable. Si es cierto, entonces tenemos que exhibir los proyectos. Así que necesitamos proyectar punto estilo dot display. Debe ser igual a flex. Entonces voy a duplicar esta línea de código. Y necesitamos aquí opacidad con el valor uno. Entonces si es falso, tenemos que ocultar los proyectos. Entonces necesitamos la declaración else. Entonces voy a agarrar esas dos líneas y cambiar los valores. Necesitamos la propiedad de exhibición para ser ninguno. En cuanto a la opacidad, va a ser cero Bien, por último, tenemos que cambiar el valor de estos show hide bull variable es true, entonces tenemos que hacerla falsa y viceversa. Así que necesitamos Mostrar Ocultar toro para ser igual a Not Show Hide book. Si hago clic en el botón, entonces se mostrarán los proyectos ocultos. En la próxima semana, se esconderán. Bien, después de eso, voy a cambiar el textContent del botón Una vez que mostramos los proyectos que el botón debería tener el contenido como mostrar menos. Y además de eso, tenemos que rotar la flecha al principio. Cuidemos el contenido del texto. En primer lugar, voy a seleccionar un elemento span. Vamos a crear una nueva variable. En realidad, voy a duplicar esta línea de código, luego cambiar el nombre de la variable. Va a ser proyectos btn, texto. Y también voy a agregar aquí span. Bien. Entonces, cuando mostramos los proyectos, deberíamos hacer que el textContent muestre menos Necesitamos aquí proyectos btn textos, textos contenidos para ser iguales para mostrar menos Cuando ocultamos los proyectos, debemos cambiar show lesson para mostrar más. Entonces voy a duplicar esta línea de código. Y tenemos que cambiar aquí menos que mañana. Entonces si hago clic entonces el textoEl contenido del buxom cambiará Bien, siguiente, voy a rotar la flecha OnClick. Para eso, voy a crear una nueva clase y CSS y seleccionar las líneas con esta clase. Vamos a definir nuevos estilos, y luego agregaremos esta clase al elemento padre de las líneas. Estoy en el contenido del botón. Al principio, agreguemos la clase no mencionaba elementos. Necesitamos proyectos BTN. Entonces tenemos que tener acceso al primer elemento hijo del botón. En este caso va a ser la onda. Entonces necesitamos primer elemento hijo, y luego tenemos que tener acceso a los contenidos que será el hermano del repo Así que voy a usar aquí la propiedad llamada siguiente elemento hermano. Entonces ahora tenemos que acceder al contenido y tenemos que agregarle cambio de clase. En este caso, voy a usar un método llamado toggle. Nos permite agregar la clase al elemento si no la tiene, y eliminar la clase si la tiene. Así que necesitamos la lista de clases punto toggle. Y voy a especificar aquí el nombre de la clase como cambio. Bien, veamos sobre JavaScript. Ahora tenemos que definir estilos y CSS. Tenemos que seleccionar líneas con el cambio de clase. A continuación necesitamos uno de los combinadores CSS llamado selector Child, que selecciona todos los elementos que son los hijos de los elementos especificados Y ahora tenemos que especificar el nombre de clase de la línea, seguido del enésimo selector hijo dentro del número uno Bien, entonces tenemos que rotar la primera línea según el eje z 45 grados Y además de eso, tenemos que moverlo ligeramente según el eje x. ¿Cuál valor? -0.65 ronda. Eso es todo sobre la primera línea. Voy a duplicar este código dos veces y luego hacer algunos cambios. Para la segunda línea, necesitamos rotar Z con un valor de -45 grados. En cuanto al valor de la función translate x va a ser 0.65 rem A continuación viene la tercera línea. Necesitamos rotar Z con un valor de 90 grados. En cuanto al Translate, X va a ser -0.5 RAM. Y además de eso, tenemos que establecer borde izquierdo 2.1 RAM, sólido y color blanco. Y también tenemos que deshacernos de la frontera en el lado derecho. Bien, así que si hacemos clic en el botón, entonces la flecha girará. Todo funciona bien. Hasta el momento. Necesitamos agregar un efecto de desvanecimiento a los proyectos. A continuación, tenemos que hacer nuestro código un poco más limpio. Y también tenemos que personalizar el encabezamiento de esta acción. Para ello, pasemos a la siguiente conferencia. 14. Agrega función "Mostrar más" a los proyectos - Parte 2: Bien, así que en la última conferencia logramos mostrar y ocultar los proyectos Una vez que damos clic en el botón Mostrar más, ahora tenemos que agregarles algunos efectos de fundido. Y también una vez que hacemos clic en el botón, tenemos que desplazarnos hacia abajo por la página sin problemas. Con el fin de crear diferentes efectos. Tenemos que mostrar los proyectos con algunos intervalos. Y por lo tanto vamos a utilizar el método setTimeout. Entonces necesitamos definir los diferentes tiempos de retardo para display flex y opacidad uno Al principio tenemos que asignar a los proyectos display flex. Y luego después de algún tiempo tenemos que empezar a exhibir los proyectos con diferentes intervalos. Entonces voy a usar el método set timeout. Entonces voy a insertar esta línea de código dentro de la función como segundo argumento. Me refiero a la cantidad de tiempo que voy a pasar aquí 600 milisegundos. Entonces ahora una vez que haga clic en el botón, entonces los proyectos se mostrarán después de un pequeño retraso. Bien, ahora tenemos que encargarnos de la opacidad. Como ya dije, necesitamos diferentes tiempos de retraso para cada proyecto. Vamos a usar de nuevo el método setTimeout y peguemos aquí esta línea de Ahora tenemos que definir el segundo argumento. Estoy en el tiempo de retraso. Para definir diferentes tiempos de retardo para cada proyecto, voy a usar el parámetro i. Y tenemos que multiplicarlo por alguna cantidad de tiempo, digamos 200. Entonces ahora si hago clic en el botón y los proyectos aparecerán en algunos intervalos. ¿Correcto? Ahora no tenemos el efecto fade porque necesitamos usar transition. Tenemos que asignarlo a los proyectos. Necesitamos opacidad y la duración 0.5 s. Entonces como puedes ver, ahora tenemos el efecto fade ¿Correcto? Ahora, una vez que hago clic en el botón, la página no se desplaza hacia abajo automáticamente. Tenemos que hacerlo de forma manual. Entonces, sigamos adelante y arreglemos ese problema. Voy a usar uno de los métodos llamados scroll into view. Y tenemos que adjuntarlo a los elementos de sección. Entonces, antes que nada, vamos seleccionarlo y queríamos crear una nueva variable. Vamos a llamarlo sección tres. Y luego seleccionar elementos usando el método selector de consultas. Necesitamos especificar aquí el nombre de clase sección tres, y luego pasar lo siguiente en el primer método setTimeout. Cuándo adjuntar el método scroll into view a la sección tres. Se necesitará un argumento. Va a ser el objeto. Necesitamos aquí, propiedad llamada bloque con un valor. Y ahora cuando hago clic en el botón, la página o desplazamiento hacia abajo, pero sin ningún dato suave. Para solucionarlo, tenemos que asignar a los elementos HTML una de las propiedades llamadas comportamiento scroll con los valores. Entonces ahora como puedes ver, todo funciona bien. Bien, ahora tenemos que hacer las mismas cosas. Una vez ocultamos los proyectos. Tenemos que ocultar los proyectos van a desvanecerse efecto. Y nuevamente, con algunos intervalos, necesitamos asignar a los proyectos opacidad cero con diferentes intervalos hasta que los proyectos se muestren ninguno Así que tenemos que utilizar de nuevo el método setTimeout. Pero ahora en la sentencia else, insertemos aquí esta línea de código. Y como segundo argumento, me refiero a la cantidad de tiempo. Vamos a insertar 1,200 milisegundos. Además de eso, necesitamos ocultar los proyectos usando opacidad con diferentes intervalos Así que de nuevo, necesitamos el método setTimeout. Entonces coloquemos esta línea de código dentro de la función. Y como segundo argumento, voy a pasar aquí, multiplicé por 100. Ahora si hago clic en el botón, entonces los proyectos se esconderán con fade vets. Y lo único que tenemos que hacer es desplazarnos hacia arriba a la página. Así que necesitamos, de nuevo desplazarse hacia el método de vista. Vamos a agarrar esta línea de código, pegarla tú. Entonces en estos momentos tenemos el mismo resultado porque aún no tenemos el contenido después de la sección. Una vez que agreguemos el contenido, entonces funcionará como si estuviera en el proyecto terminado. Bien, Antes de seguir adelante y personalizar el encabezado de esta sección, voy a hacer este código un poco más limpio Voy a crear dos funciones distintas para mostrar y ocultar los proyectos. Vamos a crear una nueva función fuera del evento click. Voy a llamar a la función mostrar proyectos Tomará dos parámetros. El primero va a ser el proyecto. En cuanto al segundo, debería ser el número de índice. Entonces voy a tomar estos métodos setTimeout de las declaraciones if y pegarlos dentro de la función Y entonces tenemos que llamar a esta función dentro de la declaración if como los argumentos. Tenemos que aprobar tus proyectos. Y hagamos lo mismo para las declaraciones de los demás. Vamos a crear una nueva función. Voy a llamarlo proyectos de altura. También tomará dos parámetros, projects y luego agarro los métodos setTimeout de la sentencia else, los pego agarro los métodos setTimeout de la sentencia else, los dentro de la función y luego llamo a la función dentro de la sentencia else con los argumentos Y puedo ver que todo funciona de la misma manera. Pero ahora tenemos un código un poco más limpio. Quiero hacer un par de cosas más. En lugar de las declaraciones if, voy a usar, nuevo, lógico y operador. Vamos a deshacernos de la palabra clave if y de las llaves. Y luego agregar aquí dos ampersands. En cuanto a las segundas declaraciones if else, voy a usar un operador ternario Vamos a abrir paréntesis e insertar la condición, me refiero al Mostrar, Ocultar toro A continuación, necesitamos un signo de interrogación. Entonces, si el valor booleano es verdadero, entonces tenemos que llamar a la función show projects Y si es falso, entonces tenemos que llamar a la función de proyectos de altura. ¿Bien? Siguiente Voy a encargarme del textContent del botón No necesitamos que este código esté dentro del para cada método porque ejecutará este código en cada iteración Entonces voy a colocarlo fuera de la, para cada método. Necesitamos el valor booleano. Quiero decir, Mostrar Ocultar toro, seguido del operador ternario Entonces, si esta condición es cierta, entonces necesitamos que el contenido del texto se muestre menos. Así que vamos a agarrar este código de aquí. Si es falso, entonces necesitamos mostrar más. Entonces voy a agarrar esta línea de código. Por último, deshagámonos de las declaraciones if else de aquí. Bien, así que de nuevo, todo funciona de la misma manera. En realidad, te noté que la flecha está cambiando su dirección sin transición. Y no se ve del todo bien. Entonces, sigamos adelante y agreguemos una transición a las líneas. Tenemos que seleccionar proyectos btn, seguido de PT principal en línea Vamos a usar la transición con tus valores todos y 0.5 s. bien, entonces ahora el problema está arreglado y la flecha gira suavemente Por último, tenemos que encargarnos del encabezamiento de esta sección. Va a ser similar al encabezado de la sección anterior. Entonces, para evitar escribir el mismo código una y otra vez, voy a asignarles un nombre de clase común y usar el mismo código para ambos encabezados y también para los encabezados que crearemos en el futuro En primer lugar, me voy a deshacer de los comentarios del encabezado. Entonces asignemos a ambos encabezados, clase, encabezado de sección Entonces voy a agarrar el código y pegar. Está en los estilos comunes. También cambiar los comentarios. Necesitamos el encabezado de la sección y el nombre de la clase. Bien, entonces tenemos aquí el encabezamiento de esta sección. Entonces, en el futuro, solo agregaremos los nombres de las clases a los encabezados y se posicionarán automáticamente y se estilizarán Bien, eso es. Por último, hemos terminado trabajar en la sección de proyectos. Vamos a seguir adelante. 15. Sección de servicios de creación y diseño: Bien, entonces una vez que hayamos terminado con la sección de proyectos ahora es el momento de seguir adelante y comenzar a trabajar en la siguiente sección, que va a ser estos servicios. Echemos un vistazo al proyecto terminado. Entonces aquí tenemos un par de servicios diferentes. Se muestran en una fuente grande. Y si hacemos clic en ellos, entonces aparecerá algún texto con algunos bonitos efectos de desvanecimiento. Además, los servicios se moverán hacia el lado izquierdo sin problemas. Eso es lo que vamos a crear en esta sección. Voy a comenzar con el marcado HTML. Insertemos nuevos comentarios en el archivo HTML para la Sección cuatro. Esa etiqueta de sección abierta con la sección de clase para. Esta sección constará de dos partes principales. Tendremos un rubro de sección y luego los servicios. Insertemos nuevos comentarios para el encabezado de la sección. Entonces voy a abrir la etiqueta de encabezado H1 con un encabezado de sección de clase. Y con el contenido. Lo que puedo. Muy bien, A continuación contaremos con los servicios. Vamos a crear de nuevo nuevos comentarios, servicios y de servicios. Después abre la etiqueta regalo, que va a ser la envoltura de los servicios que voy a asignar a cada envoltorio de servicios de clúster. Por lo que en general contaremos con seis servicios diferentes. Vamos a abrir la etiqueta div, que va a ser el propio servicio. Cada servicio constará de dos elementos diferentes. El primero va a ser la etiqueta de enlace con un servicio de clase, btn Entonces voy a insertar tu elemento span. Va a ser encabezamiento del servicio. Insertemos tu UI UX. En cuanto al segundo elemento dentro del servicio, va a ser el texto. Abramos la etiqueta P con un texto de servicio de clase. En realidad, preparo las etiquetas de servicio para cada servicio, así que voy a copiar la primera de este documento de texto. Se adjuntará al archivo fuente para que puedas descargarlo y usarlo. Entonces como dije, contaremos con seis servicios diferentes. Entonces voy a duplicar este código cinco veces y luego cambiar el contenido. El segundo servicio va a ser Icon illustration. Entonces tendremos branding. El siguiente va a ser el desarrollo. También, tendremos movimiento y luego fotografía. Muy bien, así que eso es todo sobre el marcado HTML. En este momento el contenido no es visible, ha terminado detrás del fondo. Sigamos adelante y comencemos a personalizar esta sección. Voy a insertar nuevos comentarios en la sección del archivo CSS para el final de la sección cuatro. A continuación, seleccione el elemento de sección y defina su posición. Voy a convertirlo en un pariente. Y también voy a establecer con el 200 por ciento. Entonces como puedes ver ahora el contenido de esta sección es posible. Tenemos aquí un rubro que ya está posicionado y estilo. Y también puedes ver aquí el servicio. Bien, veamos sobre este elemento de sección ¿verdad? Ahora. Sigamos adelante y personalicemos el envoltorio de los servicios. Insertemos nuevos comentarios, servicios y de servicios. Voy a establecer el ancho del envoltorio al 100%. A continuación, tenemos que alinear estos servicios usando flexbox. Voy a asignar al centro de clases envoltorio. Incluye un par de estilos Flexbox. Y además de eso, voy a agregar a la columna de dirección flex wrapper. Por lo que se considera que los servicios están ubicados en el centro de esta sección. Bien, después de eso, voy a personalizar el servicio en sí Así que vamos a seleccionarlo. En primer lugar, voy a definir el ancho. Vamos a establecerlo en 70%. También, voy a crear algo de espacio en la parte superior e inferior de los elementos, digamos margen a, a RAM y cero. Y luego crear borde en la parte inferior. Necesitamos aquí 0.5 rem sólido. Y como el color, voy a usar 90 E 0 Bien, a continuación voy a definir el ancho para el fondo de servicio Seleccionemos el servicio btn y fijemos su ancho 200 presente. Después de eso, vamos a personalizar los elementos span. En primer lugar, voy a cambiar la familia de fuentes. En este caso, voy a usar el teléfono llamado Poppins, sans Después aumenta el tamaño de la fuente, hazlo diez RAM. Además, voy a cambiar el estilo de la fuente. Va a ser Itálica que necesitamos que el peso de la fuente sea negrita Y por último, cambia el color. Vamos a usar de nuevo. Bien, para que como veas, los encabezamientos de los servicios son personalizados Por defecto. Tenemos que colocarlos del lado derecho. Hagámoslo usando posiciones. Voy a poner posición a absoluta. Entonces necesitamos posicionar relativo para el elemento padre porque vamos a posicionar los elementos span de acuerdo con los padres. Ahora, como puede ver, el diseño está un poco desordenado. Para arreglar eso, tenemos que establecer la propiedad de exhibición para las partes de servicio en bloque. Porque por defecto el elemento link está en línea. Y también necesitamos definir la altura. Hagámoslo 15 rampa. Bien, entonces ahora se considera que el problema está arreglado y podemos mover estos servicios hacia el lado derecho Entonces pongamos a la derecha a cero. ¿Correcto? Eso es todo sobre el elemento link. Sigamos adelante y personalicemos el texto. Seleccionemos el servicio gravado. Voy a aumentar el tamaño de la fuente. Hagámoslo cinco rem. También cambia el color. Que sea 777. A continuación, voy a crear algo de espacio entre las letras. Hazlo 0.1 habitación. Y por último, cambiar la altura. 15 corrieron. Muy bien, así que eso es todo. Todo está personalizado y listo para agregar algunos efectos a esta sección. Entonces, por defecto, vamos a ocultar el texto del servicio. Para eso, hagamos que la altura de los textos sea cero. Y además de eso, voy a usar visibilidad oculta y opacidad cero Bien, entonces el texto está oculto y ahora tenemos que mostrarlo una vez que hagamos clic en estos botones de servicio Entonces voy a crear una nueva clase y CSS con nuevos estilos. Y luego agregaremos estos cluster, el párrafo onclick usando JavaScript. Pasemos al archivo script.js e insertemos nuevos comentarios para la Sección cuatro. Entonces, antes que nada, tenemos que seleccionar unos elementos de enlace. Entonces deberíamos mirar a través de ellos y en tal evento oyente a cada uno de ellos. Entonces voy a seleccionar elementos de enlace usando selector de consultas, todo método. Tenemos que especificar aquí el nombre de clase servicio btn, lo que necesitamos para cada método con una función callback como parámetro, voy a insertar su Y luego tenemos que adjuntar un detector de eventos al servicio con un evento click y con una función callback Bien, así que antes que nada, voy a evitar la acción por defecto de los elementos de enlace como lo hicimos anteriormente Quiero decir, una vez que hagamos clic en el enlace, entonces navegaremos hasta la parte superior de la página. Para evitarlo, necesitamos el método preventDefault Al principio, pasemos aquí el objeto event y luego usemos el método prevent default. Entonces ahora el problema está arreglado. A continuación, necesitamos tener acceso al párrafo y almacenarlo en la variable. Vamos a crear una nueva variable con el texto del servicio de nombres. Necesitamos aquí, punto de servicio. Siguiente elementos hermano, porque el párrafo es un hermano del servicio Ahora necesitamos agregar a este elemento el cambio de clase, que definiremos en el archivo CSS. En este caso, voy a usar el método toggle porque tenemos que agregar clase del elemento onClick y luego tenemos que eliminarlo En el siguiente clic. Tenemos que servir como lista de clases de punto de texto, punto toggle. Y tenemos que especificar aquí el cambio de nombre de clase. Ahora tenemos que definir nuevos estilos en el archivo CSS. Seleccionemos etiquetas de servicio con cambio de clase. Para poder mostrar el texto, necesitamos los siguientes estilos. Tenemos que volver a establecer la altura a 15 RAM. Entonces tenemos que hacer visible la visibilidad. Y también tenemos que aumentar la opacidad. Hagámoslo uno Así que ahora si hago clic en los encabezados, entonces se mostrarán las etiquetas de servicio adecuadas En este momento no tenemos aquí y son efectos suaves. Entonces necesitamos usar la transición. Tenemos que definir la traducción en ambos casos, quiero decir, por defecto y con el cambio de clase. Entonces, en el primer caso, necesitamos hacer una transición con los valores todos 0.2 s. En cuanto al segundo caso, necesitamos que especifiques altura y opacidad Entonces la duración va a ser de 0.5 s en ambos casos. Pero con opacidad, necesitamos algún tiempo de retraso. Digamos 0.5 s. Entonces como puedes ver, todo funciona bien. Lo único que tenemos que hacer es mover este botón de servicio al lado izquierdo onClick Para eso tenemos que usar JavaScript porque necesitamos algunos cálculos. Puede pensar que solo necesitamos cambiar la posición de este elemento de panel, pero eso no es suficiente. Si usamos la posición de retraso con un valor de cero, entonces no podremos usar la transición. Entonces, por ejemplo, si cambiamos la posición correcta y la hacemos al 100%, entonces verás dónde se posicionarán los elementos span. Entonces, para poder ajustar sus posiciones, tenemos que restar el ancho de este elemento span al 100% Voy a crear una nueva variable. Vamos a llamarlo posición correcta. Entonces como decíamos, tenemos que definir la posición correcta del servicio btn Y tenemos que cambiarlo sólo cuando las etiquetas de servicio tienen el cambio de clase. Entonces necesitamos insertar aquí una declaración condicional donde tenemos que verificar si este service desk contiene cambio de clase o no. Entonces necesitamos puntos de impuestos de servicio, lista de clases, punto contiene. Y tenemos que especificar aquí el cambio de clase. Si esto es cierto, entonces tenemos que restar el ancho de este elemento span al 100% Entonces voy a usar uno de los métodos llamados calc. Entonces necesitamos 100% menos. Entonces, para obtener acceso al ancho de los elementos span, voy a usar uno de los métodos llamados get computed style. Este método devuelve un objeto con los valores de todas las propiedades CSS que tiene el elemento. Dentro del paréntesis, tenemos que especificar los elementos span, que es el hijo del servicio Entonces necesitamos servicio punto primer elemento hijo. Y ahora tenemos que acceder al ancho. Entonces esto sucederá si la condición es verdadera, pero si es falsa, entonces tenemos que hacer cero la posición correcta. ¿Está bien? Finalmente, tenemos que asignar a los elementos span la posición correcta. Necesitamos servicio punto primer elemento, hijo, punto estilo punto, derecho. Y debe ser igual a la posición correcta. Ahora bien, si hago clic en esta superficie traza y se moverá hacia el lado izquierdo, en realidad, necesitamos hacer este momento más suave. Entonces usemos la transición. Necesitamos la duración correcta, 0.5 s. bien, para que como veas, todo funciona perfectamente Y con esta sección, ya terminamos. A continuación, tenemos que encargarnos de la sección de contenido. Entonces, sigamos adelante. 16. Crear y personalizar formulario de contacto: Bien, entonces en la conferencia anterior, terminamos de trabajar en la sección de proyectos, y ahora es el momento de seguir adelante y encargarnos de la siguiente sección, que va a ser un contacto conmigo Esta sección consta de un par de partes diferentes. Tenemos aquí el encabezado seguido un par de campos de entrada con un botón de enviar. Y también abajo tenemos una presentación de diapositivas de los íconos de las redes sociales En esta conferencia, nos encargaremos de la forma. En cuanto a esta conferencia, la crearemos más adelante. El encabezado que se coloca en la parte superior de los campos de entrada es dinámico. Quiero decir que por defecto, vemos aquí el texto. Hablemos. Pero si enfoco los campos de entrada, entonces cambiará dinámicamente. Bien, veamos qué vamos a crear. Como de costumbre, voy a comenzar con el marcado HTML. Insertemos nuevos comentarios en el archivo HTML. Sección cinco. De la Sección Cinco. Después abra la etiqueta de sección con una sección de clase cinco. Entonces, en la primera parte de esta sección, tendremos un encabezado de sección y los campos de entrada. Insertemos nuevos comentarios para el encabezamiento de la Sección cinco. Después abra la etiqueta de encabezado H1 con el encabezado de la sección de clase. Y con el contenido. Contáctame. A continuación, voy a crear unos elementos de formulario, pero antes de eso necesitamos un envoltorio de formulario. Vamos a insertar nuevos comentarios forma de formulario, y luego abrir una etiqueta div con una clase para goma. Por lo que este elemento incluirá el encabezamiento y la propia forma. Abramos la etiqueta de encabezado H2 con una clase de encabezado de formulario. Y con el contenido. Hablemos. Derecha. Después de las deudas, voy a crear un elemento formulario en sí mismo que se le asigna a cada clase. Formulario de contacto. Entonces, en general, tenemos tres campos de entrada diferentes, texto, área y un botón de envío. Vamos a abrir la etiqueta de entrada. El tipo va a ser gravado. Además, necesitamos aquí un atributo de clase, contacto, entradas de formulario. Y entonces necesitamos marcador de posición. Con la rodilla de contenido. Duplicemos esta línea de código dos veces. El segundo campo de entrada va a ser para correo electrónico. Entonces voy a cambiar el tipo y también el atributo placeholder El siguiente campo de entrada tendrá texto tipo. En cuanto al atributo placeholder, voy a insertar tu asunto Bien, después de eso, voy a crear un área de texto. Contará con dos clases distintas. Uno para los estilos comunes, me refiero a Contact Form Input. En cuanto al segundo, va a ser para estilos individuales. Vamos a insertar tu área de texto de formulario de contacto. Además, necesitamos el atributo placeholder con el mensaje de contenido Por último, vamos a crear un botón de envío. Voy a crearlo usando unos elementos de entrada. El tipo va a ser presentado. También necesitamos atributo de clase con el formulario de valor enviar btn Y entonces necesitamos atributo llamado valor con las solicitudes de envío de contenido. ¿Está bien? Entonces el marcado HTML está listo, pero en este momento no es visible Se coloca detrás del fondo. Entonces tenemos que empezar a escribir algo de CSS. Escribamos nuevos comentarios en el archivo CSS, sección cinco. De la Sección Cinco. A continuación, seleccione esta sección de elementos. En primer lugar, voy a cambiar la posición. Hagámoslo un pariente. Y luego voy a definir la altura. Hagámoslo al 100% de la vista. Entonces como puedes ver ahora el contenido es visible. Voy a colocarlo en el centro de esta sección. Y para eso, usemos flexbox. Voy a asignar al elemento de sección centro de clase. Por lo que se considera que el contenido se coloca en el centro de esta acción, y ahora podemos personalizar los elementos. Sigamos adelante y comencemos con el encabezado del formulario. Voy a insertar nuevos comentarios para formulario. A continuación, seleccione el encabezado Formulario. Y al principio, definamos su familia de fuentes. Voy a usar aquí Poppins San-serif que aumentar el tamaño de la fuente, que sea San-serif que aumentar el tamaño de la fuente, que sea seis RAM. Además, voy a hacer que la fuente sea un poco más audaz. Vamos a establecer la forma de fuente a 400 y luego cambiar el color. Voy a usar el color U 90, E 0 E. A continuación, voy a crear algún espacio entre las letras. Y también necesitamos algo de espacio en la parte inferior de una partida también. Entonces usemos espaciado lateral con valor 0.3 alrededor. Y entonces necesitamos margen inferior con valor tres. Rampa. Muy bien, veamos sobre el rumbo. Sigamos adelante y nos ocupemos de los campos de entrada. Voy a alinearlos usando Flexbox. Así que sigamos adelante y asignemos al centro de clase de elemento formulario. Y también necesitamos cambiar la dirección del flex para poder colocar los campos de entrada verticalmente en una columna. Así que vamos a seleccionar Formulario de contacto y establecer la dirección de flexión en columna. Bien, así como puedes ver, los campos de entrada están alineados y ahora tenemos que iniciarlos. Empecemos con las entradas del formulario de contacto. En primer lugar, voy a definir el ancho. Hagámoslo 60 RAM. Entonces voy a crear algo de espacio dentro de la entrada usando padding. Obtendremos valor 0.5 RAM. Y también, vamos a crear algo de espacio en la parte superior e inferior de los campos de entrada usando margin con valores uno, RAM y cero. Bien, a continuación, voy a cambiar el color de fondo y también el borde Voy a establecer el color de fondo en blanco. Pero con una menor opacidad, voy a usar el valor RGBA color blanco y con la opacidad Y también cambiar la frontera. Vamos a asignarle punto 1 g sólido, y coloreamos 90 E 0 E. Bien, después de eso, voy a encargarme de la fuente Vamos a aumentar el tamaño de la fuente, que sea 1.7 rem. Además, voy a hacer que la fuente sea negrita. Después cambia el color. Usas tu color AAA, y además creas algo de espacio entre las letras. Hagámoslo 0.1 rem. Bien, así que los campos de entrada se ven mucho mejor. A continuación, voy a encargarme de la altura de los campos de entrada y también del área de texto. Tendrán diferentes alturas. Vamos a establecer la altura de las entradas del formulario de contacto en cinco RAM. Después seleccione el área de texto y establezca su alto en 20 corridas. Bien, así como puedes ver, los campos de entrada y también el área de texto se ven bien Antes de seguir adelante y personalizar el botón de enviar, voy a arreglar aquí un pequeño problema. En el caso del área de texto, podemos cambiar su ancho y alto manualmente desde la esquina inferior derecha donde tenemos el controlador de redimensionamiento Una vez que cambiemos el tamaño del área de texto, entonces se romperá el diseño. Entonces voy a desactivar esta función. Para ello, necesitamos usar una de las propiedades CSS llamadas resize Y tenemos que fijarlo a ninguno. Bien, así como puede ver, ya no podemos cambiar el tamaño del área de texto Entonces, el último elemento que necesitamos para personalizar este botón de enviar, vamos a seleccionarlo. En primer lugar, voy a definir ancho y alto. Vamos a establecer el ancho en 20 RAM. En cuanto a la altura, voy a hacer cinco RAM. Luego cambia el color de fondo. Voy a usar aquí el mismo color rojo. Y luego deshazte del borde predeterminado. Hagámoslo ninguno. Bien, a continuación, la voy a colocar del lado izquierdo. Para eso voy a usar propiedad llamada align self. Podríamos valorar flex, empezar. También aumenta el tamaño de fuente y cambia el color del texto. Muy bien, eso es. Todos los elementos están estilizados y ahora es el momento de hacer que la forma añadiendo dinámica Una vez que nos enfocamos en los diferentes campos de entrada, tenemos que mostrar el encabezado adecuado. Para eso. Voy a usar JavaScript. Pasemos al archivo script.js e insertemos nuevos comentarios para la Sección cinco. En primer lugar, voy a seleccionar el encabezado Formulario y también todos los campos de entrada, incluyendo el área de texto. Vamos a insertar su nuevo formulario de comentarios. Entonces voy a seleccionar de encabezamiento. Así que vamos a crear una nueva variable Llámalo desde el encabezado, y luego seleccionar estos elementos usando el método selector de consultas. Entonces tenemos que seleccionar las entradas. Entonces voy a duplicar esta línea de código, luego cambiar el nombre. Necesitamos insumos de formulario. Además, necesitamos aquí query, selector, all method. Y luego vamos a especificar aquí el nombre de la clase, entrada de formulario de contacto. Muy bien. Después de eso, necesitamos recorrer los campos de entrada y Usar el evento llamado foco. Entonces voy a usar para cada método con entradas de formulario. Pasemos una función de devolución de llamada con la entrada de parámetros. Entonces necesitamos adjuntar al oyente de eventos inputs con el evento llamado focus Entonces una vez que enfocamos los campos de entrada, entonces tenemos que cambiar el contenido del texto del encabezado. Entonces necesitamos aquí el encabezado del formulario, el contenido del texto de punto. Entonces voy a abrir backticks. El texto comenzará con tu. Y entonces necesitamos el valor del atributo placeholder. Entonces voy a pasar aquí entradas, puntos, lugar, titular. Nos dará el valor del atributo placeholder. Entonces, si enfoco alguna de las entradas, los contenidos estándar del encabezamiento cambiarán. Todo funciona bien, pero necesitamos cambiar el contenido del encabezado con algún efecto de desvanecimiento. Una vez enfocamos las entradas, tenemos que ocultar el encabezado y mostrarlo después de algún tiempo, que debería ser igual a la duración del efecto de transición. Entonces, antes que nada, necesitamos ocultar el encabezado forma institucional encabezado estilo punto, opacidad de punto igual a cero Entonces necesitamos usar un método setTimeout. Coloquemos esta línea de código dentro de la función. Y también agregue aquí desde encabezado estilo punto, opacidad de punto igual a uno La duración de la transición va a ser de 0.3 s. así que voy a pasar aquí 300 milisegundos Y luego tenemos que usar transition en el archivo CSS con los valores opacidad 0.3 s. bien, así como considerando ahora tenemos un bonito efecto fade Lo único que tenemos que hacer es volver aquí el contenido predeterminado del encabezado una vez que desenfocamos el campo de entrada Para lograrlo, voy a usar otro evento llamado bluer, que ocurre una vez que desenfocamos los campos de entrada Sigamos adelante y dupliquemos este código. Entonces cambia el evento que necesitamos aquí, más azul. Y también necesitamos cambiar el contenido del rubro. Va a ser el contenido predeterminado. Hablemos. Entonces, si hago clic en cualquier lugar excepto los campos de entrada, entonces la constante cambiará y se mostrará la predeterminada. Bien, así que eso es todo sobre la primera parte de la sección de contenido A continuación, vamos a crear una presentación de diapositivas de los íconos de las redes sociales Entonces pasemos a la siguiente conferencia. 17. Crear diapositivas de enlaces de redes sociales: Bien, entonces en el último video que creamos y los clientes la primera parte de la sección de contacto Ahora tengo que encargarme de esta presentación de diapositivas de los íconos de las redes sociales Como puede ver, se colocan debajo de los campos de entrada. Es decir, en la parte inferior de la página, los íconos se mueven con algunos intervalos. El icono en el centro se está volviendo más ligero. En cuanto al resto de los iconos, son más oscuros por defecto. Bien, sigamos adelante y comencemos a crear el marcado HTML Insertemos nuevos comentarios para la presentación de diapositivas. Después abre la etiqueta div, que va a ser el envoltorio de esta presentación de diapositivas Entonces, en general, tendremos cinco íconos de redes sociales diferentes. Serán representados por las imágenes, y también serán envueltos por los elementos de enlace. Entonces voy a abrir la etiqueta de enlace con el enlace de presentación de diapositivas de clase Y entonces voy a pasar aquí en qué elementos. Vamos a especificar el atributo source. Necesitamos carpetas, imágenes, iconos sociales, y luego la presentación de imágenes, MG F1, PNG Entonces en general tendremos cinco íconos. Duplicemos el elemento de enlace cuatro veces, y luego cambiemos rápidamente los nombres de las imágenes. Bien, entonces aquí tenemos los íconos. En este momento son demasiado grandes y el diseño está en mal estado. Entonces, vamos a encargarnos de eso. Voy a colocar los iconos horizontales en fila. Entonces usemos Flexbox. Por lo que voy a insertar tus comentarios para la presentación de diapositivas A continuación, seleccione los elementos div envoltorios asignados a él. Flexión de pantalla. También, voy a definir su ancho. A continuación tenemos que seleccionar unos elementos de enlace y cambiar el ancho. Voy a establecer el ancho en 20%. Y finalmente, necesitamos definir el ancho de la imagen misma. Así que vamos a seleccionar la imagen. Establezca su ancho al 100%. En este caso, la imagen ocupará 100% del ancho de su elemento padre. Entonces ahora como pueden ver, tenemos aquí unos resultados mucho mejores. este momento los campos de entrada y los iconos se colocan uno al lado del otro para colocarlos uno encima del otro Entonces, sigamos adelante y cambiemos la dirección de flexión del elemento de sección. Tenemos que hacerlo columna. Bien, entonces ahora necesitamos algo de espacio entre las entradas y los iconos Vamos a usar margin top, el valor diez RAM, y también crear algo de espacio en los lados izquierdo y derecho usando padding. Vamos a ponerla a cero y a correr. Por último, voy a asignar a los iconos un relleno en los lados izquierdo y derecho. Se encogerá las imágenes. Así que vamos a establecer padding en 0.1 run. Bien, veamos sobre el CSS. Por ahora. Tenemos que hacer que la presentación de diapositivas funcione usando JavaScript. Entonces vamos al archivo script.js. En primer lugar, voy a insertar tus nuevos comentarios para la presentación de diapositivas Entonces tenemos que seleccionar el desarrollo del envoltorio. Vamos a crear una nueva variable. Voy a llamarlo slideshow y seleccionarlo usando el método QuerySelector Bien, entonces déjame decirte cómo vamos a hacer que funcione esta presentación de diapositivas Eliminaremos el primer icono de la lista, y lo volveremos a agregar a la lista como último icono. Eso lo haremos con algunos intervalos y también con algunas transiciones suaves. Vamos a todo sobre el proceso de esta presentación de diapositivas. Entonces como decíamos, necesitamos algunos intervalos y para eso voy a usar uno de los métodos incorporados llamado set interval. Se necesitan dos argumentos. La primera es una función de devolución de llamada, que se ejecuta después de cada intervalo En cuanto al segundo argumento va a ser la cantidad de la propia integral. Vamos a cambiar las imágenes después de 3 s. así que voy a pasar 3,000 milisegundos Bien, así como dijimos, tenemos que quitar el primer icono y después agregarlo a la lista como el último. Entonces, antes que nada, seleccionemos el primer icono. Voy a crear nueva variable. Vamos a llamarlo primer icono. Entonces necesitamos slideshow dot first element child Con el fin de obtener acceso al primer icono Ahora se selecciona el primer icono y para poder eliminarlo del desarrollo del wrapper, voy a usar uno de los métodos dome llamado child removed. Entonces necesitamos puntos de presentación de diapositivas, quitar niño. Y tenemos que precisar aquí por un segundo. Entonces como puedes ver, después de cada 3 s, los íconos están quitando. Como decíamos, tenemos que volver a agregarlos a la lista. Y para eso, voy a usar otro método domo llamado append child Por defecto agrega un elemento como último hijo. Entonces necesitamos slideshow dot append child. Y tenemos que especificar aquí de nuevo para su icono. Bien, así como pueden ver, la presentación de diapositivas, todas las obras, pero necesitamos agregarle un par de efectos diferentes Lo primero que voy a hacer es eliminar el primer icono sin problemas con un efecto de desvanecimiento. Para ello, voy a crear una nueva clase y CSS, llamémoslo desvanecido Por lo que esta clase incluirá dos celdas. Para desvanecer los elementos, necesitamos hacer que la opacidad y el ancho ambos sean cero. Y además de eso, tenemos que usar transición para el primer icono. Para seleccionar el primer icono, voy a usar f selector hijo. Entonces vamos a la transición del Instituto. Necesitamos ancho, la duración 0.5 s, y luego opacidad con la misma duración Bien, eso es todo sobre el CSS. Volvamos al archivo JavaScript. Ahora necesitamos agregar clase, se desvaneció. El primer icono. Necesitamos primer icono, punto, lista de clases, punto add. Y tenemos que especificar aquí el nombre de la clase se desvaneció. Entonces ahora el icono se está quitando pero sin ningún efecto de fundido porque efecto de transición se reúne algún tiempo, en realidad la mitad del segundo. Entonces tenemos que esperar la mitad de este segundo antes de eliminar el elemento de la lista. Para hacer eso, voy a usar una de las métricas llamadas setTimeout Tendremos dos argumentos. El primero va a ser una función de devolución de llamada. Insertemos aquí esas dos líneas. En cuanto a la cantidad de tiempo que voy a usar 500 milisegundos. Ahora el icono se está quitando con un bonito efecto de desvanecimiento. Ahora tenemos que volver a agregarlo a la lista de nuevo con efecto fade. Para hacer eso, tenemos que eliminar clase desvanecida de los elementos Así que necesitamos primero icono lista de clases de punto, punto eliminar, desvanecido Por lo que ahora se agrega el icono a la lista, pero sin efecto de desvanecimiento. Porque de nuevo, tenemos que esperar la mitad del segundo. Así que necesitamos usar de nuevo la función setTimeout con la misma cantidad de tiempo, 500 Entonces ahora todavía no tenemos aquí el efecto fade porque necesitamos definir la transición para el último icono. En realidad, necesitamos la misma transición que usamos para el primer icono. Entonces voy a agregar aquí solo el selector para el quinto icono. Entonces ahora mismo, todo funciona bien y podemos seguir adelante y encargarnos del segundo efecto. O sea, tenemos que hacer que los íconos sean más oscuros por defecto, y tenemos que hacerlos más claros una vez que ocupen el tercer lugar de la lista. En primer lugar, hagamos que todos los íconos sean más oscuros. Para eso, voy a usar una de las propiedades llamadas filtro con una función llamada brillo. Después de eso, voy a crear una nueva clase y CSS, que incluirá el mayor brillo. Y vamos a añadir esta clase para que sean elementos usando JavaScript. Llamemos a esta clase luz y se le asignó brillo de filtro con el valor 1.5. Entonces ahora necesitamos seleccionar el tercer icono y tenemos que agregarle una luz de clase recién creada. Vamos a crear una nueva variable, llamarla tercer icono. Para poder acceder al tercer icono, necesitamos presentación de diapositivas infantiles Y teníamos que especificar aquí el número tres. Entonces ahora hemos seleccionado el tercer icono y necesitamos agregar a su clase luz. Entonces necesitamos un tercer icono, punto, lista de clases. Puntos, luz. Ahora como puedes ver, el icono se vuelve más ligero, pero mantiene el brillo. No necesitamos eso. Tenemos que quitar de nuevo la luz de clase. Entonces necesitamos eliminarlo del hermano anterior del tercer icono porque una vez que se mueve, ya no es el tercer icono de la lista, sino el segundo Entonces necesitamos tercer icono punto, elementos anteriores, hermano, punto, lista de clases, punto, eliminar el nombre de clase luz Entonces ahora todo funciona bien. Solo necesitamos agregar una transición a este efecto. Así que vamos a seguir adelante y seleccionar el tercer icono usando f selector hijo asignado a su transición con el filtro de valores 0.5 s. así que ahora tenemos resultados mucho mejores. El icono se está volviendo más oscuro sin problemas. Pero como puedes verlo, necesitamos la transición una vez que el ícono se vuelve más ligero también. Entonces agreguemos aquí filtro de transición y la duración 1.5 s. bien, entonces ahora todo estuvo bien. Y antes de terminar esta conferencia, voy a hacer una cosa más. Si vuelvo a cargar la página que los cinco iconos serán más oscuros. En realidad, no necesitamos eso. Necesitamos hacer que el Icono de Comida sea más ligero por defecto. Y para ello, voy a agregar una clase mintió al tercer icono en el archivo HTML. Bien, eso es. Por último, hemos terminado. Hemos terminado de trabajar en la sección de contacto. Sigamos adelante. 18. Crear y personalizar la navegación: Bien, así que una vez que terminemos con la sección de contacto ahora, voy a crear y personalizar la navegación. Echemos un vistazo al proyecto terminado. Como puedes ver, tenemos aquí un par de elementos de navegación diferentes. Una vez que nos desplazamos hacia abajo por la página, entonces el menú de navegación se transformará en un icono que consta de dos líneas. Si hacemos clic en él, nuevamente, se mostrarán los elementos del menú. Después de eso, si me desplazo entonces los elementos se ocultarán, se mostrará el icono de Menú. Si me desplazo hacia arriba hasta la parte superior de la página, entonces los elementos del menú se mostrarán automáticamente. Además de eso, si hago clic en los elementos del menú, entonces navegaremos a las secciones adecuadas sin problemas. Bien, ahí es donde vamos a hacer en esta conferencia. Sigamos adelante y comencemos a crear un marcado HTML. Voy a insertar nuevos comentarios justo después del fondo de la página. Entonces voy a insertar aquí de nuevo nuevos comentarios para el ícono de Menú. Después abre la etiqueta div con el icono del menú de clase. Entonces como viste, el ícono del menú constará de dos líneas. Entonces voy a abrir la etiqueta div con la línea de iconos del menú de clase. Entonces vamos a duplicarlo. A continuación, voy a crear unos elementos de navegación. Vamos a insertar tus nuevos comentarios, navbar y off ahora funciona A continuación, abra el elemento de navegación HTML5 con una barra de navegación de clase. Entonces, en general, tendremos cinco elementos de navegación diferentes. Vamos a abrir la etiqueta de enlace con una siesta de clase o enlace con el contenido de inicio. Entonces voy a duplicar elementos de enlace cuatro veces y cambiar el contenido. El segundo ítem va a ser sobre mí. Entonces tendremos proyectos, servicios y contactos. Bien, así que eso es todo sobre el marcado HTML. Todo está preparado, pero ahora mismo nada es visible. Lo arreglaremos pronto. Empecemos a escribir CSS. En primer lugar, voy a mostrar y personalizar los elementos de navegación. Vamos a insertar nuevos comentarios, navegación y de navegación. Entonces necesitamos de nuevo comentarios para navbar. Seleccionemos elementos de navegación. En primer lugar, definir su posición se va a fijar. Y también voy a definir la propiedad superior. Hagámoslo 2.5 rem. Por lo que ahora es visible el ahora cuatro. Es decir, si selecciono todos los elementos, verás los elementos de navegación en la esquina superior izquierda de la página. Tenemos que colocarlos del lado correcto para eso. Voy a usar flexbox. En primer lugar, definamos este ancho. Voy a fijarlo al 100%. Luego use flexbox. Necesitamos display flex. Y para colocar los artículos en el lado derecho, justificamos el contenido con value flex end. Entonces como puedes ver, la barra de navegación se coloca en el lado derecho de la página Bien, vamos a crear algo de espacio en el lado derecho usando relleno. Voy a poner relleno a la derecha, rampa 23. Entonces vamos a ver sobre en arriba ahora mismo, continuación, voy a personalizar los enlaces. Así que vamos a seleccionar ahora por enlace. En primer lugar, voy a definir su tamaño de fuente. Hagámoslo 1.5 corrió. Entonces voy a hacer que el teléfono sea más audaz. Establezcamos el peso de la fuente en 700. También transforma el texto en mayúsculas y cambia el color, hazlo blanco A continuación, voy a crear algún espacio entre los ítems usando margen. Vamos a ponerlo a cero en la parte superior e inferior y 2.5 rem en los lados izquierdo y derecho. Bien, así como puedes ver, los elementos del menú están personalizados Si me desplazo hacia abajo en la página, notarás que los elementos terminan detrás de los elementos. Voy a arreglar eso usando la propiedad del índice Z. Vamos a establecerlo en 100. Y además de eso, voy a agregar un poco de efecto de sombra a los artículos. Usemos sombra de texto con los valores 0.3 RAM, 0.5 RAM y el color negro. Bien, eso es. Dentro de nuestra parte, hemos terminado. Ahora, voy a darle estilo al icono del menú. Al principio. Sigamos adelante y ocultemos el número usando opacidad cero y visibilidad oculta. Después inserte nuevos comentarios para el icono Menú y selecciónelo. En primer lugar, voy a hacer fija la posición del icono del menú Luego definamos este ancho y alto. Voy a configurar con 212 RAM. En cuanto a la altura, hagamos que sea siete RAM. Y además de eso, voy a usar algún color de fondo temporal. Vamos a ponerla en rojo. Entonces aquí tenemos el ícono del menú. Ahora mismo, se coloca en la esquina superior izquierda de la página, así que tenemos que cambiar su posición. Pongamos la cima a cero y la posición derecha a seis rampas. Bien, ahora es el momento de mostrar las líneas. Así que sigamos adelante y seleccionemos icono de menú, línea, ancho y alto definidos. Voy a establecer el ancho a cuatro RAM. En cuanto al híbrido va a ser 0.1 RAM. Y también cambia el color de fondo, hazlo blanco. Entonces aquí tenemos las líneas, pero como pueden ver, necesitamos algo de espacio entre ellas. Vamos a crear espacio usando el margen 0.5 rem y cero. Y también agreguemos a las líneas un poco de efecto de sombra. El uso de box-shadow dará valores 0.31, 0.5 RAM y el color negro Bien, después de eso, voy a colocar el icono en el centro de la caja Para eso, simplemente podemos usar un centro de clases. Y además de eso, necesitamos cambiar la dirección del flex. Vamos a configurarlo para llamarlos. Bien, entonces el ícono Menú está personalizado y podemos deshacernos del fondo rojo El icono está listo y ahora tenemos que hacer que la navegación funcione. Por defecto, voy a ocultar el icono del menú y volver a mostrar los elementos de navegación. Entonces necesitamos opacidad cero, visibilidad oculta. Y también tenemos que deshacernos de esas dos líneas a partir de aquí. Así que una vez que nos desplazamos hacia abajo en la página, tenemos que ocultar los elementos del menú y mostrar el icono del menú. Entonces necesitamos usar el evento scroll. Pasemos al archivo JavaScript y antes que nada, seleccionemos el icono del menú. Y luego Albert, al principio, vamos a Instituto comentarios, navegación, navegación. Después voy a seleccionar el icono del menú. Vamos a crear una nueva variable y llamarla icono de menú, y luego seleccionar los elementos usando el método QuerySelector Entonces voy a duplicar esta línea de código, cambié el nombre de la variable. Necesitamos, navbar. Y también voy a cambiar el nombre de la clase. Necesitamos de nuevo ahora para bien, después de eso, tenemos que adjuntar un oyente de eventos a los documentos con evento scroll Entonces como decíamos, tenemos que lograr ocultar y mostrar el icono de menú en scroll. Voy a crear nuevas clases y nuevo archivo CSS con nuevos estilos. Y luego los agregaremos a los elementos usando JavaScript. Así que vamos a crear una nueva clase, voy a llamarla show menu icon. Para mostrar el icono del menú, necesitamos opacidad uno y visibilidad visible en caso del número, necesitamos ocultarlo Entonces voy a crear una nueva clase. Vamos a llamarlo Ocultar ahora bar. En este caso necesitamos opacidad cero y visibilidad oculta. Bien, entonces las clases están listas, y ahora tenemos que agregarlas al ícono de Menú Y luego nuestro menú superior, puedo punto lista de clases, punto agregar. Y tenemos que especificar aquí el nombre de la clase, mostrar icono de menú. Y a continuación, en caso de un aeropuerto necesitamos ahora puerto punto, lista de clases, punto, agregar el nombre de la clase, altura navbar Entonces, si me desplazo hacia abajo en la página, entonces los elementos de navegación se ocultarán y se mostrará el ícono de Menú. Necesitamos hacer este cambio más suave usando una transición. Vamos a agregar al icono Menú transición con los valores opacidad y 0.2 s. En cuanto a la barra de navegación, voy a utilizar de nuevo transición opacidad 0.5 s y también visibilidad 0.5 s Entonces ahora si nos desplazamos hacia abajo, entonces los elementos se ocultarán y mostrarán con algunos efectos de desvanecimiento. Además de eso, voy a agregar otro efecto a la napa. Quiero moverlo al lado derecho una vez que se esconda. Así que vamos a insertar su transformación, traducir X con el valor diez RAM. Y también agregar una propiedad transform a la transición con la misma duración, 0.5 s. Ahora, creo que tenemos un efecto mucho mejor. Lo siguiente que vamos a hacer es volver a mostrar los elementos de navegación. Una vez nos desplazamos hacia arriba a la página. Para eso, necesitamos usar declaraciones If en las que tenemos que verificar si la página está arrastrada hacia arriba o no Entonces necesitamos scroll de punto de ventana. ¿Por qué? En realidad, esta propiedad devuelve el número en píxeles que la página está actualmente desplazada verticalmente. Entonces, si scroll por qué propiedad es igual a cero, significa que la página se llama hasta el borde superior. Y tenemos que mostrar los elementos del menú y ocultar el icono Menú. Entonces necesitamos el icono de menú punto, lista de clases, no eliminar el icono de menú de demostración de clase. Y en el caso de ahora lo que necesitamos ahora para lista de clases de punto, punto remove, height, number. ¿Bien? Si me desplazo hacia arriba los elementos auténticos del menú se mostrarán, el icono del menú se ocultará. Bien, así que casi terminamos con la navegación. Lo único que tenemos que hacer es mostrar los elementos de navegación. Así que una vez pulsamos el icono del menú, y también tenemos que conectar los elementos del menú para que sean secciones adecuadas. adelante y adjuntemos un oyente de eventos al ícono de Menú con un evento de clic Y entonces tenemos que pasar aquí esas dos líneas. Entonces, si hago clic en el icono de menú, no pasará nada porque ahora mismo el icono del menú se coloca detrás del círculo de la boca. Entonces necesitamos usar una propiedad z-index. Hagámoslo 100. Y además de eso, voy a cambiar el cursor. Hagámoslo señalar. Bien, así como pueden ver, todo funciona bien. Lo último que tendremos que hacer es conectar los elementos del menú a las secciones para que podamos navegar a la sección correctamente. Una vez que hacemos clic en los elementos. Para hacer eso, necesitamos usar la referencia h y los atributos id. Tenemos que especificar los h atributos de referencia de los enlaces para que coincidan con los valores de los atributos de las secciones. Sigamos adelante y especifiquemos los atributos de referencia h. Voy a pasar sus secciones con los números. Después de eso, tenemos que asignar a cada elemento de sección el atributo id con los valores similares. Necesitamos números de sección del uno al cinco. Entonces, si hago clic en los elementos del menú, entonces no pasará nada. Podríamos tener algo mal en CSS. Sigamos adelante y verifiquemos. Entonces, como pueden ver, he asignado la propiedad z-index al enlace de la barra de navegación y no al número en sí Entonces, sigamos adelante y arreglemos ese problema. Entonces ahora como puedes ver, todo funciona a la perfección. Y finalmente, dentro de la navegación, hemos terminado. A continuación, vamos a crear la barra de progreso. Entonces pasemos a la siguiente conferencia. 19. Barra de progreso de diseño - Parte 1: Muy bien, entonces en el último video, creamos y personalizamos la navegación, y ahora es el momento de cuidar la barra de progreso Echemos un vistazo al proyecto terminado. Entonces aquí tenemos la barra de progreso, que tiene la forma del círculo y su posición es fija. En el centro del círculo. Tenemos la flecha. Una vez que comencemos a desplazarnos hacia abajo la página aparecerá la línea roja, y ésta llenará el círculo. Cuando vamos todo el camino hacia abajo a la página. Una vez que nos desplazemos hacia abajo, entonces la flecha cambiará su dirección. Si empezamos a desplazarnos hacia arriba, entonces la línea roja comenzará a desaparecer. La barra de progreso también funciona con proyectos. O sea, si ampliamos alguno de los proyectos entonces la línea roja desaparecerá y la barra de progreso comenzará a trabajar con el proyecto. Es decir, se llenará una vez que nos desplazemos hacia abajo en la imagen. Si cerramos el proyecto entonces la barra de progreso seguirá funcionando acuerdo a la página. Bien, así que sigamos adelante y empecemos a trabajar en la barra de progreso Voy a crear el marcado HTML. Insertemos nuevos comentarios justo después del fondo de la página. Necesitamos barra de progreso y de barra de progreso. Luego abre una etiqueta de enlace con una barra de progreso de clase. Dentro del elemento link, necesitaremos cuatro elementos diferentes. Ahora mismo solo creémoslos y luego explicaremos y mostraremos por qué necesitamos esos elementos. Abramos una etiqueta div con el semicírculo de clase, luego duplicarlo tres veces. En realidad, no necesitamos tocar los segundos elementos div. El tercero va a ser una parte superior de círculo de cubo. En cuanto al último elemento div, va a ser un círculo de barras de progreso. Como los contenidos. Insertemos aquí una de las entidades HTML5. Necesitamos ampersand que línea discontinua 8595, punto y coma. Bien, eso es todo sobre el marcado HTML. Sigamos adelante y comencemos a escribir algo de CSS. Vamos a insertar nuevos comentarios en el archivo CSS, barra de progreso. Y de barra de progreso. A continuación, seleccione los elementos de enlace. Primero, voy a ponerla en posición fija. Después defina ancho y alto. Voy a hacer de ambos un tranvía. Y también cambia el color de fondo, hazlo blanco. Entonces, como puedes ver, la barra de progreso se coloca en la esquina superior izquierda de la página. Tenemos que cambiar su posición. Voy a definir las propiedades de abajo y derecha. Vamos a ponerlos a los dos a ocho asaltos. Bien, entonces la barra de progreso se posiciona y se coloca en la esquina inferior derecha A continuación, voy a hacerlo redondeado. Para eso necesitamos radio fronterizo con el valor 50 por ciento. Bien, eso es todo sobre el envoltorio. Sigamos adelante y cuidemos el círculo de barras de progreso. Seleccionemos estos elementos y definamos su ancho y alto. Voy a hacer ambos 7.8 RAM. Luego cambia el color de fondo. Voy a hacerlo negro. A continuación tenemos que hacerlo redondeado usando el radio fronterizo 50 por ciento También cambia el color, hazlo blanco, y luego aumenta el tamaño de fuente de la flecha. Hagámoslo en renta. Entonces este elemento se titula, pero tenemos que cuidar su posición. Se debe colocar en el centro de la envoltura. Y también tenemos que centrar la flecha dentro del círculo. En ambos casos, voy a usar un centro de clases. Ahora se considera, el problema está arreglado. Bien, así se prepara la barra de progreso. Tiene el defecto Luke, y ahora tenemos que hacer la obra. Como recuerdas, creamos un par de desarrollos diferentes. Los primeros desarrollos que tienen un semicírculo de clase, lograrán sentir la barra de progreso con un color rojo. Lo primero que voy a hacer es esconder por un tiempo el círculo negro para poder explicar y demostrar mejor las cosas. Entonces voy a asignar a mostrar ninguno. Muy bien, entonces el círculo negro está oculto, y ahora tenemos que encargarnos de los tres elementos div que nos ayudarán a que funcione una barra de progreso Seleccionemos los tres elementos simultáneamente. Quiero decir, necesitamos medio círculo con parte superior de medio círculo. Definamos la posición, hagámosla absoluta. También, necesitamos ser del 50 por ciento. Para la altura. Voy a hacerlo al 100% Y además de eso, voy a definir propiedades superiores e izquierdas. Hagamos que ambos sean cero. Entonces en estos momentos los elementos no son visibles. Y para arreglarlo, voy a asignar a cada uno de ellos un color de fondo temporal diferente. Seleccionemos semicírculo con el selector secundario enésimo. Entonces el color de fondo para el primer semicírculo va a ser verde. Entonces voy a duplicar este código. Cambiemos el color de fondo, hazlo azul. Y luego seleccione la parte superior de medio círculo. Haz que su fondo sea de color naranja. Bien, así que los tres elementos div se colocan uno encima del otro Por eso vemos aquí la naranja. Únicamente. Si comento esta línea fuera, entonces veremos aquí los elementos azules. Primero, voy a hacer que la barra de progreso funcione en hover para que sea más fácil de entender Y luego cambiaremos el hover y usaremos eventos scroll usando JavaScript. Necesitamos rotar el primer semicírculo 180 grados. cuanto al segundo semicírculo, tenemos que girarlo 360 grados porque tenemos que llenar todo el círculo. cuanto a la parte superior del medio círculo, en estos elementos anaranjados, tenemos que hacerla oculta. Entonces, seleccionemos barra de progreso con hover, seguido del primer semicírculo Como dije, tenemos que transformarlo con función Rotar con el valor 180 grados. Después duplique este código, cambie el nésimo número hijo Tenemos que pedir el valor de la función rotate. Necesitamos 360 grados, ¿verdad? Además de eso, necesitamos usar la transición para hacer el motor de las rotaciones Entonces necesitamos transformar 1 s. y también voy a usar la función de temporización de transición lineal. Vamos a copiar esta línea de código y pegarla. Para el segundo elemento. Tenemos que aumentar la duración. Hagámoslo 2 s. entonces ahora si pasamos el cursor sobre los elementos, entonces no pasará nada porque el mouse no nos permite flotar Eso habla que usando la propiedad z-index. Vamos a establecerlo en 200. Entonces ahora si vuelo el cursor entonces los elementos girarán. Ahora mismo vemos aquí solo el elemento azul porque el verde está debajo de él. Si publico el fondo azul aquí, entonces verás los elementos verdes. Entonces los elementos están rotando, pero de manera equivocada. Quiero decir que el origen de la transformación se establece en el centro por defecto. Pero en nuestro caso, tenemos que hacerlo bien al centro. Entonces usemos transformar origen con valores ¿verdad? Centro. En este caso, el origen de la transformación va a ser el centro del elemento, pero del lado derecho. Bien, así que una vez que pasamos el cursor sobre la barra de progreso, tenemos que ocultar estos elementos naranjas Entonces, seleccionemos la barra de progreso con hover, seguida de la parte superior del medio círculo, y fijemos la opacidad a cero Entonces ahora las alturas del elemento una vez que pasamos el cursor sobre la barra de progreso Pero en realidad se esconde demasiado pronto. Necesitamos ocultarlo una vez que el elemento verde termine de girar. Entonces necesitamos ocultarlo después de 1 s. Vamos a usar la transición. Con opacidad. La duración va a ser cero, y entonces necesitamos retardo 1 s. Bien, entonces ahora todo funciona bien Tenemos que cambiar los colores y también necesitamos hacer esos elementos a su alrededor. Los dos primeros desarrollos deben tener un color rojo. Me refiero al color B6 y a los ceros. En cuanto al tercer elemento, va a ser blanco porque la barra de progreso en sí tiene el fondo blanco. Entonces ahora necesitamos ocultar esas partes exteriores de los elementos. Para ello, vamos a usar desbordamiento oculto. Bien, ahora tenemos un resultado mucho mejor. Por último, tenemos que hacer visible el círculo negro. Vamos a quitar la pantalla ninguno. En este momento la parte del círculo es visible porque terminó detrás de los elementos div. Para arreglar eso, vamos a usar de nuevo, está la propiedad index con el valor 200. ¿Bien? Ahora bien, si pongo el cursor sobre la barra de progreso entonces se llenará muy bien con el color rojo Bien, así que te hemos mostrado cómo crear dicha barra de progreso usando CSS Y ahora te vamos a mostrar cómo podemos hacer que funcione en scroll usando JavaScript Primero, comentemos esos estilos. Me refiero a estas toallas en hover. Después ve al archivo JavaScript. En primer lugar, voy a seleccionar los elementos div. Quiero decir, para los elementos div que se colocan dentro de la barra de progreso. Vamos a crear nuevos comentarios para la barra de progreso. Entonces voy a crear una nueva variable, llamémosla medios círculos. Y seleccione los dos primeros elementos div que tengan los nombres de clase medio círculo. Voy a usar el selector de consultas todo el método. A continuación, dupliquemos esta línea de código. Cambiar el nombre de la variable, va a ser medio círculo superior. Además, necesitamos aquí la consulta, método selector y luego cambiar el nombre de la clase. Y por último, crear la variable para el último desarrollo, voy a llamarlo círculo de barras de progreso. Después selecciónelo usando el método QuerySelector. Y también especificar aquí el nombre de la clase, barra de progreso, círculo. Bien, a continuación, voy a crear una nueva función a la que se llamará en scroll Vamos a llamarlo barra de progreso f n. Entonces, como saben, una rotación completa es igual a 360 grados. Tenemos que convertir esta porción de multitud de la altura en grados. Antes de hacer eso, tenemos que definir un par de variables diferentes. El primero va a ser la altura de la ventana gráfica de página. Va a ser igual a los puntos de ventana en tu altura. El siguiente va a ser todo el alto de la página. Así que vamos a crear una nueva variable, llamarla altura de página. Para obtener toda la altura de la página, necesitamos documentos, Puntos, elementos del documento. Y luego tendremos que usar la propiedad llamada scroll height. Y la última variable va a ser estas porciones arrastradas de la página Debe ser igual al desplazamiento Y de la página de puntos de la ventana. Bien, entonces ahora todo está preparado para convertir la altura de esta llamada porción en los grados. Vamos a crear una nueva variable. Voy a llamarlo grado de porción desplazada. Ahora tenemos que usar la fórmula. Tenemos que dividirnos. Se llama porción, la diferencia de alturas de página y altura de puerto de vista de página. Y tenemos que multiplicar el resultado por 360. Entonces necesitamos se llama porción. Después la división. A continuación necesitamos la altura de la página menos la altura de la ventana gráfica de la página. Tenemos que multiplicarlo por 360. Bien, vamos a ver en la consola o esta variable nos da, vamos a pausar aquí el grado de porción desplazada En realidad, necesitamos llamar a la función en scroll. Ya hemos usado el evento scroll con navegación, así que llamemos a la función aquí. Inspeccionemos la página y cambiemos a la pestaña de la consola. Entonces una vez que nos desplazemos hacia abajo por la página y vayamos al final de la misma, obtendremos los valores adecuados 0-360 Bien, entonces ahora usando esta variable girará los semicírculos Entonces necesitamos mirar a través de ellos y rotar cada semicírculo. Y luego el primero y el segundo desarrollo dentro de la barra de progreso. Entonces necesitamos medio círculos, puntos para cada pasada aquí, la función de devolución de llamada con un parámetro EL, que significa elementos Ahora necesitamos rotar los elementos. Entonces, hagamos una pausa aquí. Transformación de punto estilo elemento punto. Debe ser igual a rotar y tener que pasarte las variables llamadas grado porción , seguidas de grados. Entonces ahora si nos desplazamos hacia abajo, entonces la barra de desplazamiento empezará a sentirse. Una vez que lleguemos a la mitad, entonces tenemos que detener el primer semicírculo. Y también necesitamos ocultar los terceros elementos div y luego la parte superior del medio círculo. Entonces necesitamos usar una sentencia if donde tenemos que definir se llama grado de porción mayor o igual a 180. Entonces, si esta condición es cierta, entonces tenemos que darle al primer semicírculo el valor fijo igual a 180 grados. Entonces te necesitamos medios círculos. Después el índice número cero, luego el estilo de transformación de punto. Y tendremos que hacer que el valor de la función rotate sea 180 grados. Y también necesitamos ocultar la parte superior del medio círculo. Así que vamos a insertar su opacidad de punto superior de medio círculo estilo punto igual a cero Entonces ahora una vez que nos desplazemos hacia abajo, entonces se llenará toda la barra de progreso. Pero tenemos aquí un pequeño tema. Una vez que nos desplazamos hacia arriba y el grado de porción desplazada se convertirá en menos de 180 grados. Tenemos que exhibir la parte superior trasera de medio círculo. Entonces necesitamos crear la sentencia else. Entonces vamos a agarrar esta línea de código, pegarla aquí, y cambiar el valor de la opacidad, convertirla en una Entonces ahora, como pueden ver, todo funciona bien. Tenemos que hacer un par de cosas más con la barra de progreso. Y para eso, Pasemos a la siguiente conferencia. 20. Barra de progreso de diseño - Parte 2: Bien, entonces en el último video, empezamos a trabajar en la barra de progreso Una vez que nos desplazemos hacia abajo de la página que la línea roja se sentirá en el círculo. Y ahora voy a agregar un evento click a la barra de progreso. Echemos un vistazo al proyecto terminado. Entonces, una vez que hagamos clic en la barra de progreso, luego nos desplazaremos hacia abajo por la página, sección por sección. Y una vez que vayamos hasta la parte inferior de la página, la flecha girará. En el siguiente clic, navegaremos hasta la parte superior de la página. Además, si bajo y luego empiezo a desplazarme hacia arriba, la flecha girará de nuevo. Y si hacemos clic en la barra de progreso, entonces navegaremos hasta la parte inferior de la página. ¿Verdad? Entonces eso es lo que vamos a hacer en esta conferencia. Ya hemos creado una función para la barra de progreso. Sigamos adelante y empecemos a escribir el código. Lo primero que tenemos que hacer es adjuntar un manejador de eventos click a la barra de progreso En este caso, vamos a usar el manejador de eventos onclick porque adjuntará el evento click solo una vez a los elementos Vamos a instituir nuevos comentarios. Barra de progreso, clic y de barra de progreso clic. A continuación, seleccione una barra de progreso. Voy a crear nueva variable. Y luego seleccionar los elementos utilizando el método selector de consultas. Después tenemos que adjuntar el manejador de eventos onclick a la barra de progreso Entonces lo primero que tenemos que hacer es evitar la acción predeterminada una vez que hacemos clic en la barra de progreso. Entonces voy a pasar aquí un objeto de evento. Y entonces tenemos que usar el método prevent default. Después de eso, tenemos que seleccionar todos los elementos de esta sección. Entonces vamos a seguir adelante y crear una nueva variable, llamarla secciones. Y luego seleccionar todos los elementos de la sección usando el selector de consultas método all. Voy a especificar aquí la sección de nombre de etiqueta. A continuación tenemos que definir las posiciones de los elementos de esta sección y almacenarlos en el array. Entonces voy a crear una nueva variable. Vamos a llamarlo posiciones de sección. En las posiciones de estas secciones, quiero decir, donde esta la sección comienza desde toda la página y no en la ventana gráfica Para obtener esta posición, necesitamos la suma de la porción desplazada y la distancia entre el borde superior de la ventana gráfica y la posición superior de esta sección misma Entonces como dijimos, tenemos que almacenar estos valores en la matriz. Y para eso, voy a usar uno de los métodos de ayuda de matriz llamado map. Nos permite ejecutar la función para cada elemento de la matriz y almacenar los valores en la matriz. Para poder utilizar el método map, tenemos que transformar la lista de nodos en una matriz. De lo contrario no va a funcionar. Entonces, para transformar la lista de nodos en una matriz, necesitamos usar array from method, y tenemos que pasar aquí secciones. Entonces necesitamos método llamado map, que toma un parámetro. Es la función de devolución de llamada, que a su vez toma un argumento, el elemento actual en la matriz Para obtener la posición de esta sección, necesitamos hacer el siguiente cálculo. Al principio necesitamos usar la palabra clave return. Ahora necesitamos la suma de la porción cuadrada y la distancia entre el borde superior de la ventana gráfica y la posición superior de esta acción Entonces, cuando se llama porción más sección punto obtener delimitación rect cliente Aquí. Propiedad llamada Top. En realidad la sintaxis ES6 nos permite escribir este código de manera más concisa Podemos deshacernos de las llaves rizadas. Y también podemos eliminar la palabra clave return. Bien, vamos a seguir adelante y correr a la consola esta variable y ver qué nos da. Inspeccionemos la página y cambiemos a la pestaña de la consola. Si hago clic en la barra de progreso, entonces no pasará nada. Pero si me desplazo hacia abajo y luego hago clic en los elementos, entonces obtendremos una matriz con cinco elementos. Cada uno de ellos representa la posición de esta sección en la página. Esos son los píxeles. Entonces no funcionó hasta que nos desplazamos hacia abajo por la página porque la función se llama solo cuando ocurre el evento scroll. Por lo tanto, tenemos que llamarlo una vez más fuera de los eventos de pergamino. Ahora, si hago clic, entonces obtendremos el resultado en la consola Bien, así que necesitamos usar esas posiciones para desplazarnos hacia abajo sección por sección onclick Al principio voy a usar esos valores manualmente para ver cómo funciona. Y entonces haremos que este proceso sea dinámico. Para desplazarme hacia abajo en la página, voy a usar uno de los métodos llamados scroll también. Y tenemos que adjuntar este método al objeto window. Este método toma dos argumentos. Esas serán las coordenadas. El primero es el píxel a lo largo del eje horizontal de los elementos también. El segundo es el píxel a lo largo del eje vertical de los elementos. En nuestro caso, el primer argumento debería ser cero porque vamos a desplazarnos vertical y horizontalmente como segundo argumento, voy a pasar uno de los valores de la matriz, digamos el tercero. Entonces, si hago clic en la barra de progreso, entonces navegaremos hasta la tercera sección. Bien, entonces como dijimos, en este caso, especificamos la posición manualmente y tenemos que definirla dinámicamente. Para eso, voy a usar un método de ayuda de matriz llamado find. Este método devuelve el valor del primer elemento de la matriz que satisface la condición Vamos a crear una nueva variable. Voy a llamarlo posición. Y luego tenemos que adjuntar método fino a las posiciones de sección. Se necesita. Un parámetro es la función de devolución de llamada. Y también necesitamos aquí otro parámetro, posición de la sección, y luego otra vez la palabra clave return. Entonces ahora tenemos que definir la condición que necesitamos saber, que se está convirtiendo en sección. Para desplazarse y navegar a esa sección. Para obtener esta información, tenemos que comparar la posición de esta sección con esta porción llamada. Entonces necesitamos la posición de Sección es mayor que la porción garabateada Una vez que esta condición sea cierta, entonces la sentencia dejará ejecutarse y obtendremos la posición de la sección que viene. Entonces en vez de este valor aquí, voy a pasar posición. Y además de eso, veamos en la consola qué nos da esta variable. Entonces, si hago clic en la barra de progreso, entonces nos desplazaremos hacia abajo la página sección por sección. También se ve aquí claramente cómo está cambiando la posición. Una vez que lleguemos a la parte inferior de la página y hagamos clic de nuevo, navegaremos hasta la parte superior de la página, pero la posición se volverá indefinida. Ocurrió porque no se encontró ningún otro caso donde la condición fuera cierta. En realidad, eso es lo que necesitamos. Necesitamos desplazarnos hacia arriba enClick. Pero sería raro que lo dejáramos así. Y será difícil de entender para otros desarrolladores, creo que sería mejor si escribimos alguna condición. Sigamos adelante y creamos una variable en la que voy a definir si llegamos al fondo de la página o no. Entonces voy a llamar a las variables llamadas Bu. Y debería ser igual a la porción de desplazamiento más la altura de la ventana gráfica de página igual a la altura de la página Entonces, si esta variable es verdadera, significa que llegamos al final de la página. Y por lo tanto tenemos que navegar hasta la parte superior de la página al hacer clic. Voy a crear una sentencia condicional usando operador ternario Necesitamos toro de desplazamiento. Entonces, si esto es cierto, entonces tenemos que navegar hasta la parte superior de la página. Por lo tanto, también necesitamos windows dot scroll, con los argumentos cero en ambos lugares. Y si esta condición es falsa, entonces necesitamos esta expresión aquí. Bien, así que todo funciona bien. A continuación tenemos que cambiar la dirección de la flecha. Una vez que llegamos al fondo de la página, entonces tenemos que rotarla. Para eso, voy a usar la declaración if else. En realidad eso es interferir nuevos comentarios, rotación de flecha y rotación de flecha fuera. Entonces necesitamos verificar el mismo valor booleano. Quiero decir scroll bu. Si es cierto, entonces tenemos que rotar la flecha. Escribamos aquí barra de progreso, círculo, punto estilo dot transform. Debe ser igual a rotar 180 grados. Y si es falso, entonces necesitamos la declaración else. Tomemos esta línea de código y cambiemos el valor de la función rotate que necesitamos aquí cero. Por último, usemos la transición con los valores transforman 0.5 s. Entonces, si llegué al final de la página, entonces la flecha girará. Si empiezo a desplazarme hacia arriba, entonces girará de nuevo. Bien, así que todo funciona perfectamente hasta ahora. Y ahora tenemos que hacer que la barra de progreso funcione una vez que abrimos los proyectos. Para ello, pasemos a la siguiente conferencia. 21. Barra de progreso de diseño - Parte 3: Bien, entonces en la última conferencia agregamos un evento click a la barra de progreso Podemos desplazarnos hacia abajo sección por sección. Una vez que hacemos clic en la barra de progreso, funciona perfectamente en la página, pero tenemos que hacerlo funcionar una vez que hacemos clic en el proyecto y expandimos la imagen. Antes de que nos encarguemos de eso, tenemos aquí un pequeño problema. Una vez que abrimos el proyecto, debemos ocultar el ícono de Menú. Voy a arreglar eso usando la propiedad z-index. Vamos a asignar al envoltorio de imagen del proyecto la propiedad z-index con un valor cientos Entonces ahora mismo la navegación si no lo hiciste, pero como puedes ver, el botón de cierre terminó detrás del proyecto. Para solucionarlo, voy a aumentar el valor de la propiedad z-index para el botón Ocultar del proyecto Hagámoslo 200. Bien, entonces ahora todo estuvo bien y podemos seguir trabajando en la barra de progreso Como sabemos, una vez que hacemos clic en el proyecto, creamos una imagen grande y es envoltorio. Entonces necesitamos verificar si el envoltorio de imagen está creado o no. Y entonces tenemos que hacer la barra de progreso en el trabajo en consecuencia. Necesitamos insertar aquí un nuevo parámetro. Vamos a llamarlo gran rapero IMG. Por defecto, voy a hacerlo falso. Entonces en este caso, decimos que estamos trabajando en la página porque el elemento no existe. Entonces tenemos que crear una sentencia if else en la que tenemos que definir si el envoltorio de imagen existe o no. Así que vamos a pasarte gran envoltorio IMG. Entonces si esta condición es cierta, entonces significa que el proyecto está abierto y tenemos que insertar aquí el código que funcionará en ese caso. Pero prefiero insertar aquí el código para la página. Así que simplemente podemos agregar aquí un operador NOT. Ahora tenemos que insertarte esas dos líneas. En realidad, voy a declarar esas variables fuera de la sentencia if. Usemos la palabra clave let. Voy a hacer que ambas variables sean iguales a cero. Entonces, como puedes ver, la barra de progreso funciona bien en la página. Ahora tenemos que crear una sentencia else donde tenemos que definir el código para el envoltorio de imagen. En realidad, podemos agarrar esas dos líneas. La altura de la página va a ser la altura de una imagen grande. Entonces necesitamos gran imagen rapero punto, primer elemento hijo, porque la imagen es la hija del envoltorio. Para esta porción de multitud va a ser grande, AMG, rapero punto scroll top Esta propiedad nos da el número de píxeles que el contenido de un elemento es garabateado verticalmente Bien, entonces ahora tenemos que llamar a una función. Una vez que hacemos clic en el proyecto, necesitamos barra de progreso f n. Y tenemos que pasar aquí el argumento big IMG wrapper Entonces ahora como puedes ver, se actualiza la barra de progreso. Pero una vez que nos desplazemos hacia abajo por el proyecto, no va a funcionar porque también tenemos que llamar a la función en esta convocatoria. Así que necesitamos gran envoltorio IMG, puntos en el manejador de eventos de desplazamiento Y entonces tenemos que llamar a la función. Entonces ahora, como pueden ver, funciona bien. Pero tenemos aquí un pequeño tema. Una vez que se llamó hacia abajo la imagen entonces la flecha no girará. Vamos a comprobar en la consola si la condición en la declaración if else es verdadera o falsa, voy a correr por la consola, scroll Bu. Entonces, si nos desplazamos hacia abajo y llegamos al final de las imágenes, más barato que el valor booleano volverá a ser falso, lo que significa que esta expresión no es igual a Vamos a revisarlos también en la consola. Voy a ejecutar la porción de desplazamiento más la altura de la ventana de visualización de la página y también la altura de la página Entonces, si nos desplazamos hacia abajo, entonces obtendremos una diferencia de dos píxeles entre esos valores. Eso es realmente un poco raro. Pero la razón es que la imagen es un elemento inline. Y en este caso tenemos que hacer que se bloquee. Bien, entonces ahora todo funciona bien. A continuación tenemos que hacer que la barra de progreso funcione una vez que hacemos clic en ella, porque ahora mismo sigue funcionando de acuerdo a la página. Necesitamos este similar if else declaraciones con el manejador de eventos onClick Pasemos aquí la condición no gran imagen rapero. Además, voy a agarrar todo este código y pegarlo dentro de la declaración if. Después de eso, necesitamos l declaraciones en las que tenemos que comprobar, de nuevo, scroll booleano Entonces, si es cierto, entonces necesitamos un gran rollo de punto rapero vacío también. Con ceros, significa que la imagen debe ser desplazada hacia arriba Y si esta condición es falsa, entonces tenemos que desplazarnos hacia abajo. Entonces necesitamos gran punto de rapero IMG, desplácese hasta. El primer argumento va a ser cero. En cuanto al segundo argumento, tenemos que escoger envoltorio de Angie, puntos, altura de desplazamiento Entonces ahora si hacemos clic en la barra de progreso, entonces la imagen se desplazará hacia abajo, pero sin ningún efecto suave. Para arreglar eso, tenemos que asignar a la imagen la propiedad envoltorio llamada scroll behavior would devaluar smooth Así que ahora como puedes ver, todo funciona a la perfección y ya casi terminamos con la barra de progreso. Lo único que tenemos que hacer es actualizar la barra de desplazamiento. Una vez que cerramos el proyecto. En realidad necesitamos llamar a la función cuando hacemos clic en el botón. Así que hagamos una pausa aquí barra de progreso f n. Bien, entonces ahora todo funciona bien Y en realidad con la barra de progreso, ya terminamos. Nos vemos en la próxima conferencia. 22. Refactorización de código: Bien, entonces en las conferencias anteriores, logramos trabajar la barra de progreso en la página Y también cuando abrimos el proyecto, antes de seguir adelante y empezar a trabajar en lo siguiente, voy a refactorizar nuestro código de barras de progreso actual y hacerlo más limpio Antes de eso, quiero arreglar un pequeño problema. Una vez que hacemos clic en cualquiera de los proyectos y los expandimos. Y entonces si inspeccionamos la página, la barra de progreso no funcionará correctamente. Seguirá funcionando de acuerdo a la página. El problema aparece una vez que cambiamos el tamaño de la ventana. Ocurre porque por alguna razón se dispara el evento scroll. Para probarlo, vamos a correr algo a la consola. Entonces como puedes ver, tenemos aquí scroll, lo que significa que se produce el evento scroll. Entonces, para solucionar ese problema, tenemos que tomar el código de la función en este evento de llamada. Después declarar una nueva función afuera. Voy a llamarlo scroll f n y pegar el código dentro de esa función. Después de eso, tenemos que llamar a esa función con el evento scroll. Entonces ahora mismo, aquí no se cambia nada. Todo funciona de la misma manera. Pero ahora usando la función, podemos eliminar eventos de scroll y tenemos que hacerlo una vez que hacemos clic en cualquiera de los proyectos. Entonces necesitamos aquí documento, punto eliminar oyente de eventos Después tenemos que especificar el evento scroll. Y también tenemos que pasar aquí la función que creamos, scroll f n Así que ahora cuando abramos el proyecto, la barra de progreso funcionará bien. No tendremos ningún problema una vez que cambiemos el tamaño de la ventana. Pero si cerramos el proyecto, entonces la barra de progreso ya no funcionará. Entonces para arreglar eso, tenemos que adjuntar el evento scroll al documento de nuevo cuando cerremos el proyecto. Entonces necesitamos aquí document.write en el oyente de eventos. Después evento de desplazamiento. Y la función se llama f n Así que ahora si comprobamos, verás que todo funciona bien. Y ahora podemos empezar a refactorizar nuestro código. Entonces en estos momentos tenemos una gran función en la que ponemos todo lo referente a la barra de progreso. Entonces lo primero que voy a hacer es agarrar un manejador de eventos onclick, sacarlo de la función A continuación, voy a declarar un par de variables fuera de la función. Me gustan las variables que son comunes para la función y el manejador de eventos onclick Entonces coloquemos la porción de desplazamiento fuera de la función. Además, necesitamos declarar la variable scroll bull. Pongámoslo a falso. A continuación, tenemos que deshacernos de la palabra clave const desde aquí. Y además de eso, necesitamos declarar otra variable, image wrapper. Y tenemos que fijarlo en falso. ¿Bien? Entonces como puedes ver, tenemos aquí un parámetro big IMG wrapper igual a false por defecto Voy a deshacerme de él. Y en lugar de eso, necesitamos que el envoltorio de imagen sea igual al envoltorio IMG grande Y ahora tenemos que cambiar por todas partes el gran envoltorio Andrew en rapero de imagen. Bien, por último, podemos cambiar el manejador de eventos onclick en el oyente de eventos click Entonces necesitamos agregar un oyente de eventos. No tengo que deshacerme de este signo igual. Bien, entonces ahora si comprobamos, entonces todo va a funcionar a la perfección Pero ahora tenemos un código mucho más limpio que el anterior. Bien, pasemos a la siguiente conferencia. 23. Elementos pegajosos: Bien, una vez que terminamos con la barra de progreso, ahora tenemos que seguir adelante y comenzar a trabajar en la siguiente característica de nuestro proyecto, que yo llamo un elemento pegajoso Echemos un vistazo al proyecto terminado. Si coloco el cursor sobre el icono del menú o la barra de progreso, entonces esos elementos se pegarán al cursor Pero una vez que movemos el cursor lejos de la posición predeterminada del elemento, los elementos volverán a colocar a sus propias posiciones. Creo que es un efecto agradable y genial. Así que sigamos adelante y comencemos. Este efecto debería ocurrir en eventos de movimiento del ratón. Al principio, el código va a ser escrito aquí, y luego crearemos una función, y llamaremos a la función aquí. Vamos a insertar nuevos comentarios. Elementos pegajosos. De elementos pegajosos. Tenemos que crear un efecto. Una vez que pasemos el cursor sobre el icono del menú y la barra de progreso, voy a asignar ambos elementos, clases adicionales Pegajoso. A continuación, tenemos que averiguar sobre qué elemento estamos rondando. Para eso podemos usar una de las funciones incorporadas llamadas elements from points. Voy a crear una nueva variable. Llamémoslo elementos sobre E L. Debe ser igual a documentar elementos de punto a partir de puntos Esta función tomará dos argumentos, x e y. Veamos en la consola qué nos da esta variable. Vamos a ejecutar elementos rondados. Entonces, si pongo el cursor sobre alguno de los elementos de la página, entonces los obtendremos en la consola ¿Correcto? Ahora tenemos que comprobar si un elemento de Harvard contiene cluster Tiki o no Entonces necesitamos usar una sentencia if en la que necesitamos la siguiente condición. Elementos rondados, puntos, lista de clases, punto contiene. Y tenemos que especificar aquí clase pegajosa. Además, corramos a la consola. Pegajoso. Entonces ahora si pongo el cursor sobre el icono del menú, nos pondremos pegajosos en la consola Pero si pongo el cursor sobre la barra de progreso, no nos pondremos pegajosos en la consola Sucede porque el círculo de la barra de progreso cubre la propia barra de progreso. Y no podemos pasar el cursor sobre la barra de progreso. Para solucionar ese problema, podemos deshabilitar los eventos de puntero para el círculo de la barra de progreso. Vamos a establecer eventos de puntero en num. Por cierto, eliminemos estos códigos comentados de aquí. Entonces ahora si pongo el cursor sobre la barra de progreso, entonces nos pondremos pegajosos en la constante Bien, así que todo funciona bien hasta ahora, lo siguiente que tenemos que hacer es almacenar las posiciones de los elementos en la matriz Entonces voy a crear una nueva variable fuera de los eventos de movimiento del mouse. Vamos a llamarlo posición de elemento flotante y establecerlo en una matriz vacía Entonces nuevamente, almacenaremos aquí la posición de los elementos. Estoy en las coordenadas superior e izquierda usando las propiedades offset top y offset left. En primer lugar, tenemos que comprobar si el array está vacío o no. Si está vacío, entonces tenemos que almacenar las posiciones. Voy a usar. Si declaraciones en las que voy a comprobar si la matriz está vacía o no. Entonces necesitamos comparar la longitud del punto de posición del elemento Harvard con uno. Si esta condición es verdadera, significa que una matriz no contiene ningún elemento y tenemos que almacenar las posiciones en la matriz. Así que necesitamos que la posición del elemento flotante sea igual a una matriz con los siguientes elementos Necesitamos elemento flotante de set top y luego Harvard elementos de set Bien, sigamos adelante y probemos si funciona bien. Y una vez que corres a la consola, sin embargo, la posición del elemento. Entonces, si pongo el cursor sobre el icono del menú, entonces obtendremos sus posiciones en la matriz Ahora, si pasamos el cursor sobre la barra de progreso, entonces volveremos a obtener las posiciones del icono del menú Porque la condición en la sentencia if es falsa No actualiza las posiciones en la matriz. Si vuelvo a cargar la página, la matriz quedará vacía. Y si pongo el cursor sobre la barra de progreso, entonces llegaremos aquí las posiciones de la barra de progreso Bien, entonces ahora necesitamos cambiar las posiciones superior e izquierda de los elementos suspendidos. Entonces necesitamos aquí elementos Harvard, estilo punto, texto CSS punto. Entonces voy a abrir las garrapatas de nuevo. La posición superior va a ser y. con píxeles. En cuanto a la posición izquierda, va a ser x. ¿Bien Entonces ahora si pongo el cursor sobre los elementos, se moverá, pero no del todo correctamente No es pegajoso. Para arreglar eso, tenemos que mover los elementos un -50% hacia arriba y hacia el lado izquierdo Para eso, voy a usar Transform Translate con -50 por ciento dos veces Ahora se cambian las posiciones del icono del menú, por lo que necesitamos ajustar las posiciones superior y derecha. En realidad, movimos los elementos en un 50 por ciento. Entonces significa que tenemos que disminuir las posiciones en un 50% del ancho y alto. La posición superior va a ser 3.5 RAM. En cuanto a la posición correcta, va a ser cero. Ahora, como puedes ver, el elemento se posiciona correctamente, y también una vez que pasemos el cursor sobre él, se volverá pegajoso Ahora mismo se mueve en toda la página, pero lo arreglaremos pronto. Hagamos lo mismo con la barra de progreso también. Necesitamos transformar, traducir con los valores -50 por ciento dos veces Y también tenemos que cambiar las posiciones inferior y derecha. Necesitamos RAM completa para ambas propiedades. Ahora bien, si pongo el cursor sobre la barra de progreso, todavía no funcionará correctamente Parece que desde el lado izquierdo, el mundo entero no sucede. El motivo es que tenemos que desactivar los eventos de puntero para los semicírculos. Entonces usemos eventos de puntero. Ninguno. Bien, entonces ahora todo se ve bien. A continuación hemos definido hasta dónde queremos que se mueva el elemento. Va a ser de 100 pixeles en los cuatro lados. Entonces necesitamos crear una declaración if en la que tengamos que definir las posiciones. Como saben, almacenamos las posiciones predeterminadas en la matriz. El primer elemento de la matriz es la posición de los elementos suspendidos Me refiero a la parte superior compensada. Entonces necesitamos sumar y restar 100 píxeles a disposición. Y hay que compararlo con la posición superior del elemento Harvard. Entonces, sigamos adelante y creamos una declaración if en la que necesitamos la siguiente condición. Cuando colocaba elementos, la parte superior de desplazamiento de punto es menor que la posición del elemento flotante con el primer elemento -100 píxeles Entonces, si esta condición es verdadera, entonces tenemos que volver el elemento a su posición predeterminada. Entonces necesitamos elementos rondados. Estilo de punto, punto css texto igual a una cadena vacía. Y también tenemos que despejar la matriz. Posición cernida. Debe ser igual a un corchetes vacíos. Entonces ahora si empiezo a mover los elementos hacia arriba después de 100 píxeles, se moverá de nuevo a su posición predeterminada. Bien, entonces en este caso solo hacemos que el efecto funcione solo en una dirección Necesitamos las cuatro direcciones. Vamos a usar aquí operador lógico OR. Entonces voy a copiar esta condición. Ahora tenemos que sumar 100 pixeles. Y también necesitamos cambiar el signo menos que en mayor que. Ahora el efecto funciona una vez que bajamos el cursor. A continuación, tenemos que cuidar los lados izquierdo y derecho. Vamos a utilizar de nuevo operador lógico OR y pegar la condición. En el caso de las direcciones izquierda y derecha, necesitamos verificar el segundo elemento de la matriz, quiero decir desplazamiento a la izquierda. Entonces tenemos que cambiar el número de índice. Va a ser uno. También necesitamos compensar a la izquierda. Ahora el efecto funciona en el lado izquierdo. Y por último, necesitamos la dirección correcta. Entonces, sigamos adelante y copiemos esta condición. Necesitamos aquí el signo más. Y también el signo mayor que. Entonces, como puedes ver, elemento pegajoso funciona bien en los cuatro lados. Así que casi terminamos con este efecto. Solo tenemos que arreglar un pequeño problema. Si muevo, por ejemplo, el icono Menú hacia arriba, entonces una vez que el cursor sale de la página, los elementos no obtendrán su posición predeterminada. Ocurre porque en este caso la distancia que se cubre es menor a 100 píxeles y no se ejecuta la sentencia if. Entonces necesitamos asignar a los elementos la posición predeterminada una vez que el mouse abandona el elemento. Entonces necesitamos elementos de Harvard. Los puntos en el ratón dejan. Entonces tenemos que funcionar. Vamos a agarrar esas dos líneas y pegarlas aquí. Bien, así que ahora todo funciona a la perfección y tenemos aquí un efecto agradable y genial Antes de terminar esta conferencia, voy a cambiar ligeramente el código para que sea más limpio. Vamos a crear una nueva función fuera de los eventos de movimiento del ratón. Voy a llamar a esta función elementos pegajosos. Tomará tres parámetros. Necesitamos coordenadas x e y y también todo el elemento. Entonces voy a agarrar toda la declaración if de aquí. Vamos a pegarlo dentro de la función. En realidad, voy a cambiar esta declaración if aquí. Vamos a usar lógica y operador. Después de eso, llamemos a esta función dentro del mouse move events con los argumentos x, y, y elemento Harvard. Entonces, como puedes ver, todo funciona a la perfección. Por último, ya terminamos. ¿Nos vemos en la próxima conferencia? 24. Efecto de transformación de círculo de ratón: Bien, así que es hora de agregar otra característica a nuestro proyecto, que creo que es un efecto agradable y genial Si vuelo el cursor sobre algunos elementos como los elementos de navegación o los proyectos, también los servicios y los campos de entrada Entonces el círculo bucal se transformará en la forma del elemento Harvard. Y luego una vez que el ratón deje los elementos, va a recuperar su forma predeterminada, me refiero al círculo. Bien, así que sigamos adelante y agreguemos estos efectos de los proyectos Voy a insertar nuevos comentarios en el archivo Java justo después de los elementos pegajosos. Insertemos la transformación del círculo del ratón y de la transformación del círculo de la boca. Y luego crear una nueva función. Voy a llamarlo mouse circle transform. Tomará un parámetro y va a ser todo el elemento. Entonces, antes que nada, voy a crear este efecto en los proyectos. Y luego al final del día, agregaremos esta característica a otros elementos también. Voy a agregar nuevas clases a todos los proyectos como lo hicimos en el caso de los elementos pegajosos. Entonces, sigamos adelante y agreguemos una nueva clase a los envoltorios de las imágenes Voy a llamar a esta clase puntero Enter. A continuación tenemos que definir si el hover sucede sobre el elemento que tiene estas clases recién agregadas Así que necesitamos usar una sentencia if en la que tenemos que definir si el elemento flotaba contiene el puntero de clase enter Así que necesitamos elementos rondados lista de clases de punto. Que contiene tendrá especificar aquí el nombre de la clase, puntero enter. Probemos si funciona bien. Voy a ejecutar algo a la consola. Digamos puntero Enter. Y luego llamar a esta función en mouse. Mover eventos. Bien, sigamos adelante e inspeccionemos la página y cambiemos a la pestaña de la consola Entonces, si pongo el cursor sobre los proyectos, entonces obtendremos un puntero enter en la consola Pero si vuelo el cursor sobre cualquier otro elemento, entonces no pasará nada Bien, así que todo funciona bien hasta ahora. A continuación tenemos que empezar a trabajar en cambiar la forma del círculo bucal. Una vez que encontramos los elementos necesarios, entonces tenemos que usar el manejador de eventos de movimiento del mouse Y al mover el ratón, tenemos que cambiar la forma del círculo. Necesitamos. En movimiento del ratón con elementos de Harvard. A continuación tenemos que definir un par de estilos CSS diferentes para el círculo del ratón. Entonces necesitamos mouse circle dot style, dot css texts. Empecemos por el ancho y la altura. En realidad, para obtener el ancho de los elementos Hubbard, voy a usar un método llamado get delimitador Y tenemos que adjuntarlo a los elementos de Harvard. A continuación necesitamos aquí la propiedad llamada con con píxeles. De la misma manera, definamos la altura. Después de eso, voy a definir las propiedades superior e izquierda. Podemos duplicar esta línea de código y cambiar la altura a la parte superior. Y luego lo mismo necesitamos para la posición izquierda también. Entonces en este momento, si me pongo el cursor sobre los proyectos, entonces no pasará nada porque ahora la función más circular está funcionando Así que una vez que pasamos el cursor sobre los elementos que tienen el puntero de clase enter, tenemos que dejar de ejecutar el código en la función de círculo de boca Y voy a hacer eso usando un valor booleano. Sigamos adelante y creamos una nueva variable. Voy a llamarlo ratón, toro en círculo. Y voy a ponerla en verdad. Entonces necesitamos crear una sentencia if dentro de la función de círculo de boca, donde tenemos que verificar si el mouse recoup Boolean es verdadero Entonces si esta condición es cierta, entonces tenemos que ejecutar esta línea de código. En realidad, voy a usar aquí un operador lógico y en lugar de la sentencia if Después de eso, tenemos que cambiar el valor de esta variable booleana dentro de esta variable booleana dentro la función de transformación de círculo de boca Y tenemos que hacerlo falso. Entonces ahora mismo sigue, no pasa nada porque por defecto, círculo del ratón tiene opacidad a cero Y dejamos de ejecutar el código donde tiene el de opacidad Entonces necesitamos instituir una nueva opacidad. Entonces ahora el código está funcionando, pero claro, eso no es lo que queremos. El círculo del ratón por defecto tiene transform translate con -50 por ciento En realidad, no necesitamos eso. Tenemos que hacer cero los valores de la función translate. Entonces necesitamos transformar traducir y necesitamos cero para ambas direcciones. Ahora se cambia la posición del círculo. A continuación, voy a detener la animación porque como dije, el círculo se está animando Entonces necesitamos aquí animación, ninguna. Entonces ahora el círculo ya no anima y además obtiene la anchura y altura de los elementos flotados A continuación, tenemos que definir el radio del borde. Para eso, voy a usar uno de los métodos llamados consigue estilo computado. Tenemos que especificar aquí los elementos que se ciernen. Y entonces tenemos que usar la propiedad llamada border-radius. Así que ahora si vuelo el cursor sobre el proyecto, entonces el círculo del ratón obtendrá la forma de los elementos flotados En realidad todo funciona bien en Google Chrome. Pero si reviso el proyecto en Mozilla Firefox, entonces verás que por alguna razón el radio fronterizo no funciona. Comprobemos en la consola lo que border-radius nos da en ambos navegadores Voy a correr por la consola. Para el radio. En Google Chrome, estamos obteniendo cinco píxeles. Pero en Mozilla Firefox, estamos obteniendo una cadena vacía. Eso es un pequeño problema para Mozilla Firefox. Y la solución que pensé es cambiar el radio del borde al radio fronterizo de cualquiera de las esquinas. Porque todos los elementos sobre los que vamos a utilizar este hecho tienen el mismo radio fronterizo en los cuatro lados Entonces voy a usar aquí, digamos frontera, abajo, izquierda, radio. Sigamos adelante y comprobemos si esto funciona bien ambos navegadores. Entonces como puedes ver, todo funciona bien. Bien, Antes de seguir adelante, voy a arreglar un tema político Si empiezo a pasar el cursor desde la parte inferior del proyecto, entonces la forma del hueso circular cambia porque ahora mismo estamos rondando sobre la imagen Por lo tanto, tenemos que deshabilitar los eventos de puntero para las imágenes del proyecto. Así que vamos a asignar al proyecto eventos puntero de imagen. Ninguno. Bien, entonces ahora todo estaba bien. A continuación voy a agregar una transición a este efecto. Necesitamos aquí un par de propiedades diferentes. Empecemos con, con, voy a usar tu duración de transición, 0.5 s. A continuación tenemos altura que las posiciones superior e izquierda. Luego viene transformar. Y por último, para el radio. Bien, entonces ahora como pueden ver, tenemos un resultado mucho mejor. Pero aún así tenemos que escoger algunos temas. Una vez que el ratón deja los elementos, tenemos que volver a cambiar la forma del círculo. Para eso, tenemos que usar mouse live event handler. Tenemos que adjuntarlo al elemento Harvard. Quiere que el ratón viviera los elementos, tenemos que transformar el valor del círculo booleano booleano a verdadero Ahora bien, si el ratón sale del proyecto entonces obtendrá la forma predeterminada de equipaje. A continuación, voy a arreglar otro problema. Si desplazamos la página que el círculo del ratón y los elementos no coincidirán. Entonces necesitamos usar el manejador de eventos scroll y tenemos que adjuntarlo al documento Una vez que nos desplazamos por la página que la posición superior del círculo del ratón y los elementos de Harvard deben coincidir. Pero debería suceder una vez que el valor booleano sea falso, lo que significa que estamos pasando el cursor sobre el elemento que tiene respuesta de puntero de clase Entonces necesitamos aquí una declaración if. Y como condición no necesitamos ratón círculo booleano. Entonces, si esta condición es cierta, entonces las posiciones superiores del círculo bucal y los elementos flotados deberían coincidir Entonces necesitamos mouse circle dot, style, dot top igual a los elementos de Harvard. No conseguir delimitación. Cliente rect dot top con píxeles. Bien, entonces ahora el problema está arreglado. A continuación, voy a encargarme de otro tema. Si hago clic en el proyecto y expandido, la forma del proyecto seguirá mostrándose. Entonces tenemos que deshacernos de él al hacer clic. Tenemos que hacer que la opacidad del mouse recuerde cero una vez que hagamos clic en el proyecto Entonces necesitamos insertar tu círculo de boca estilo punto, punto, opacidad igual a cero Bien, entonces ahora todo estaba bien. Y lo último que tenemos que hacer es crear este efecto con otros elementos también. Voy a usar de nuevo puntero de clase Enter. Sigamos adelante y agréguela a los elementos de navegación. A continuación, necesitamos agregar esta copa a los servicios. Y por último, agreguemos la clase a los campos de entrada y al botón de enviar. Comprobemos este efecto con los elementos de navegación. Entonces como puedes ver, todo funciona bien. Entonces voy a comprobarlo con los servicios. Como pueden ver, tenemos aquí un pequeño problema, en realidad el mismo tema que tuvimos con los proyectos. Los servicios incluyen los elementos span y tenemos dos eventos puntero deshabilitados para los spans Así que vamos a asignarles eventos puntero, ninguno. Entonces ahora el problema está arreglado. En cuanto a los campos de entrada, todo funciona bien. Bien, eso es. Hemos terminado de trabajar en la función. A continuación, tenemos que empezar a hacer que el proyecto sea receptivo a diferentes tamaños de pantalla. Entonces, sigamos adelante. 25. Hacer que sea sensible al proyecto - Parte 1: Bien, entonces hemos terminado de construir nuestros proyectos. Estoy en todas las secciones se crean. Y ahora, como ya dijimos, tenemos que hacer que nuestro proyecto responda a diferentes tamaños de pantalla. El proyecto está construido sobre un tamaño de pantalla extra grande. Tamaño de pantalla con 1920 píxeles de ancho y 1080 píxeles de alto. Y tenemos que hacerlo receptivo a un tamaño de pantalla más pequeño. A lo largo de esta parte, estaremos usando media queries CSS. Antes de comenzar a escribir el código, inspeccionemos la página. Cambie al modo de respuesta y verifique el proyecto en diferentes tamaños de pantalla. Entonces, como puedes ver, también se ve bien en tamaños de pantalla más pequeños. Bien. Ya he preparado diferentes puntos de quiebre sobre los que vamos a hacer algunos cambios. Entonces no voy a perder el tiempo en encontrarlos. En general, hay que hacer los cambios y establecer el punto de ruptura donde el proyecto los necesite. Creo que esa es la mejor manera hacer responsable tu proyecto. Entonces estamos listos para comenzar. Vamos a insertar nuevos comentarios en este archivo CSS para responsive. Entonces el primer punto de interrupción en el que vamos a hacer algunos cambios va a ser de 1.500 píxeles En los puntos de interrupción. Voy a hacer los círculos más pequeños en el rellano. Así que vamos a seguir adelante y crear una consulta de medios CSS. A continuación, especifique el ancho máximo como 1,500 píxeles. Después voy a seleccionar círculo y establecer ancho y alto, ambos a 15 rampa. Además de eso, voy a hacer este círculo principal más pequeño también. Así que sigamos adelante y lo seleccionemos y fijemos su ancho y alto, ambos a 45. Renta. Además, necesitamos disminuir el tamaño del círculo principal una vez que flotemos sobre él. Así que sigamos adelante y seleccionemos círculo principal con hover. Y luego hacer ancho y alto. 55 rampa. Además de eso, voy a cambiar el tamaño de la propia imagen. Así que vamos a seleccionar el círculo principal, IMG, y establecer la anchura y la altura Ambos al 160%. Bien, así que eso es todo respecto a la primera sección, sigamos adelante y tomemos un año de descuento en el texto Acerca de mí Voy a disminuir el tamaño de fuente del texto. Entonces, seleccionemos el texto Acerca de mí, seguido de los elementos span y fijemos el tamaño de fuente en 11 renta. Eso es sobre la segunda sección. A continuación viene la sección del proyecto, pero no necesitamos tocarla ahora mismo. Lo siguiente que tenemos que hacer es aumentar el espacio entre los servicios y la sección de contacto. Así que sigamos adelante y seleccionemos la sección cuatro y fijemos el margen inferior para girar la rampa. Además, necesitamos disminuir el tamaño de fuente del servicio Batson y los textos del servicio también Así que sigamos adelante y seleccionemos el servicio btn con span. Hacer su tamaño de fuente nueve rem. Y también seleccionar textos de servicio y establecer su tamaño de fuente para llamar a RAM. Bien, así que eso es todo respecto a este punto de ruptura, todo se ve bien Podemos seguir adelante y encontrar el siguiente punto de interrupción, que va a ser de 1,350 píxeles Vamos a crear una nueva consulta de medios CSS y especificar max-width como 1.350 En los puntos de interrupción, voy a disminuir el tamaño del Batson principal Selecciona btn principal y establece su ancho y alto, ambos en 12.5 g Bien, después de eso, voy a ocultar los círculos en absoluto. después de eso, voy a ocultar los círculos en absoluto Así que vamos a seleccionar círculo y asignado a él. No mostrar ninguno. Bien, así como pueden ver, los círculos están ocultos A continuación, voy a cambiar las posiciones de la barra de progreso porque como pueden ver, cubre parcialmente los textos. Entonces, sigamos adelante y seleccionemos la barra de progreso. Voy a establecer su posición correcta en una RAM. En cuanto a la posición inferior, vamos a hacerla cero. Bien, Así se posiciona la barra de progreso y lo último que tendremos que hacer en disminuye lo último que tendremos que hacer en ese punto de interrupción El tamaño de fuente del texto Acerca de mí Porque todas las demás secciones se ven bien. Entonces, seleccionemos el texto Acerca de mí, seguido de los elementos span, y establecemos el tamaño de fuente en diez rampas. Bien, eso es todo sobre este punto de ruptura. Sigamos adelante y encontremos el siguiente, que será de 1,150 píxeles Así que vamos a seguir adelante y crear una nueva consulta de medios CSS con el ancho máximo de 1.150 Entonces lo primero que voy a hacer es disminuir el tamaño de fuente del elemento HTML. Afectará los tamaños de todos los elementos. Así que vamos a seguir adelante y establecer tamaño de fuente para el elemento HTML en 55%. Así que se puede ver que todos los elementos se hicieron más pequeños. Y con la línea de código, tenemos un resultado mucho mejor. A continuación voy a ocultar el ratón y el punto del ratón en absoluto, porque en tamaños de pantalla más pequeños ya no tenemos ratón. Así que vamos a seleccionar ambos elementos, círculo del ratón y el punto del ratón. Y asignado a ellos mostrar ninguno. Bien, después de eso, vamos a encargarnos de los elementos de navegación Voy a disminuir el espacio entre ellos. Así que vamos a seleccionar el enlace de la barra de navegación y le asignamos margen con los valores cero en la parte superior e inferior y dos RAM en los lados izquierdo y derecho Bien, a continuación, vamos a disminuir el tamaño del círculo principal. Y también voy a disminuir su tamaño al flotar también. Entonces, seleccionemos el círculo principal y fijemos el ancho y la altura, ambos a cuatro para Ram. Entonces voy a duplicar este código por aquí, flotar. Y también cambiar los valores que necesitamos aquí. 45 correr. Bien, eso es lo de la primera sección. A continuación, voy a disminuir el tamaño del texto anterior me. Así que vamos a seleccionar estos elementos, seguido de span y establecer el tamaño de la fuente en 7.5 round. Bien, así como puedes ver, el texto se vuelve más pequeño. Se ve bien. A continuación, voy a encargarme del proyecto. decir, una vez que lo expandimos, se puede ver que tenemos un gran espacio en los lados izquierdo y derecho de la imagen. Entonces, vamos a encargarnos de eso. Voy a seleccionar proyectos IMG. Y voy a definir el encapsulado como siete rem en la parte superior e inferior y 11 rem en los lados izquierdo y derecho Además de eso, necesitamos mover un poco el botón de cierre hacia el lado derecho. Así que seleccionemos project hide btn y fijemos la posición correcta para ejecutar Bien, entonces el proyecto se ve bien. A continuación, voy a encargarme de la sección de Servicios. En primer lugar, vamos a disminuir la altura del botón de servicio. Seleccione el servicio btn. Y dijo hola a 12 rem. A continuación, voy a disminuir el tamaño de fuente de los elementos span y este servicio gravado también Así que vamos a seleccionar servicio btn, span, establecer el tamaño de fuente en ocho RAM En cuanto al texto de servicio, voy a hacer su tamaño de fuente 3.5 rampa. Bien, así que la sección de Servicios se ve bien. Además, no necesitamos cambiar la sección de contacto. En cuanto a la presentación de diapositivas de los íconos de las redes sociales, voy a disminuir el espacio en la parte superior, y también voy a crear algo de espacio en la parte inferior Así que vamos a seguir adelante y seleccionar slideshow definido margen como cinco rem en la parte superior e inferior y cero en los lados izquierdo y derecho Bien, así que eso es todo. En cuanto a estos puntos de interrupción, todo se ve bien. Entonces tenemos que seguir adelante y encontrar el siguiente punto de quiebre. Y hagámoslo en la próxima conferencia. 26. Hacer que sea sensible al proyecto - Parte 2: Bien, así que ya hemos creado un par de puntos de quiebre diferentes El último fue de 1,150 píxeles. Sigamos adelante y encontremos el siguiente punto de interrupción. Entonces el siguiente va a ser de 900 pixeles. Como puede ver, algunas de estas secciones están desordenadas. Así que vamos a seguir adelante y crear una nueva consulta de medios CSS. Especificemos aquí el ancho máximo como 900 píxeles. Entonces lo primero que voy a hacer es cambiar la posición del icono del menú. Vamos a seleccionarlo y establecer su posición correcta en menos cuatro RAM. Después de eso, voy a personalizar los elementos de navegación. Seleccionemos una aplicación o enlace. En primer lugar, vamos a cambiar el tamaño de fuente, que sea 1.5 RAM. Y también voy a cambiar el espacio entre los artículos. Vamos a establecer el margen en 0.1. Corre. Bien, a continuación, voy a mover el texto de la función cerca de los bordes de la página Seleccionemos el primer texto y definamos el margen como cero en la parte superior. Entonces nuestra fila en el lado derecho, cero en el extremo inferior, cinco rem en el lado izquierdo. Entonces voy a duplicar este código. Cambiar el nombre de la clase que necesitamos aquí texto destacado también, y también cambiar los valores de la propiedad margin. Necesitamos 05 rem, luego otra vez 0.0. Bien, eso es todo sobre la primera sección. A continuación, voy a mover un poco los encabezamientos de sección hacia el lado izquierdo Entonces, seleccionemos el encabezado de la sección. Como saben, es un nombre de clase común. Pongamos la posición izquierda a cinco corridas. Bien, después de eso, voy a encargarme de lo anterior me texto Así que vamos a seleccionar Acerca de mí texto, seguido del elemento span y establecer el tamaño de fuente en 5.5 ran. Además, voy a hacer que la fuente sea un poco más ligera para que el texto sea visible en dispositivos más pequeños. Vamos a establecer el color a un ccc gris claro. Bien, Siguiente, voy a personalizar esta sección de servicios Vamos a disminuir la altura del botón de superficie y también voy a disminuir el tamaño de la fuente. Entonces, seleccionemos el servicio btn y fijemos la altura a nueve RAM. Entonces necesitamos seleccionar servicio btn span. Cambiemos el tamaño de fuente, que sea seis RAM. Y también necesitamos seleccionar textos de servicio. Vamos a establecer su tamaño de fuente en tres puntos para ejecutar. Bien, así que consideremos la sección de Servicios. Se ve bien. Y en realidad en el punto de quiebre, ya terminamos. Sigamos adelante y encontremos el siguiente, que va a ser de 700 pixeles. Así que vamos a seguir adelante y crear una nueva consulta de medios CSS con el ancho máximo de 700 Entonces lo primero que voy a hacer es disminuir el tamaño de fuente del elemento HTML. Vamos a establecer su tamaño de fuente en 50%. Como puede ver, los elementos se hicieron más pequeños. Y casi todas las secciones se ven bien excepto la sección de contacto. Necesitamos disminuir el ancho de los campos de entrada. Así que vamos a seleccionar Contact Form Input y establecer el ancho a 50 ran. Bien, eso es todo con respecto a este punto de ruptura, sigamos adelante y personalicemos el proyecto en el siguiente Por lo que el siguiente punto de interrupción va a ser de 550 píxeles. Vamos a seguir adelante y crear una nueva consulta de medios CSS y especificar el ancho máximo como 550 De nuevo, voy a disminuir el tamaño de fuente del elemento HTML. Así que vamos a seleccionarlo y establecer su tamaño de fuente en 40%. A continuación, voy a cambiar el tamaño de la imagen dentro del círculo principal. Entonces, seleccionemos el círculo principal seguido de la etiqueta IMG. Voy a establecer ancho y alto, ambos a 180 por ciento Bien, así que estamos prestando, se ve bien También. No necesitamos cambiar la segunda y la tercera sección. En cuanto a los servicios, voy a disminuir de nuevo el tamaño de la fuente. Así que seleccionemos servicio btn con span. Establezca su tamaño de fuente en 4.5 RAM. Después seleccione el texto de servicio y defina este tamaño de fuente como tres rem. Y también voy a cambiar ligeramente el color del texto superficial. Hagámoslo pitido, pitido, pitido. Bien, veamos sobre la sección de Servicios. A continuación, voy a encargarme de la sección de contacto. Vamos a disminuir el ancho de los campos de entrada. Otra vez. Voy a seleccionar un formulario de contacto entradas y luego definir ancho. Que sea para correr. Bien. Lo último que voy a hacer en el punto de quiebre es hacer que los íconos de las redes sociales sean un poco más pequeños. En primer lugar, voy a seleccionar una presentación de diapositivas de rapero. Cambiemos su ancho, que sea 45 RAM. Después selecciona Imagen y cambia el relleno. Voy a poner el relleno a cero en la parte superior e inferior y a la marca 1.1 en los lados izquierdo y derecho. Bien, así que eso es todo. Con este punto de interrupción, terminamos y ahora es el momento de personalizar el proyecto En el último punto de interrupción, que va a ser de 400 píxeles Vamos a crear una nueva consulta de medios CSS con un ancho máximo de 400 En primer lugar, de nuevo, voy a disminuir el tamaño de fuente de los elementos HTML. Vamos a establecerlo en 35%. A continuación, voy a cambiar la posición del logotipo. Voy a colocarlo un poco abajo y también en el centro de los préstamos. Así que vamos a seleccionar Logo. En primer lugar, vamos a cambiar el tamaño de la fuente, que sea 1.7 rem. Entonces para colocarlo un poco abajo, voy a cambiar la posición superior. Hagámoslo 13 RAM. Y luego para centrar los elementos horizontalmente, necesitamos establecer la posición izquierda en 50 por ciento. Y además de eso para un centrado perfecto, necesitamos transformar, traducir x -50 por ciento. Así que vamos a ver que el logo está perfectamente centrado. A continuación, voy a colocar la perilla o en el centro también. Así que vamos a seleccionarlo y establecer justify content property to center. Ahora mismo, la barra de navegación no está perfectamente centrada porque por defecto tiene un poco de relleno en el lado derecho Entonces tenemos que deshacernos de él. Vamos a poner el relleno a cero. Bien, eso es todo sobre la navegación. A continuación voy a cuidar el círculo principal y la imagen dentro del mismo. Miremos círculo principal y disminuyamos su ancho. Que sea 38 RAM. Entonces voy a disminuir su ancho en hover también. Y cambiar con hacerla 42 RAM. Y también necesitamos seleccionar imagen. Vamos a establecer ancho y alto, ambos 200 por ciento. Así que el aterrizaje y el resto de las secciones parecen mercancías. Lo único que voy a hacer es disminuir el tamaño de fuente del encabezado del formulario. Porque una vez enfocamos el tema o mensaje que el diseño está un poco estropeado. Así que sigamos adelante y cambiemos el tamaño de la fuente. Seleccione de encabezado. Establezca el tamaño de fuente en cinco rampas. Bien, así que finalmente, ya terminamos. Nuestro proyecto responde. Si comprobamos, verás que el proyecto se ve bien en diferentes tamaños de pantalla. Llegó. Lo siguiente que tenemos que hacer es validar los campos de entrada. Porque después de eso, vamos a albergar el proyecto y hacerlo vivir. Entonces, sigamos adelante. 27. Validación de formas: Bien, una vez que hicimos que nuestros proyectos respondieran a diferentes tamaños de pantalla, ahora es el momento de pasar a la siguiente parte y agregar a nuestro proyecto y otras características Voy a validar nuestro formulario porque eventualmente vamos a alojar el proyecto y hacerlo ligero. Echemos un vistazo al proyecto terminado. Por lo que se validan los cuatro campos de entrada, incluyendo el área de texto. Si los dejo vacíos y hago clic en el botón enviar, entonces obtendremos mensajes de error. En realidad la forma se valida de diferentes maneras. Recibimos mensajes de error si dejamos vacíos los campos de entrada. Además, si no protegemos los requisitos de longitud. Por ejemplo, si ingreso solo un carácter en el primer campo de entrada, entonces obtendremos un mensaje de error diferente. Además, si nos perdemos el signo de agregar en el campo de correo electrónico, entonces también obtendremos un mensaje de error diferente diciendo que el correo electrónico no es válido. Sigamos adelante y comencemos a trabajar en la validación del formulario. En primer lugar, tenemos que hacer un par de cosas en el archivo HTML. Voy a asignar los atributos IgA a todos los campos de entrada del formulario. El primero va a ser el nombre. Vamos a copiarlo y pegarlo para el correo electrónico. Entonces tendremos tema y mensaje. Muy bien, a continuación, voy a agregar un párrafo después de cada campo de entrada Estos elementos serán utilizados para mostrar el mensaje de error. Entonces abramos la etiqueta P con el mensaje de clase. Con el mensaje de error de contenido. Bien, eso es todo respecto al HTML en este momento, antes de que empecemos a escribir algo de JavaScript, voy a darle estilo al párrafo es la parte de la sección de contacto, así que voy a insertar el código en la quinta sección Vamos a crear una nueva validación de formulario de comentarios. Y de validación de forma. A continuación, seleccione Párrafo. En primer lugar, voy a definir el tamaño de la fuente. Hagámoslo un punto a la RAM. Entonces voy a hacer que la fuente sea más audaz. Vamos a establecer el peso de la fuente en 700. También cambia el color. Voy a usar tu color F phi phi e, phi e. así que aquí tenemos el mensaje de error. Voy a ponerla en mayúscula, y también la voy a colocar del lado izquierdo Así que vamos a establecer texto transformar mayúsculas. Además, voy a crear algún espacio entre las letras. Vamos a establecerlo en 0.1 run. Y luego voy a colocar el texto en el lado izquierdo. Entonces usemos margen con los valores 01 marca, y luego otra vez cero. Bien, eso es todo sobre el CSS en este momento. Ahora podemos empezar a escribir algo de JavaScript. Sigamos adelante e insertemos nuevos comentarios en el archivo. Necesitamos la validación de formularios. Después final de validación de formulario. En primer lugar, voy a crear un par de variables diferentes con el fin seleccionar todos los elementos necesarios. Sigamos adelante y comencemos con un formulario, creamos nueva variable, llamemos formulario. Y luego seleccione los elementos del formulario utilizando el método QuerySelector. Especificemos aquí el formulario de contacto del nombre de la clase. A continuación, voy a seleccionar el primer campo de entrada. Vamos a crear una nueva variable, llamarla nombre de usuario. En este caso, voy a seleccionar los elementos usando id. quiero decir, voy a usar el método llamado get element by ID. Necesitamos especificar aquí el nombre de identificación. Duplicemos esta línea de código tres veces. Entonces el siguiente campo de entrada va a ser para correo electrónico. Entonces tendremos tema. Entonces el siguiente será mensaje. Y además de eso, voy a seleccionar todos los mensajes. Me refiero a los párrafos. Así que vamos a crear una nueva variable, llamarla mensajes, y luego seleccionar todos los párrafos usando el selector de consultas, todo método. Bien, así se preparan todas las variables necesarias. Y lo siguiente que voy a hacer es crear una función que nos permita verificar si los campos de entrada están vacíos o no. Así que vamos a crear una nueva función. Voy a llamarlo verificar campos obligatorios. Esta función tomará un parámetro que va a ser una matriz. Y va a incluir todos los campos de entrada Así que para comprobar si los campos de entrada están vacíos o no, al principio necesitamos recorrer la matriz. Y para eso voy a usar uno de los métodos de ayuda de matriz llamados for-each Tomará un parámetro. Va a ser la función de devolución de llamada, que a su vez tomará un parámetro, los campos de entrada actuales de la matriz Entonces ahora necesitamos verificar si el valor de la entrada está vacío o no. Entonces necesitamos usar la declaración if. Y como condición, necesitamos comparar el valor de punto de entrada con la cadena vacía. En realidad, el valor de punto de entrada no es suficiente aquí porque si ingresamos algo en los campos de entrada con un espacio en blanco, entonces este espacio en blanco será reconocido como la parte del valor que no necesitamos Entonces para evitar este tipo de cosas, quiero decir, para ignorar los espacios en blanco, podemos usar uno de los métodos llamados trim Si esta condición es verdadera, entonces tenemos que mostrar un mensaje de error. Para hacer eso, voy a crear una nueva función. Vamos a llamarlo error. Tomará dos parámetros. El primero van a ser los elementos de entrada. En cuanto al segundo, va a ser un mensaje. Bien, entonces se crea la función. Ahora tenemos que acceder al párrafo y definir este contenido. Además de eso, necesitamos ocultar el mensaje de error es por defecto y necesitamos mostrarlos una vez que tengamos el error. Así que vamos al archivo CSS y a los párrafos de altura por defecto. Para eso, voy a usar visibilidad oculta y opacidad cero Entonces voy a definir una nueva clase, que luego se agregará al párrafo una vez que acusen, voy a llamarlo error de lo que necesitamos mensaje Y en realidad no necesitamos aquí espacio porque necesitamos agregar este clúster, el elemento en sí, y no sus padres. Para poder mostrar el mensaje, necesitamos visibilidad para ser visibles. Y también opacidad uno. Además de eso, voy a usar la transición para mostrar el mensaje de error sin problemas. Usemos opacidad con la duración 0.3. Bien, entonces ahora necesitamos agregar esta clase al párrafo Y también tenemos que definir el contenido del texto del mensaje. Para poder acceder al párrafo, voy a usar una de las propiedades llamadas next element sibling, porque el párrafo es el hermano del elemento input Así que tenemos que introducir punto siguiente elemento hermano punto lista de clases Y tenemos que agregar error de clase a la lista de clases. En cuanto al textContent, va a ser el mensaje que usemos aquí como parámetro Así que necesitamos punto de entrada siguiente elemento hermano. Duda TextoContenido igual a masa. ¿Bien? Entonces la función para el mensaje de error está lista. Podemos llamarlo abajo dentro de la declaración if. Se necesitarán dos argumentos. El primero va a ser input. En cuanto al segundo, va a ser el mensaje. Vamos a abrir backticks. Primero. Te voy a pasar ID de entrada. Nos dará el nombre del campo de entrada. Y entonces el siguiente texto va a ser, se requiere. Bien, así que todo está listo. Solo necesitamos agregar un oyente de eventos a los elementos del formulario y llamar a verificar la función de campos obligatorios una vez que enviemos el formulario Entonces necesitamos formar el escucha de eventos add. El tipo de evento va a ser enviado. También necesitamos aquí la función de devolución de llamada con objeto de evento. Lo primero que voy a hacer es evitar la acción por defecto del formulario. Necesitamos e punto prevenir default. Y entonces tenemos que llamar a la función check required fields. Como saben, esta función tiene un parámetro, que es la matriz de los campos de entrada. Entonces como argumento tenemos que pasar aquí una matriz de los campos de entrada. Es decir, tenemos que pasar tu nombre de usuario. Correo electrónico Asunto y mensaje. Muy bien, entonces ahora si dejo los campos de entrada vacíos y hago clic en el botón enviar, entonces obtendremos mensajes de error Que si llene el campo de entrada. Y vuelve a hacer clic en el botón enviar, luego el mensaje de error no se ocultará. En realidad, eso no es lo que queremos. Necesitamos crear otra función para éxito con el fin de eliminar el mensaje de error. Así que vamos a crear una nueva función, llamémosla éxito. Tomará un parámetro, va a ser la entrada. Entonces dentro de esa función, tenemos que eliminar el error de clase del párrafo. Entonces tenemos que tener acceso al párrafo usando punto de entrada. Siguiente elementos hermano. Entonces necesitamos lista de clases. Y tenemos que eliminar el error de clase. A continuación, necesitamos llamar a esta función una vez que el campo de entrada no esté vacío. Así que necesitamos crear una sentencia else y tenemos que llamar a la función éxito con la entrada del argumento. ¿Bien? Ahora bien, si hago clic en el botón enviar, entonces obtendremos mensajes de error. Y si siento el campo de entrada y vuelvo a hacer clic en el botón enviar, entonces el mensaje de error eliminará esa sentada sobre la primera parte de la validación. Podemos verificar si los campos de entrada están vacíos o no. Ahora es el momento de seguir adelante y verificar la longitud de los caracteres que ingresamos en el campo de entrada. Para eso, voy a crear otra función. Vamos a llamarlo comprobar la longitud. Esta función tomará dos parámetros. El primero va a ser un insumo también. El segundo va a ser el número mínimo de los caracteres. Entonces, si la longitud del valor del campo de entrada será menor que el número mínimo de caracteres, entonces deberíamos mostrar el mensaje de error. Entonces necesitamos crear una sentencia if en la que tengamos que comparar la longitud del valor del campo de entrada con el número mínimo de caracteres. Entonces necesitamos ingresar puntos, valor, puntos, tres puntos, longitud, menos de min. Entonces, si esta condición es verdadera, entonces tenemos que mostrar el mensaje de error. Por lo tanto, tenemos que llamar a la función de error. Como saben, se necesitan dos argumentos. El primero es el input. Para el segundo es el mensaje. Entonces necesitamos aquí input dot id que el impuesto va a ser, debe ser. Por lo menos. Tenemos que pasar aquí la segunda media del parámetro. Y entonces necesitamos personajes. Si esta condición es falsa, entonces tenemos que llamar a la función de éxito. Así que necesitamos a la declaración L que el éxito de la función con la entrada argumento. Muy bien, finalmente, tenemos que llamar a la función check length para todos los campos de entrada excepto el correo electrónico Porque para la validación del correo electrónico, crearemos una función separada. Entonces se llama Check length. Primero para el nombre de usuario. El número mínimo de caracteres va a ser, digamos dos. Duplicemos esta línea de código dos veces. El siguiente campo de entrada va a ser sujeto. Y entonces tendremos mensaje como el número mínimo de caracteres para el mensaje. Voy a pasar diez. Bien, sigamos adelante y comprobemos si todo funciona bien. Voy a responder solo un carácter en los primeros campos de entrada. Si hago clic en el botón enviar, entonces no vamos a recibir ningún mensaje de error. Para el primer campo de entrada. Sucede porque la sentencia else funciona en la función de combustible requerida de verificación. Entonces tenemos que deshacernos de él. Ahora bien, si vuelvo a probar, entonces vamos a recibir el mensaje adecuado. Y en realidad sucederá lo mismo para el resto de los campos de entrada. Bien, ahora, es el momento de encargarse de las entradas de correo electrónico. Como dije, vamos a crear una función separada. Vamos a llamarlo, verificar correo electrónico Esta función tomará un parámetro. Va a ser el insumo. Entonces, para validar la dirección de correo electrónico, tenemos que usar expresiones regulares. En realidad, no voy a escribirlos manualmente porque consta de muchos caracteres diferentes. Y podría ser bastante confuso. Simplemente podemos buscarlo en Google. Busquemos JavaScript, reg ex para correo electrónico. Vamos al primer enlace y agarremos estas variables aquí, y pegarla en la función. Cambiemos el nombre de la variable. Voy a llamarlo reg X. Así que ahora tenemos que verificar si el valor de entrada del correo electrónico coincide con esos requisitos para eso, necesitamos usar declaraciones if, entonces necesitamos usar un método llamado test. Vamos a adjuntarlo a la variable reg X. Y como argumento, tenemos que pasar aquí un valor de entrada nuevamente con el método tree. Entonces, si esto es cierto, entonces tenemos éxito. Y si es falso, necesitamos l declaraciones donde tenemos que llamar a la función de error con entradas y con un mensaje. El correo electrónico no es válido. Muy bien, por último, tenemos que llamar a esta función con el argumento email Además de eso, voy a cambiar el tipo de los elementos de entrada porque como saben, por defecto, HTML tiene la validación para el correo electrónico. Y en realidad no lo necesitamos ahora mismo. Entonces ha cambiado el tipo, hazlo texto. Bien, entonces ahora si ingreso algunos caracteres que no se parecen a la dirección de correo electrónico, entonces vamos a recibir un mensaje de error diciendo que el correo electrónico no es válido. Pero si entro aquí, digamos john@gmail.com, entonces no vamos a recibir ningún mensaje de error. Bien, así que eso es todo con respecto a la validación del formulario. Antes de que terminemos esta conferencia, voy a hacer una cosa más veas una vez que enfoquemos las entradas de lo que se mostrarán los caracteres previamente ingresados. Para deshabilitarlo, podemos usar uno de los atributos llamados autocompletar con un valor Bien, así que ahora es se puede ver que todo se ve perfectamente. Vamos a seguir adelante. 28. Alojamiento de sitios web en Netlify: Bien, entonces en la conferencia anterior hemos validado nuestra forma y la sección de contenido Y ahora como dije, es el momento de alojar nuestro sitio web y hacerlo vivo. Para ello, vamos a utilizar uno de los servicios más populares y de uso común llamado Netlify Es una herramienta realmente genial hoy en día. Puedes tener una cuenta gratuita con muchas funciones diferentes y puedes alojar tu sitio web muy fácilmente. También puedes tener una cuenta Pro con algunas características adicionales. Lo primero que tengo que hacer es registrarme en la página web. Como puedes ver, hay un par de formas diferentes de apuntarte. Para que puedas tomarte tu tiempo y registrarte. Ya nos inscribimos, así que no voy a perder el tiempo en eso porque es un proceso sencillo. Entonces en estos momentos, no tenemos aquí ningún sitio web alojado. Voy a hacer eso paso a paso contigo. Entonces lo primero que voy a hacer es abrir el prompt común y ejecutarlo como administrador. En realidad, si estás usando Mac, entonces tienes que usar la palabra clave sudo para poder ejecutar los comandos como administrador, entonces tenemos que acceder a los proyectos En nuestro caso, el proyecto se coloca en el escritorio. Entonces, al principio, tenemos que salir de esas dos carpetas. Voy a correr ciudad con slash delantero. Y entonces necesitamos la ruta de la carpeta. Si no conoces la parte de la carpeta del proyecto, entonces puedes abrir el código de entrevistas de terminal y te dará la parte del proyecto automáticamente. Voy a copiar el camino. En realidad, en mi caso, todo para nombres ordinales consiste en una sola palabra Pero si tienes los nombres de las carpetas con varias palabras, entonces tienes que envolverlos con comillas. Vamos a la carpeta del proyecto. Ahora tenemos que instalar Netlify usando el gestor de paquetes de nodos npm Para eso deberías haber instalado Node JS. De lo contrario no podrás usar npm. Para poder instalar NodeJS, tienes que ir a Node Después descarga cualquiera de las versiones desde aquí e instálala. Una vez que instale el Node.JS, podrá usar un Administrador de paquetes de nodos. Entonces para poder instalar Netlify, hay que ejecutar el siguiente comando, npm I, que significa install, dash g, Netlify, dash g, Netlify Tomará algún tiempo. Así que una vez instalado, entonces tenemos que crear un archivo de configuración llamado Netlify dots TO y l. Así que este es un archivo de configuración que especifica cómo nullify construye e En ese archivo, tenemos que especificar la carpeta Build. Y luego tenemos que definir un directorio que contendrá el archivo HTML listo para desplegar. En nuestro caso, no tenemos aquí ninguna carpeta separada para nuestro archivo HTML. Así que simplemente podemos especificar el directorio de la siguiente manera. Necesitamos publicar para ser iguales a puntear con cotizaciones. ¿Bien? El siguiente paso es inicializar el Netlify Para eso tenemos que ejecutar Netlify en él. Ahora, pide crear e implementar el sitio web manualmente o conectar directorio con GitHub primero. En este momento, voy a elegir crear e implementar este sitio manualmente. Entonces pregunta el nombre del equipo. Tienes que usar la tecla de flecha superior e ingresar. El siguiente paso es el nombre del sitio. Puedes dejarlo en blanco para algún nombre aleatorio y nullify lo generará para O puedes usar algún nombre único. En nuestro caso, voy a llamar al código del sitio y crear sitio web de cartera. Ahora, si revisamos nuestros proyectos, encontrarás aquí una nueva carpeta llamada Netlify, en la que tenemos un archivo JSON que incluye el ID único de nuestra ¿Verdad? Ahora si recargamos la página, entonces llegaremos aquí, nuestro sitio web de cartera en la sección de sitio A continuación, tenemos que ejecutar Netlify, desplegar. Nos dará un borrador de URL. Y si crees que todo se ve bien en tu URL de borrador, entonces puedes ejecutar Netlify, implementar dash, dash, prod Por último, obtendremos aquí la URL del sitio web. Si vamos a esa URL, entonces veremos nuestro sitio web en vivo en el navegador para que todos puedan acceder a él. Bien, así que una vez que el sitio web esté en vivo, ahora voy a hacer que el formulario funcione Quiero decir, una vez que ingresemos la información en los campos de entrada y enviemos el formulario, deberíamos recibirla en nuestro panel de Netlify Echemos un vistazo a la documentación de los formularios. Voy a buscar formularios de Netlify Así que aquí tenemos la documentación Puedes comprobarlo y aprender a configurar los formularios. Pasemos al archivo index.html. Tenemos que hacer aquí un par de cosas más. Tenemos que agregar dos atributos a los elementos del formulario. El primero va a ser acción. Con un valor puestos de lo que necesitamos datos amplificar el valor verdadero A continuación tenemos que agregar atributo name a cada elemento de entrada y también al área de texto. El primero va a ser nombre del que necesitamos correo electrónico. El siguiente va a ser sujeto. Y finalmente necesitamos mensaje. Bien, eso es todo sobre el HTML. A continuación, tenemos que hacer un par de cosas en el archivo JavaScript también. En este momento tenemos aquí prevenir la función predeterminada, que no nos permite enviar un formulario. Tenemos que hacer que estos métodos funcionen sólo cuando tenemos el error. Para ello, voy a crear una nueva variable. Llamémoslo no válido. Entonces, para saber si tenemos un error o no, tenemos que mirar a través de los mensajes. Una vez que encontremos si el mensaje de error existe, entonces tenemos que ejecutar la función preventDefault En primer lugar, tenemos que transportar mensajes a una matriz porque en este momento es una lista de nodos. Así que necesitamos array dot from y tenemos que pasar tus mensajes. Entonces voy a usar uno de los métodos de ayuda de matriz llamado find. Este método rompe el bucle una vez que la condición que voy a pasar aquí será cierta. Entonces necesitamos encontrar con una función de devolución de llamada, que tomará un parámetro y va a ser el mensaje actual en la matriz Entonces, si el mensaje contiene un error de clase, entonces significa que tenemos un mensaje de error. Así que tenemos que verificar si lista de clases de mensaje contiene error de clase. Así que una vez que tenemos el mensaje de error, entonces tenemos que ejecutar la función preventDefault Para eso, voy a usar unas declaraciones condicionales. No necesitamos válido, seguido de lo lógico y operador. Y entonces necesitamos e punto prevenir default. Bien, por último, tenemos que deshacernos de la función preventiva del pie desde aquí Y también, necesitamos actualizar nuestro sitio web con código recién agregado. Para eso tenemos que volver a correr, Netlify, desplegar dash, dash prod Por lo que ahora el sitio web está actualizado y tenemos que rellenar el formulario. Ahora haga clic en el botón Enviar. Como puede ver, recibimos aquí un pequeño mensaje que nos dice que el formulario fue enviado. Si revisamos el tablero, entonces obtendremos la información que acabamos de enviar. Entonces todo funciona bien. Y en realidad hemos terminado de trabajar en nuestro proyecto. Espero que haya sido interesante, útil y aprendas algunas cosas nuevas que te ayudarán a crear tu propio sitio web de portafolio personal que lucirá moderno, hermoso y profesional con solo HTML puro, CSS y JavaScript. Bien, así que espero que hayan disfrutado de este curso. Gracias por estar con nosotros. Te deseo todo lo mejor. Adiós.