使用css和滚动动画创建伪对角线蒙版

Question

我正在努力创造一种效果，当滚动完成时，会出现一个对角线并显示其中的内容，但是会认为内容正常流动...

在下图中，我认为你可以更好地理解：

css代码：

#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;
}

问题1：写入“lorem ipsum ...”的div的内容必须只出现在黑暗中，就像在这个对角线和溢出中一样：隐藏。

问题2：它对角线是一个固定位置的div，然后让它覆盖整个屏幕我使用滚动来改变属性离开他。如果我将内容放入对角线，我将不得不补偿内容div中对角线的移动（给人的印象是他总是在屏幕的中心）。

问题3：对角线是通过属性偏斜完成的;将内容放置在其中，必须补偿倾斜以及保持内容在中心的对角线需要左边的值的事实，该值根据其内容的“位置”而变化（因为距离的内容）顶部大于下部。）

可能的解决方案： 我对它做了很多测试，而我接近的是在对角线上创建一个div square（直）并将内容放入其中。所以左边的房产不需要因为是一条直线而变化。在这方面我无法解决的问题是精确的计算，以保持内容在屏幕的中心，而对角线滑到一侧（从右到左）。

有人见过这样的事情或知道如何帮助我吗？

谢谢

Answer 1

您可以利用position: relative;并使用z-index使这些元素脱颖而出：

.cover {
    z-index: 2;
}

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

以下是演示：http://jsfiddle.net/83Wyy/931/