水平CSSは、100vwを超えるレイヤーでのみ視差効果を適用します

Question

水平のサイトをブートストラップする方法CSSのみ視差効果？視差のみ

親層の幅/高さ== 100vw/100VH

子層の幅/高さ> 100vw/100VH

子層を持っている必要があります持っている必要があります

要件

• CSS視覚的に100％を親レイヤの幅に合わせる必要があります
  • LYは、トップがその親に対してオフセット持っている必要がありますが原因でperspectiveに、彼らは視覚的に親が（最初は除く）
• 子層幅の100％を取るためには表示されません幅親の100％を持っている
計算に基づかなければならない
• 結果は最大限の柔軟性を持って
• クロスブラウザ固体（メジャーの少なくとも最新バージョン）

なければなりません私は実際にこの質問がfollow-up questionで、これまで

を行っている何

。
現在のモックアップ状態がSASSまたはCSSのPENがあります。

ワーキングシミュレー例（jQueryの）JavaScriptで

その私が探しているものを達成するのは非常にシンプル。 So here is a PENは、私がCSSを模倣したいと思っている効果をシミュレートします。

既知の問題

が、私は今では最も懸念だ問題は事実である、そのブラウザは異なり、このシナリオをレンダリングするように見えます。下の右下にスクロールされたブラウザウィンドウのスクリーンショット（chrome vs ff）を参照してください。しかし、これが避けられればと願っています。

はそこに非常に多くの視差のチュートリアルがあります。なぜこれは違うのですか？

は、実際に私は本当に多くのことを研究したが水平視差を実装する方法もない1つの記述は、（子層が幅> 100vwを持っていることを意味）が見つかりませんでした。もちろんそこにはhorizontal parallax scroll tutsがあります。しかし、それらはすべて1つの共通点を持っています。子層の幅は常に< = 100vwです。実際はその差です。

html, 
 
body { 
 
    height: 100%; 
 
    overflow: hidden; 
 
    width: 100%; 
 
} 
 

 
body { 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
} 
 

 
#projection { 
 
    -webkit-perspective: 1px; 
 
    perspective: 1px; 
 
    -webkit-perspective-origin: 0 0; 
 
    perspective-origin: 0 0; 
 
    height: 100%; 
 
    overflow: auto; 
 
    width: 100%; 
 
} 
 

 
.pro { 
 
    -webkit-transform: scale(1) translate(0px, 0px) translateZ(0px); 
 
    transform: scale(1) translate(0px, 0px) translateZ(0px); 
 
    height: 100%; 
 
    position: absolute; 
 
    -webkit-transform-origin: 0 0; 
 
    transform-origin: 0 0; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    width: 100%; 
 
} 
 

 
.pro--1 { 
 
    -webkit-transform: scale(4) translate(0px, 0px) translateZ(-3px); 
 
    transform: scale(4) translate(0px, 0px) translateZ(-3px); 
 
    width: 110%; 
 
} 
 

 
.pro--2 { 
 
    -webkit-transform: scale(3) translate(0px, 1em) translateZ(-2px); 
 
    transform: scale(3) translate(0px, 1em) translateZ(-2px); 
 
    width: 110%; 
 
} 
 

 
.pro--3 { 
 
    -webkit-transform: scale(2) translate(0px, 2em) translateZ(-1px); 
 
    transform: scale(2) translate(0px, 2em) translateZ(-1px); 
 
    width: 110%; 
 
} 
 

 
.pro { 
 
    background: rgba(0, 0, 0, 0.33); 
 
    box-shadow: inset 0 0 0 5px orange; 
 
    color: orange; 
 
    font-size: 4em; 
 
    line-height: 1em; 
 
    text-align: center; 
 
} 
 

 
.pro--2 { 
 
    box-shadow: inset 0 0 0 5px green; 
 
    color: green; 
 
} 
 

 
.pro--3 { 
 
    box-shadow: inset 0 0 0 5px blue; 
 
    color: blue; 
 
}

<div id="projection"> 
 
    <div class="pro pro--1">pro--1</div> 
 
    <div class="pro pro--2">pro--2</div> 
 
    <div class="pro pro--3">pro--3</div> 
 
</div>

Answer 1

私は私はあなたがターゲットとしている正確に何を得ているが、私は、少なくともあなたのために一歩前進を持っている100％かどうか分かりません。純粋なCSS視差サイトのthis articleには、perspective-origin-x: 100%とtransform-origin-x: 100%を使ってWebkit関連のバグを回避するためのアップデートがありました。

私はSASSを使用して、現在のモックアップの場合には、xとy方向の両方にこれを適用した場合、私はこのようなことばかり#projectionと.proを変えてしまう：

#projection 
    perspective: $perspective + 0px 
    perspective-origin: 100% 100% 
    height: 100% 
    overflow: auto 
    width: 100% 

.pro 
    @include projection() 
    height: 100% 
    position: absolute 
    transform-origin: 100% 100% 
    transform-style: preserve-3d 
    width: 100% 

視差挙動はあまり見え始めます私が期待しているようにここに最終的なペンです：https://codepen.io/kball/pen/qPbPWa/?editors=0100