I’m looking to create a page transition which I can animate while a page is loading - my idea is to have a rotated set of 3 full-width and full-height blocks sweep across the screen from bottom-left to top-right to reveal the page. Currently I’m struggling with coding the CSS to create the overlay as it breaks out of the page, but also doesn’t cover it.
Wow excellent - thanks Paul! It’s definitely given me some thoughts about what I could do.
The 3 blocks would literally just be background colours, no content. Just a way to transition the visitor from one page to another - I’ll be careful to use it fairly sparingly to avoid any annoyance or performance issues but these ideas definitely help me in deciding where I want to go with it
Just thinking ahead about the final implementation - it may be best if I were to add this as an overlay on the “next” page, so that this overlay appears first while the page is loading. Would window.onload be the best approach to use to fire the animation and reveal the finished page?
Also, from a UX perspective what would be your thoughts on implementing such a feature - would it be an annoyance to see it on every page in your opinion and it would be better to just have a lazy load as the user scrolls to pull the content in? I suppose it depends on the context - if it were a news website where you’re likely to navigate multiple pages I guess it would be annoying…but a small-scale site like a portfolio?
You can’t put anything on the ‘next’ page because you are on ‘this page’.
The routine would need to be on every page so that it runs when the page starts loading. Of course you couldn’t do it for external links not under your control.
That would be too late as you want the overlay to be there before anything loads. You could add an inline snippet at the top of the html before you call any other resources and that could blank out the viewport.
Then you could wait for the page to load with your script (place it at the end of the html just before the closing body tag so that the page has loaded). The script could simply add a class that then allows the css animations to begin.
Of course you would need to detect if js is available before you blank out the viewport with the css otherwise users with js disabled get a blank page.
I don’t like it;)
I like to see the screen loading progressively even if things are initially misplaced. I like to know that something is happening and spinners don’t really tell you that something is happening as they just spin.
Your time would be better spent in improving the ‘above the fold page load’ so that there is no delay for the user anyway.