🔗 Pagina oficial: www.programadornovato.com
🔗 Canal de ProgramadorNovato: / programadornovato
🔗 Facebook: / programadornovatooficial
🔗 Twitter: / programadornova
🔗 Instagram: / programadornovato
🔗 Codigos: codepen.io/programador-novato...
En este tutorial te voy a enseñar cómo crear un login animado utilizando JavaScript. El proyecto comienza con el desarrollo de una página de registro y login, donde se hace más interactivo el proceso. Al ingresar el correo, una carita comenzará a seguir el texto, y al escribir la contraseña, la carita cerrará los ojos.
Primero, dibujamos la carita en HTML y la estilizamos con CSS, asignándole un tamaño y color específicos. Después, añadimos los ojos y pupilas, también con posiciones y tamaños determinados, asegurándonos de que se vean correctamente.
El siguiente paso es agregar la funcionalidad con JavaScript. Creamos un archivo script.js y declaramos variables para los elementos del usuario, contraseña y ojos. Mediante eventos, hacemos que los ojos se muevan al escribir en los campos y se cierren al entrar en el campo de la contraseña.
Finalmente, probamos la animación y ajustamos detalles para asegurar que todo funcione perfectamente. Este tutorial busca hacer del login un proceso más divertido y atractivo. ¡Espero que te haya gustado y te animo a dejar tu like y compartir!
00:00 Introducción y objetivo del proyecto
00:34 Estructura básica del formulario
00:58 Estilos CSS del formulario y botón
01:31 Creación de la cara del oso
02:13 Posicionamiento y estilos de los ojos del oso
02:54 Implementación de JavaScript para movimiento de ojos
03:32 Evento para resetear la posición de los ojos
04:09 Eventos para abrir y cerrar los ojos al interactuar con el password
04:45 Conclusión y despedida
Негізгі бет 🟢Login Animado con JavaScript
Пікірлер: 4