Hello Everyone. I’m here with this design project and I need your help with something. I need this website to work as follows:
- Whenever someone gets to the page, the page will be 100 VW and 100 VH, making it impossible to move around. All the sections but the HERO will be hidden.
- Then, the user would click on one of the buttons that relates to what he/she wants. By doing that, that section will appear (flexbox for example) and the page will auto scroll down to the subject of interest, and all the rest will remain hidden.
- When it finishes reading, there will be a button to go back to the top. By clicking that button, the page will go back to the same state of the ‘step 1’ of this post, also hiding the content that was just read.
That seems pretty easy to be done, however, there’s something holding me back. In order to things work properly, I need to set a slight delay to the “scroll down to the section” function so the session can be unhidden before it starts scrolling. That would be easy to do if I could control some kind of “on click” interaction that would reveal the section and then scroll down to the section after a determined delay.
Do you guys think you can help me achieve a perfect design?
(I worked my way around that in the “live website”, but it’s not practical or perfect: https://adelmo-pilates.webflow.io/ )