Diagonal Div Page transition

[celli 88 Likes (Contributor)]

I have a crude example in my codePen of a diagonal div that I am trying to cover the entire window, and when I click the button the diagonal shape will slide down to the bottom left of the window, and reveal the content underneath.

 

I am sure there is a much better way to approach this, so the diagonal is not a huge shape stretching way beyond the borders of the browser and so that it looks like a diagonal triangle shape, as it slides down to the left and out of view at any screen size. Can someone shed some light...?

See the Pen RNNvQW by celli (@celli) on CodePen

[Diaco 1,997 Likes (Superhero)]

Hi celli 

 

personally i prefer to using SVG or Canvas for this type of page intro / preloading gate , or use simple div fade out effect .

 

a simple demo , check this out  :

 

See the Pen JoozxE by MAW (@MAW) on CodePen

[Demorus 3 Likes (Newbie)]

Maybe for bigger compatibility try drawing two svg shapes and set those as a background. You can then make it responsive by setting background-size:cover or use percentage.

[celli 88 Likes (Contributor)]

yes, these are awesome ideas. thanks!

[Demorus 3 Likes (Newbie)]

No problem. The people here are really helpful and nice. 

 

Diaco is a greensock magician by the way