网站显示效果中的视差滚动（初始样式）

Question

我想使用这样的视差效果创建一个网页网站：Parallax Effect。我做了所有的研究，但没有找到任何示例说明如何执行此操作，或此视差效应的名称是什么。我真的需要帮助！

此效果将放大滚动页面，如下面的GIF所示。

这是我到目前为止所拥有的：

html {
  height: 600vh;
  overflow: -moz-scrollbars-vertical;
  overflow-y: scroll;
}

body {
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  position: fixed;
  align-items: center;
  justify-content: end;
}

#parent {
  padding: 0;
  margin: 0;
  height: 600vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  transform-style: preserve-3d;
  perspective: 250px;
}

.page {
  padding: 0;
  margin: 0;
  height: 100vh;
  width: 100vw;
  position: absolute;
  background: rgba(0, 0, 0, 0.1);
  text-align: center;
  box-shadow: inset 5px 5px red, inset -5px -5px red;
}

.page:nth-child(1) {
  transform: scale(1);
}

.page:nth-child(2) {
  bottom: -98%;
  transform: translate3d(0, 0, -500px);
}

.page:nth-child(3) {
  bottom: -196%;
  transform: translate3d(0, 0, -1000px);
}

.page:nth-child(4) {
  bottom: -294%;
  transform: translate3d(0, 0, -1500px);
}

.page:nth-child(5) {
  bottom: -392%;
  transform: translate3d(0, 0, -2000px);
}

.page:nth-child(6) {
  bottom: -490%;
  transform: translate3d(0, 0, -2500px);
}

<div id="parent">
  <div class="page">Page 1</div>
  <div class="page">Page 2</div>
  <div class="page">Page 3</div>
  <div class="page">Page 4</div>
  <div class="page">Page 5</div>
  <div class="page">Page 6</div>
</div>

我被JavaScript部分的动画所困： 在正文滚动上，页面应缩放到最大，然后一个又一个消失， 下一页page2应该代替page1，依此类推。要使滚动条保持粘性，可以使用scroll-snap-type: y;。

Answer 1

我不太确定您如何称呼这种滚动效果-缩放页面滚动吗？ -但可以在现代浏览器中通过CSS比例转换和少量JavaScript来实现。

设置页面部分的样式

通过为各个部分赋予位置absolute并固定其CSS坐标，我可以将各个部分彼此堆叠。

HTML：

<section style="background-color: red;">
    <h1>This is section number one!!</h1>
</section>

<section style="background-color: blue;">
    <h1>This is section number two!!</h1>
</section>

CSS：

html, body {
    position: relative;
    margin: 0;
    height: 100%;
    overflow: hidden;
}

section {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0; right: 0;
    top: 0; bottom: 0;
    text-align: center;
}

设置每个部分的初始比例。

我希望每个部分都为上一节的三分之一。这意味着第一部分的规模为1；秒的比例将是1/3；第三个是1/9，第四个是1/27，依此类推。因此，如果 n 是每个部分的索引号，则这些部分应按（1/3）^ n缩放。使用CSS3 transform feature缩放部分非常容易。

JavaScript：

document.addEventListener( 'DOMContentLoaded', function() {
    var sections = document.getElementsByTagName( 'section' ),
        i = 0;
    for ( i; i < sections.length; i++ ) {
        sections[i].style.transform = 'scale(' + Math.pow( 1/3, i ) + ')';
    }
} );

更改滚动比例

由于页面没有溢出，因此我们需要收听wheel event。我们还必须保留一个变量，该变量包括我们在最小值（0）和最大值之间的滚动距离（我选择了1000；您可以使用更大或更小的值来更改滚动的灵敏度）。发生转轮事件时，我们会从事件的deltaY属性中找到用户滚动了多少，调整了滚动计数器的数量，并相应地缩放了部分。

要计算每个部分必须缩放多少，只比计算初始比例要复杂一点。它仍然是1/3的幂，尽管我们现在必须从 n 中减去比例乘以段总数除以最大计数器值。

您可能还希望使用requestAnimationFrame以获得更流畅的体验。

JavaScript：

var counter = 0,
    counter_max = 1000,
    total = document.getElementsByTagName( 'section' ).length;

window.addEventListener( 'wheel', function( e ) {
    counter += e.deltaY;
    if ( counter > counter_max ) counter = counter_max;
    if ( counter < 0 ) counter = 0;
    requestAnimationFrame( applyScale );
} );

function applyScale() {
    var sections = document.getElementsByTagName( 'section' ),
        i = 0;
    for ( i; i < sections.length; i++ ) {
        var scale = Math.pow( 1/3, i - counter * total / counter_max );
        sections[i].style.transform = 'scale(' + scale + ')';
    }
}

结果

可以在https://codepen.io/jla-/pen/aMNgxy

找到实现上述目的的笔

这应该是一个入门的有用框架。在页面顶部添加锚点将涉及一个click侦听器，该侦听器会将计数器变量设置为适当的值，并在每个动画帧上调用applyScale函数。