Create a pseudo diagonal mask with css and scroll animation

Question

I am struggling to create an effect that as the scroll is done, a diagonal will appear and reveal the contents inside it, but giving the idea that the content is flowing normally ...

In the image below I think you can better understand:

css codes:

#diagonal{
    background: url("/img/bg-dark.jpg") #000;
    transform: skew(45deg);
    -ms-transform: skew(45deg);
    -webkit-transform: skew(45deg);
    -webkit-backface-visibility: hidden;
    outline: 1px solid transparent;
    -o-transform: skew(45deg);
    -moz-transform: skew(45deg);
    position: fixed;
    overflow: hidden;
    z-index:0;
    width: 300%;
    height: 300%;
    right: -600%;
    top: 0%;
}
body{
    background: #fff url("/img/bg.jpg");
    font-family: "Lato",sans-serif;
    font-size: 13px;
    overflow: hidden;
    height: 100%;
    width: 100%;
    position: relative;
}

Problem 1: the contents of the div which is written "lorem ipsum ..." must appear only in the dark, as if in this diagonal and an overflow: hidden.

Problem 2: it Diagonal is a div with fixed position, then to make it cover the entire screen I use the scroll to change the property left him. If I put the contents into the diagonal, I will have to compensate for the movement of the diagonal in the content div (to give the impression that he is always in the center of the screen).

Problem 3: The diagonal is done with the property skew; placing the content within it, have to compensate for the skew and the fact that a diagonal to keep the contents in the center needs values ​​for the left that vary according to the "position" the contents within it (because the distance from the top is larger than the lower).

Possible solution: I made many tests about it, and what I got closer, was to create a div Square (straight) into the diagonal and put the contents inside. So the left property need not vary due to be a straight line. The problem I could not solve in this regard was the exact calculation to keep the contents in the center of the screen while the diagonal slides to the side (right to left).

Anyone ever seen anything like this or know how to help me?

thank you

Answer 1

You could take advantage of position: relative; and use z-index to make those element stand out:

.cover {
    z-index: 2;
}

.above {
    position: relative;
    z-index: 3;
}

Here's a demo: http://jsfiddle.net/83Wyy/931/