chintanonwebThis is a submission for [Frontend Challenge v24.04.17]((https://dev.to/challenges/frontend-2024-05-29), Glam Up My Markup: Beaches
What I Built
Take me to the beach!
Welcome to our curated list of the best beaches in the world. Select a beach from the dropdown to Take me to the beach!
Demo
Journey
To create a more interactive experience where selecting a beach triggers an animation of a person walking to that beach, I've use HTML, CSS, and JavaScript. This will involve:
Explanation
HTML:
- A dropdown menu is added for selecting a beach.
- The animation section contains a div with a structured representation of a person using div elements for different body parts.
CSS:
- The person is built using div elements styled to look like body parts.
- Keyframe animations for walking movement (walk-leg and walk-arm) were added.
- Transition property is used for the walking animation.
JavaScript:
- The change event listener is attached to the beach dropdown.
- The beach container's background image changes based on the selected beach.
- This implementation ensures that the person appears to walk across the screen to the selected beach.
