Jquery 使用css和滚动动画创建伪对角遮罩

我正在努力创造一种效果，当卷轴完成时，一条对角线将出现，并显示其中的内容，但给出了内容正常流动的想法

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

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:对角线是用属性skew完成的；将内容放在其中，必须补偿倾斜以及对角线保持内容在中心需要值这一事实​​对于根据“位置”而变化的左侧，其内的内容（因为与顶部的距离大于下部的距离）

可能的解决方案： 我做了很多测试，我更接近的是，在对角线上创建一个div正方形（直线），并将内容放在里面。所以左属性不需要改变，因为它是一条直线。在这方面，我无法解决的问题是，当对角线向一侧（从右向左）滑动时，如何精确计算使内容保持在屏幕中央

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

---

谢谢

您可以利用

职位：相对并使用
z-index
使这些元素脱颖而出：

.cover {
    z-index: 2;
}

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

这里有一个演示：
hi Blender，在这种情况下，我需要在对角线上放置一个背景图像，对角线位于“白色区域”上方，而不是相反方向。我已经用css代码更新了我的问题！谢谢你的回复；）我更新了问题！