Skip to content
Submitted over 2 years ago

Dine Restaurant - Svelte, Parallax Effect, CSS Animations

#svelte#accessibility
Anna Leigh•5,135
@brasspetals
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Dine restaurant website
  • HTML
  • CSS
  • JS
3intermediate

Design comparison

SolutionDesign

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 picture elements 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 select and option elements. 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. 😄

Community feedback

  • Dave•5,295
    @dwhensonPosted over 2 years ago

    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
    2
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @dwhenson Hi, Dave! Thanks for taking the time to look at my solution, and for sharing those resources! 😄

    Ack! That flash is what I was talking about with my animation concern and wanting to find a way to preload image srcsets from pictures. It's all because the content for that section is dynamically generated depending on which tab is active, so the content has to load. I did have an animation delay and even a hidden class to help compensate, but I think I might have to rework the section (and here I thought I was being so clever!). 😕

    Instead of dynamically generating content, I could put all the tab content in the DOM and toggle some hidden class along with the animations. I would imagine that would solve both the flashing and any accessibility issues. Might have to try out that tab componenent you found! Thanks again for looking into it! Just so happens my next project is a "tabbed" single-page web app, so your resources are well-timed!

    Update: All the content is now in the DOM rather than dynamically loaded, so the flashing issue should be fixed. 🤞

    1
    Dave•5,295
    @dwhensonPosted over 2 years ago

    @brasspetals I think the approach that you've taken now is in line with what Heydon recommends. The other advantage is that if JS fails then the user should still be able to see all the content.

    I now seem to get one flicker (sorry!!) when I try after the page has loaded for the first time then everything works perfectly - even if I reload the page. If the content is in the DOM I'm not sure why this is?

    Sorry, I'm just pointing out problems and not helping!!!

    Cheers Dave

    Marked as helpful
    1
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @dwhenson No, no - it's good you're letting me know! You are definitely helping! I only wish I could replicate the issue. 😭 There're a few things that might be causing it, but I'm going with the easiest (potential) solutions first. Would you mind testing out this version of the project and seeing if the issue is fixed? I am determined to get to the bottom of this!

    0
    Dave•5,295
    @dwhensonPosted over 2 years ago

    @brasspetals - I just tested the alternative version in Chrome and Safari and it seems to work fine - no flicker!! Good one for pushing on with this! I hate these last little bits - they always seem to take forever!

    Cheers Dave

    Marked as helpful
    0
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @dwhenson Awesome! Thank you so much for checking this for me! It's always been a concern of mine to have bugs I couldn't see/replicate (especially when it comes to animations), so it's massively helpful that you not only pointed out the issue, but also helped me fix it. Again, super appreciate it! 🙏

    1
    Dave•5,295
    @dwhensonPosted over 2 years ago

    @brasspetals glad you got it sorted! The project looks lovely!!

    Cheers

    1
  • Christopher Adolphe•600
    @christopher-adolphePosted over 2 years ago

    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 fadein and fadeout classes manually on the <img /> element and I noticed that the flashing occurs when the fadeout class 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 a max-width. Was this intentional ? 🤔

    Keep it up.

    Marked as helpful
    1
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @christopher-adolphe Thanks for taking to the time to look over my solution! 🙏 The max-width was intentional 🙈, but unnecessary. It's been removed. 👍

    Thank you for letting me know about the continued animation issue. It'd be much easier to fix if I could replicate the problem. Would you mind testing out this version of the project and seeing if the issue is fixed? I am determined to get to the bottom of what is causing it!

    0
    Christopher Adolphe•600
    @christopher-adolphePosted over 2 years ago

    Hi @brasspetals,

    I'm happy to help and glad that this has been helpful to you. 🤝

    I've checked the new link and I confirm that the issue is fixed on this version. 👌 I see that you are now applying the hide class directly on the <img /> element.

    Great job in resolving this. 👍 See you on the next one.

    Best regards.

    Marked as helpful
    0
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @christopher-adolphe Awesome! Thank you so much for taking the extra time to look at the new version! 😄

    Yeah, I had originally put .hide on the picture to save some code repetition in Svelte. I also had the animations on the picture for the same reason, but noticed it was causing some issues. Don't know why I kept hide on there when I moved the animations to the img. 🤦‍♀️

    I also added forwards to the fadeout animation, which should have been there in the first place to make sure the img stays at opacity: 0 when the animation ends. It seems between these two, it's fixed it! Thanks again - much appreciated!

    1
    Christopher Adolphe•600
    @christopher-adolphePosted over 2 years ago

    No worries @brasspetals. I am also learning from this. It's a win-win situation. 🤝

    I need to find some time to learn Svelte as well. Any resource to recommend ? 🙂

    Best regards.

    1
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @christopher-adolphe Svelte's official tutorial is actually really good. The Net Ninja has also done a great series on YouTube, which I'll actually be watching more of today as I get into state managment and all that good stuff in my next project. 👍

    1
  • Adam M•550
    @AdamMzkrPosted over 2 years ago

    Amazing work! Pixel perfect.

    The best solution I see in Fron-End -Mentor congratulations!

    2
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @AdamMzkr Thank you so much! 😊

    1
  • The Burrito Doggie•1,260
    @BurritoDoggiePosted over 2 years ago

    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!

    (== ^ . ^ ==)

    1
    Anna Leigh•5,135
    @brasspetalsPosted over 2 years ago

    @BurritoDoggie Your comments always make my day better - thanks, Alyssa! 😊

    Yeah, you don't see this one too often. I just checked - only 38 people have submitted solutions for this challenge, which is low even for a premium challenge.

    1

Please log in to post a comment

Log in with GitHub

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