时间戳

首页 > 解决方案 > 网站展示效果中的视差滚动（Inception Style）

javascript - 网站展示效果中的视差滚动（Inception Style）

问题描述

我想使用像这样的视差效果创建一页网站：视差效果。我做了所有的研究，但我没有找到任何解释如何做到这一点的例子，或者这种视差效应的名称是什么。我真的需要帮助！

此效果在滚动时放大页面，如下面的 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;可以使用。

标签： javascriptjqueryhtmlcssparallax

解决方案

我不太确定您将这种滚动效果称为什么 - 缩放页面滚动？- 但它可以在现代浏览器中通过 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 转换功能缩放部分非常容易。

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 事件。我们还必须保留一个变量，该变量包含我们在最小值 (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在每个动画帧上调用该函数。

推荐阅读