水平CSS仅具有大于100vw的层的视差效果

Question

如何使用仅具有水平CSS的视差效果来引导站点？

要求

• CSS只有视差
• 父层必须具有宽度/高度== 100vw/100vh
• 子图层的宽度/高度必须> 100vw/100vh
• 子图层必须在视觉上与父图层宽度对齐100%
  • 到目前为止,子图层在技术上确实有100%的父级宽度,但由于perspective它们在视觉上看起来并没有占据父母宽度的100%
• 子层(第一个除外)必须相对于其父层具有顶部偏移量
• 结果必须基于计算才能具有最大的灵活性
• 必须跨浏览器固体(至少最新版本的专业)

到目前为止我做了什么

实际上这个问题是一个后续问题.
这是我在SASS或CSS中使用当前模型状态的PEN .

工作模拟示例(jQuery)

在JavaScript中,它很容易实现我正在寻找的东西.所以这是一个PEN模拟我想用CSS模仿的效果.

已知问题

我现在最关心的问题是,浏览器似乎以不同的方式呈现这种情况.查看浏览器窗口(chrome vs ff)的屏幕截图,滚动到下方的右下角.但我希望这可以避免.

那里有很多视差教程.为什么会有所不同？

实际上我研究了很多,但没有找到甚至一个描述如何实现水平视差(意味着子层的宽度> 100vw).当然,那里有水平视差滚动.但它们都有一个共同点:子层宽度总是<= 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 视差网站的文章中，有一个关于使用perspective-origin-x: 100%和解决 webkit 相关错误的更新transform-origin-x: 100%。

如果我用 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