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 スクエア (ストレート) を作成し、その中にコンテンツを配置することでした。したがって、左のプロパティは直線であるため、変化する必要はありません。この点で私が解決できなかった問題は、対角線が横 (右から左) にスライドする間、コンテンツを画面の中央に保持するための正確な計算でした。

このようなものを見たことがある人、または私を助ける方法を知っている人はいますか?

ありがとうございました

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 に答える