title: Create a pseudo diagonal mask with css and scroll animation
body: <p>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 ...</p>
  
  <p>In the image below I think you can better understand:</p>
  
  <p><img src="https://i.stack.imgur.com/pnTn9.png" alt=""></p>
  
  <p>css codes:</p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p><strong>Problem 1:</strong> 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.</p>
  
  <p><strong>Problem 2:</strong> 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).</p>
  
  <p><strong>Problem 3:</strong> 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).</p>
  
  <p><strong>Possible solution:</strong>
  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).</p>
  
  <p>Anyone ever seen anything like this or know how to help me?</p>
  
  <p>thank you</p>