web-dev-qa-db-ja.com

100vwを超えるレイヤーでの水平CSSのみの視差効果

水平CSSのみの視差効果のあるサイトをbootstrapする方法は？

要件

  • CSSのみの視差
  • 親レイヤーの幅/高さ== 100vw/100vh
  • 子レイヤーの幅/高さは> 100vw/100vhである必要があります
  • 子レイヤーは、親レイヤーの幅と視覚的に100％整列する必要があります
    • 今では、子レイヤーは技術的には親の幅の100％を持っていますが、perspectiveのため、視覚的には親の幅の100％を占めていないように見えます
  • 子レイヤー（最初のレイヤーを除く）には、親に対してトップオフセットが必要です。
  • 最大限の柔軟性を得るには、結果は計算に基づく必要があります
  • クロスブラウザである必要があります（少なくともメジャーの最新バージョン）

enter image description here


私がこれまでにしたこと

実際、この質問は フォローアップ質問 です。
これは、現在のモックアップ状態が [〜＃〜] sass [〜＃〜] または [〜＃〜] css [〜＃〜] のPENです。 =。

動作シミュレーション例（jQuery）

JavaScriptでは、私が探しているものを実現するのは非常に簡単です。 これがPENです CSSで模倣したい効果をシミュレートします。

既知の問題

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

enter image description here


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

実際、私は本当に多くのことを研究しましたが、水平視差（子レイヤーの幅が100vwを超えることを意味します）を実装する方法の説明も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>
htmlcssparallaxcss-transforms
26
Axel

私はあなたが目標としているものを正確に得ていると100％確信しているわけではありませんが、少なくともあなたのために一歩前進しています。 この記事 のpure-css視差サイトで、perspective-Origin-x: 100%とtransform-Origin-x: 100%を使用したWebkit関連のバグの回避に関する更新がありました。

これをx方向とy方向の両方で、sassを使用した現在のモックアップケースに適用すると、#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=01

1
kball