javascript - 网站显示效果中的视差滚动(盗梦空间风格)

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 的动画部分:在 body 滚动页面应该缩放到最大，然后一个接一个地消失，下一页 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是每个section的索引号，sections应该按(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；您可以使用更大或更小的值来更改滚动的灵敏度)。当 wheel 事件发生时，我们会发现用户从事件的 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 找到实现上述功能的笔

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