{"id":28168613,"url":"https://github.com/ayvero/interactive-web-design-with-animations","last_synced_at":"2025-05-15T15:13:53.735Z","repository":{"id":225420751,"uuid":"765953865","full_name":"Ayvero/Interactive-Web-Design-with-Animations","owner":"Ayvero","description":"Implementing a pixel-perfect web design based on a Figma prototype, including animations, parallax effects, and interactive elements to enhance user experience.","archived":false,"fork":false,"pushed_at":"2025-03-28T22:52:07.000Z","size":13124,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T23:29:14.806Z","etag":null,"topics":["animation-css","css3","figma","html","paralax-effect"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Ayvero.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-02T00:24:18.000Z","updated_at":"2025-03-28T22:55:10.000Z","dependencies_parsed_at":"2024-03-02T01:41:51.095Z","dependency_job_id":null,"html_url":"https://github.com/Ayvero/Interactive-Web-Design-with-Animations","commit_stats":null,"previous_names":["ayvero/parallax-final-interfaces-2024"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayvero%2FInteractive-Web-Design-with-Animations","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayvero%2FInteractive-Web-Design-with-Animations/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayvero%2FInteractive-Web-Design-with-Animations/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ayvero%2FInteractive-Web-Design-with-Animations/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ayvero","download_url":"https://codeload.github.com/Ayvero/Interactive-Web-Design-with-Animations/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254364251,"owners_count":22058880,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation-css","css3","figma","html","paralax-effect"],"created_at":"2025-05-15T15:13:53.668Z","updated_at":"2025-05-15T15:13:53.725Z","avatar_url":"https://github.com/Ayvero.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"![image](https://github.com/Ayvero/Parallax-Final-Interfaces-2024/assets/112092368/6b1fec79-a9ce-4255-a7b6-f8fe381af106)\n# Descripción del Trabajo\n\nEste ejercicio consiste en implementar un diseño web según un prototipo en Figma utilizando HTML, CSS3 y JavaScript. La página fue desarrollada con un enfoque \"pixel-perfect\", asegurando que el diseño se replicara exactamente según lo proporcionado. Además de la maquetación, se incluyeron varias animaciones y efectos visuales para mejorar la experiencia de usuario y hacer que la web fuera interactiva y dinámica.\n\nLas funcionalidades implementadas incluyen un menú hamburguesa con animación de transición, un encabezado sticky que se adapta al hacer scroll, efectos parallax en el HERO y en secciones clave, animaciones de entrada para los elementos en pantalla, y movimientos interactivos como el cambio de imágenes y la reacción al desplazamiento del mouse.\n\nEl proyecto también incluye características opcionales como la integración de un cargador animado, la animación de personajes en algunas secciones, la implementación de un video con desplazamiento en el scroll, y la adición de efectos 3D interactivos utilizando `model-viewer`.\n\nEste trabajo destaca no solo las habilidades técnicas en desarrollo web frontend, sino también la capacidad de implementar animaciones complejas y efectos interactivos que enriquecen la interfaz de usuario y cumplen con los requisitos propuestos.\n\n---------------------------------\n\n# Project Description\n\nThis exercise involves implementing a website design based on a Figma prototype using HTML, CSS3, and JavaScript. The page was developed with a \"pixel-perfect\" approach, ensuring the design matched the provided prototype exactly. In addition to the layout, several animations and visual effects were incorporated to enhance user experience and make the website interactive and dynamic.\n\nThe implemented features include a hamburger menu with a transition animation, a sticky header that adjusts when scrolling, parallax effects on the HERO section and key sections, entry animations for elements on screen, and interactive movements like image changes and mouse scroll reactions.\n\nThe project also includes optional features such as the integration of an animated loader, character animations in certain sections, the implementation of a video with scroll movement, and the addition of interactive 3D effects using `model-viewer`.\n\nThis work highlights not only technical skills in frontend web development but also the ability to implement complex animations and interactive effects that enrich the user interface and meet the proposed requirements.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayvero%2Finteractive-web-design-with-animations","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayvero%2Finteractive-web-design-with-animations","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayvero%2Finteractive-web-design-with-animations/lists"}