0

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

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

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（直线）并将内容放入其中。所以左属性不需要因为是一条直线而变化。在这方面我无法解决的问题是在对角线滑动到侧面（从右到左）时将内容保持在屏幕中央的精确计算。

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

谢谢你

4

1 回答 1

2

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

.cover {
    z-index: 2;
}

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

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

于 2013-04-25T04:23:57.070 回答