Rotated page overlay

[Shoxt3r]

Hi all,

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.

Any thoughts please?

[PaulOB]

Maybe this would be a start.

body {
  margin: 0;
}

.overlay-container {
  position: fixed;
  left: 0;
  right: 0;
  top: -100vh;
  bottom: -100vh;
  overflow: hidden;
  background: red;
  transform: rotateZ(45deg);
  animation: 15s reveal forwards;
  transform: translate3d(0, 0, 0) rotateZ(45deg);
}

@keyframes reveal {
  100% {
    transform: translate3d(300%, -300%, 0) rotateZ(45deg);
  }
}
.overlay {
  z-index: 1;
  height: 100vh;
}
.blue {
  background-color: blue;
}

.orange {
  background-color: orange;
}

.yellow {
  background-color: yellow;
}

A bit magic numberish but something to play with

[Shoxt3r]

Thanks Paul!

I just tested this on my 22" 1920x1080 display but it didn’t quite fit the full width and height of my screen (left corners exposed on the top-left and bottom-right)?

Would I be better to create a rotated SVG and set it to the background of a full-width, full-height element or would that not work?

Cheers!

[PaulOB]

What’s going to be inside these 3 blocks?

If it’s just a background colour then you can probably just oversize the overlay with a very large number.

e.g.

I wasn’t quite sure what type of reveal was going to happen so the demo is just a proof of concept as a starting point.

If you can give a little more info about the overlay behaviour then it may help towards a solution.

You might want to look for some inspiration here:

Page Loading Effects | Demo 10

[PaulOB]

Or if its just a reveal you could use clip-path and one overlay.

e.g.

You can make it more complicated with more points ion the polygon if you want.

[Shoxt3r]

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

[Shoxt3r]

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?

Thanks again Paul.

[PaulOB]

@Shoxt3r

it may be best if I were to add this as an overlay on the “next” page,

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.

@Shoxt3r

Would window.onload b

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.

@Shoxt3r

Also, from a UX perspective what would be your thoughts on implementing such a feature

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.