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

Nature CSS Art : Frontend Challenge: June Edition

chintanonweb ・ May 31

#frontendchallenge #devchallenge #css #webdev