Dine Restaurant - Svelte, Parallax Effect, CSS Animations
Solution retrospective
Hi, everyone! 👋 It feels great to finally submit this solution. I’ve wanted to do this challenge since I started doing Frontend Mentor projects. It was definitely a learning experience (see: README), and hopefully I’ve made up for the lack of effects in my Sunnyside solution. 😆
The parallax effect is only on desktop and tablet. It’s also turned off, along with all animations and page transitions, for those who prefer reduced motion. 👍
Questions:
- This was my first time implementing a “tabbed” interface. I opted to use button elements for the tabs. Is there a better and/or more accessible way to create tab functionality?
- I’m concerned that the image animations on the tabbed Events section are getting messed up if the image doesn’t load before the animation triggers. Is there a way to preload images from
pictureelements in a way that’s responsive and also works with multiple srcsets? Update: I refactored this section a bit, making some tweaks to the animations and putting all content in the DOM rather than dynamically loaded. The flashing issue is now fixed. Huge thanks to Dave and Christopher for their help on this! 🙏 - How is the form accessibility on the booking page? I don’t believe the second page was included in the report.
- Sadly, I didn't manage to style the AM/PM selector like the design because I used
selectandoptionelements. Do you know of a better method that would be both accessible and match the dropdown in the design? - Not sure how I feel about the menu list being parallax on desktop. Does it look too wonky or have I just been staring at it for too long? 😂
Thanks for taking the time to look at my solution! Feedback is always greatly appreciated. 😄
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@dwhenson
Hey Anna - lovely job as always.
This is my go to resources for tabbed interfaces: https://inclusive-components.design/tabbed-interfaces/ - as ever with Heydon, very in depth.
When finding this I also saw this link which might be of interest? (I don't know Svelte so not sure how good it is.) https://github.com/aral/heydons-inclusive-tabbed-interface-in-svelte
One small issue on the tabs is that I sometimes get a flash of the previously rendered text or photo when selecting different options. Just a small point though.
Cheers Dave
Marked as helpful - P@christopher-adolphe
Hi @brasspetals,
You did a great job on this challenge. The parallax effect is perfect. It really accentuates this feeling of depth on the page. 👌👌
As for the tabbed content, it is still flashing at the moment. I tried to toggle the
fadeinandfadeoutclasses manually on the<img />element and I noticed that the flashing occurs when thefadeoutclass is applied. The image is still visible with this class applied to it. Maybe that's where you need to have a closer look. 🤔 I recently watched a video from Kevin Powell about animating from display none. Maybe that could help also you.I also noticed that on large viewports (1600px and above) there are like to 2 black stripes on the each side of the page and it is caused by the fact that the
<div class="container">element is restricted by amax-width. Was this intentional ? 🤔Keep it up.
Marked as helpful - @AdamMzkr
Amazing work! Pixel perfect.
The best solution I see in Fron-End -Mentor congratulations!
- P@BurritoDoggie
Heyy Anna!
You are back at it again with a wonderful challenge!! This is actually the first time I have had seen someone do this project and I actually really like it~ This made my day better, and I hope these comments make your day better! ^^
Keep Coding!
(== ^ . ^ ==)
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord