Skip to content

Implementing a pixel-perfect web design based on a Figma prototype, including animations, parallax effects, and interactive elements to enhance user experience.

Notifications You must be signed in to change notification settings

analiaBurgosDev/Interactive-Web-Design-with-Animations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 

Repository files navigation

image

Descripción del Trabajo

Este 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.

Las 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.

El 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.

Este 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.


Project Description

This 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.

The 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.

The 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.

This 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.

About

Implementing a pixel-perfect web design based on a Figma prototype, including animations, parallax effects, and interactive elements to enhance user experience.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published