利用transfrom来实现全屏滚动页面效果

一、代码

原理：

将整个可视区域作为一个窗口，保证窗口不变，内容区域在窗口移动，就像是生活中窗户和窗帘的关系，窗户就是我们的窗口，是不进行变化的，而窗帘就是我们的内容区域，在需要变化的时候，我们手动移动，来实现窗帘的移动。这里我们使用了GSAP动画库，可以帮我们快速的实现动画效果。

1.准备HTML结构

<div class="page-container" id="page-container">
    <div class="page">
        <div class="page-title">
            <h1>第一屏标题</h1>
            <h3>第一屏内容</h3>
        </div>
    </div>
    <div class="page-space"></div>
    <div class="page">
        <div class="page-title">
            <h1>第二屏标题</h1>
            <h3>第二屏内容</h3>
        </div>
    </div>
    <div class="page-space"></div>
    <div class="page">
        <div class="page-title">
            <h1>第三屏标题</h1>
            <h3>第三屏内容</h3>
        </div>
    </div>
    <div class="page-space"></div>
</div>

2.准备CSS样式结构

 * {
      margin: 0;
      padding: 0;
  }
.page-container {
  position: relative;
  background-color: skyblue;
  height: 100vh;
  overflow: hidden;
}
.page {
  height: 30vh;
  display: flex;
  color: #fff;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.page-space {
  height: 70vh;
}
.page-title {
  position: relative;
}
h1 {
    margin: 20px 0;
    font-size: 40px;
}
h3 {
    font-size: 30px;
}

2.准备JS代码

//  页面挂载后
window.onload = () =>{
  // 加载cdn资源 https://cdn.bootcdn.net/ajax/libs/gsap/3.12.2/CSSRulePlugin.min.js
    const script = document.createElement('script')
    script.src = 'https://cdn.bootcdn.net/ajax/libs/gsap/3.12.2/gsap.min.js'
    document.body.appendChild(script)
    script.onload = () => {
      // 加载完成后执行
      // 滚动事件
      (document.getElementById('page-container') || document.body).addEventListener('wheel', (e) => {
        // 页面可视高度
        const innerHeight = window.innerHeight
        // 判断e.deltaY大于0 页面向下滑动 位置坐标向上走
        // y轴移动距离 clamp(最小值, 最大值, 阈值在前两个值之间的值)
        let translateY = gsap.utils.clamp(
          -2 * window.innerHeight,
          0,
          +gsap.getProperty('.page', 'y') +
          (-e.deltaY / Math.abs(e.deltaY)) * innerHeight,
        )
        // 更新页面位置
        gsap.to('.page', {
          y: translateY,
          duration: 0.5,
        })

      })
    }
}

二、效果

源代码可在git自取:原生html+css+js构建的一些有意思的模版示例 (github.com)