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.
Top comments (6)
A little weird, but pretty nice. 😀
Could you please clarify which part you find weird so I can work on improving it? Thank you very much!
Sure. I would say that, your guy walking, thou he is by far your most impressive feature, he is also your least impressive feature. The whole beach around him is static, the waves stand still, yet he persistently walks across the screen. His feet slid fluidly on the sand. You know, he in and of himself is great! But he, coupled with the beach background, isn't to good. Hope this helps! 😁
Hahaha! That's hilarious 😆
Definitely made me smile :)
Yeah 😆