jquery - 使用 css 和滚动动画创建伪对 Angular 线 mask

Question

我正在努力创造一种效果，当滚动完成时，会出现一条对 Angular 线并显示其中的内容，但给人的想法是内容正常流动......

下图我想你可以更好的理解:

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 的内容必须只出现在黑暗中，就好像在这个对 Angular 线上和溢出:隐藏。

问题2: Diagonal是一个固定位置的div，然后为了让它覆盖整个屏幕我用滚动条改变了他留下的属性。如果我把内容放在对 Angular 线上，我将不得不补偿内容 div 中对 Angular 线的移动(给人一种他总是在屏幕中央的印象)。

问题3:对 Angular 线是用属性倾斜完成的；将内容放在其中，必须补偿偏斜以及将内容保持在中心的对 Angular 线需要左侧值的事实，该值根据其中内容的“位置”而变化(因为距顶部比底部大)。

可能的解决方案: 我对此做了很多测试，我更接近的是在对 Angular 线中创建一个 div 正方形(直线)并将内容放入其中。所以左边的属性不需要因为是一条直线而变化。在这方面我无法解决的问题是在对 Angular 线向侧面(从右到左)滑动时将内容保持在屏幕中央的精确计算。

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

谢谢

Answer 1

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

.cover {
    z-index: 2;
}

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

这是一个演示:http://jsfiddle.net/83Wyy/931/