Html 如何与孙子实现视差效果

我已经在codepen和小型实验项目中实现了几次视差背景效果

这是我最喜欢的教程-

以下是参考教程中的标记：

<div class="parallax">
  <div class="parallax__layer parallax__layer--back">
    ...
  </div>
  <div class="parallax__layer parallax__layer--base">
    ...
  </div>
</div>

基本上，

.parallax

元素有一个透视图，这意味着它可以在3d空间中查看事物

.parallax\uu层--base

（前景层）位于z轴上的

0

。所以它没有离开它的起源

.parallax\uu层--back

（背景层）位于z轴上一个像素处

现在，当您滚动

.parallax

元素时，您可以看到这些背景和前景层在三维空间中移动，从而产生视差效果

但是，只有在滚动

.parallax

元素时，它才起作用-在一个完整、健壮的页面上呢

<div class='home'>
...
  <div class="parallax">
    <div class="parallax__layer parallax__layer--back">
      ...
    </div>
    <div class="parallax__layer parallax__layer--base">
      ...
    </div>
  </div>
  ...
</div>

...
...
...
...

css和标记没有改变。但是现在我正在滚动

.home

元素，而不是

.parallax

元素。前景层和背景层仍在三维空间中，但它仅与

.perspective

元素相关

有没有一种方法可以将这种观点传递到主页上的孙子或曾孙？或者我需要将整个页面分成前台和后台两部分才能达到这个效果吗？

我想出了一个用JavaScript实现的“黑客”方法

下面是一些步骤（您可以称之为算法）：

• 侦听窗口滚动事件
• 等待视差容器（您定义为

  base

  和

  back

  的父对象）出现
• 在我的例子中，我在过渡期间固定了

  back

  并更改了

  top

  的

  base

  值

以下是我的实现（特定于我的用例）：

/**
*哈奇视差效应
*/
常量视口高度=
窗口中的“内部高度”
? 窗内高度
：document.documentElement.offsetHeight
const headerHeight=document.querySelector（'header'）。offsetHeight
window.onscroll=（）=>{
const preFooterPosition=文档
.querySelector（“.pre-footer”）
.getBoundingClientRect（）
/**前页脚在视图中时开始视差*/
如果(
preFooterPosition.top=视口高度
) {
//视差
document.querySelector（'.content'）.classList.add（'transform-content'））
}否则{
//反向视差
文件
.querySelector（“.content”）
.classList.remove（'transform-content'）
}
}

.content{
显示器：flex；
弯曲方向：立柱；
弹性：1；
z指数：1；
位置：相对位置；
排名：0；
过渡：前1名轻松；
}
.转换内容{
顶部：-5雷姆；
}
.水印{
位置：绝对位置；
z指数：0；
弹性：1；
显示器：flex；
}

证据基础
医学大麻研究院证据库是CBMP研究的先进参考工具。包含迄今为止的研究历史和所有新发现，这一前沿引擎支撑着我们的学习内容

白皮书
除了我们的学习平台，学院还发布了一系列权威论文，讨论与CBMP相关的核心主题和主题。注册以查看和下载存档

我有完全相同的问题-实际上在建议中找到了您的问题，因为我正在创建自己的问题。运气好吗？这里是对我的特定用例的一个参考：[！[我希望在用户滚动时，文本在图标上滚动。][1][1][1]：

<div class='home'>
...
  <div class="parallax">
    <div class="parallax__layer parallax__layer--back">
      ...
    </div>
    <div class="parallax__layer parallax__layer--base">
      ...
    </div>
  </div>
  ...
</div>