Diagonal reveal with css or JS or both!?

red_ice

Just wondering if anyone has come across a way to do a reveal diagonally?

2 images fixed, full screen on a different z-index.

If they were relative, when you scroll the top image would reveal the bottom one, with no parallax effect - simples.

This is the desired animation... However, is it possible to do this diagonally, not vertically? I can do it horizontally if i want, just animate width to 0%. But animating diagonally is a different ballgame altogether.

I've tried a div, with an inner div skewed / rotated and positioned absolute, and a BG image on a div inside the inner div that is fixed and skewed the other way etc... no joy.

Any ideas welcome. First time in years I've been stumped on something like this as it needs to be compatible with ie9.

Am I missing something really obvious here?

daymobrew

I've seen some very cool things on Codrops that use SVG to animate stuff.
http://tympanus.net/codrops/2015/06/18/card-expansion-effect-svg-clippath/
http://tympanus.net/codrops/2015/09/14/creating-material-design-ripple-effects-svg/

I didn't read the details of the articles but just went "Wow!" at the demos.

Maybe useful and might support IE9.