是否可以在 fullpage.js 的部分及其内容之间插入蒙版背景？

Question

目标：

渐变背景扩展100vh 并随着用户滚动而变化。

更具体地说：

• 页面分为多个部分，每个部分的高度为100vh。
• 每个卷轴滚动一个完整的部分。
• “主”背景的高度应为number of sections * 100vh。
• 重点是：叠加层或蒙版仅“显示”部分“主”背景，但不会随着部分滚动而滚动，同时将部分内容保持在前面。李>

示例 || CodePen:

:root {
      --background-def: #2f3542;
    }

    body {
      background: linear-gradient( to bottom, #b721ff, #2af598, #fec051, #fee140, #fa709a);
      background-size: 100%;
      background-repeat: no-repeat;
      margin: 0;
    }

    body:before {
      content: "";
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      z-index: -1;
      
      /*Original CodePen*/
      // background: linear-gradient(to right bottom, rgba(255,0,0,0.2), #21D4FD );
      
      /*What I would like to achieve*/
      // background: radial-gradient(
      // 	at 80vw 80vh,
      // 	transparent,
      // 	rgba(47, 53, 66, 0.1),
      // 	rgba(47, 53, 66, 0.2),
      // 	rgba(47, 53, 66, 0.3),
      // 	rgba(47, 53, 66, 0.4),
      // 	rgba(47, 53, 66, 0.5),
      // 	rgba(47, 53, 66, 0.6),
      // 	rgba(47, 53, 66, 0.7),
      // 	rgba(47, 53, 66, 0.8),
      // 	rgba(47, 53, 66, 0.9),
      // 	#2f3542 60%
      // );
      
      /*OR using a mask*/
      -webkit-mask-image: radial-gradient( farthest-corner at 80vw 80vh, transparent, black 40%);
      background: var(--background-def);
    }

    // Not demo related
    html {
      margin: 0;
      font-family: "Muli", sans-serif;
      font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }

    #container {
      background-color: rgba(255, 255, 255, 0.5);
      margin: 80px 10%;
      padding: 30px 60px;
      border-radius: 20px;
      box-shadow: 0 3px 26px 0 rgba(0, 0, 0, 0.20);
    }

<div id="container">
  <header>
    <h1>Scrolling Gradient</h1>
    <p>I decided to adapt the <a target="_blank" href="https://codepen.io/MadeByMike/pen/ZOrEmr">CSS Only Scroll Indicator</a> technique to make a background gradient that canges with scroll position. The top right corner of the gradient changes while the
      bottom right remains the same. This works by overlaying 2 gradients, The first is a top-to-bottom gradient with a height of the content. This contains the colors you want to cycle through. The other is a top-left, to bottom-right gradient from transparent
      to a solid color. This gradient is fixed to the viewport dimensions and pulled behind text, similar to the scroll indicator.</p>
  </header>

  <main>
    <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <h3>Tristique Aenean Etiam Cras</h3>
    <p>Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel
      scelerisque nisl consectetur et.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et
      magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Sed
      posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
    <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <ul>
      <li>Ullamcorper Aenean Ornare</li>
      <li>Ridiculus Lorem Malesuada Consectetur</li>
      <li>Aenean Tristique Sit Lorem Purus</li>
      <li>Vehicula Egestas Mollis Cursus Nibh</li>
    </ul>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean
      lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <h3>Bibendum Aenean Dapibus Tristique</h3>
    <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et
      magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Sed
      posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
    <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <ul>
      <li>Ullamcorper Aenean Ornare</li>
      <li>Ridiculus Lorem Malesuada Consectetur</li>
      <li>Aenean Tristique Sit Lorem Purus</li>
      <li>Vehicula Egestas Mollis Cursus Nibh</li>
    </ul>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean
      lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <h2>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</h2>
    <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur.</p>
    <h3>Tristique Aenean Etiam Cras</h3>
    <p>Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel
      scelerisque nisl consectetur et.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et
      magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Sed
      posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
    <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <ul>
      <li>Ullamcorper Aenean Ornare</li>
      <li>Ridiculus Lorem Malesuada Consectetur</li>
      <li>Aenean Tristique Sit Lorem Purus</li>
      <li>Vehicula Egestas Mollis Cursus Nibh</li>
    </ul>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean
      lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <h3>Bibendum Aenean Dapibus Tristique</h3>
    <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et
      magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Sed
      posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
    <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <ul>
      <li>Ullamcorper Aenean Ornare</li>
      <li>Ridiculus Lorem Malesuada Consectetur</li>
      <li>Aenean Tristique Sit Lorem Purus</li>
      <li>Vehicula Egestas Mollis Cursus Nibh</li>
    </ul>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean
      lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <h3>Tristique Aenean Etiam Cras</h3>
    <p>Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Donec sed odio dui. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel
      scelerisque nisl consectetur et.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et
      magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Sed
      posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
    <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
    <ul>
      <li>Ullamcorper Aenean Ornare</li>
      <li>Ridiculus Lorem Malesuada Consectetur</li>
      <li>Aenean Tristique Sit Lorem Purus</li>
      <li>Vehicula Egestas Mollis Cursus Nibh</li>
    </ul>
    <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Sed posuere consectetur est at lobortis. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Nullam id dolor id nibh ultricies vehicula ut id elit. Aenean
      lacinia bibendum nulla sed consectetur. Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <h3>Bibendum Aenean Dapibus Tristique</h3>
    <p>Cras mattis consectetur purus sit amet fermentum. Donec id elit non mi porta gravida at eget metus. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Etiam porta sem malesuada magna mollis euismod. Cum sociis natoque penatibus et
      magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec ullamcorper nulla non metus auctor fringilla. Sed
      posuere consectetur est at lobortis. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean lacinia bibendum nulla sed consectetur. Nulla vitae elit libero, a pharetra augue.</p>
    <p>Donec sed odio dui. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>

  </main>
</div>

---

挑战：使用Fullpage.js 复制此效果。

旁注：我已经联系了fullpage.js的创建者，可以看issuehere。
为了提供更好地理解问题所需的基本知识，我在这里详细介绍。但主要是作为fullpage.js的一个简单介绍。

请随意向下滚动到标题为“第二次冲击”的部分，直接跳到挑战的核心。

基本结构：

<div id="fullpage">
    <div class="section">One</div>
    <div class="section">Two</div>
    <div class="section">Three</div>
    <div class="section">Four</div>
</div>

(required by fullpage.js)

• 第一个凹凸：实现“长渐变背景”效果。

  由于 fullpage.js 将每个部分的大小调整为100vh，因此“长背景”应该应用于父元素或具有position: absolute || fixed; 和“正确”尺寸的元素（即@987654338）是合乎逻辑的@。
  

  所以我尝试将其应用于以下元素：

  • html
  • body
  • wrapper div（包装了 required <div id="fullpage"> 元素）
  • 甚至到部分本身
    
    如果需要，我可以列出我尝试过的所有选项，但我认为这并不重要。
    要点是所有选项都会导致部分背景固定到位（滚动时没有变化）或包含在100vh 中的完整背景（始终可见）。
    

  第一次碰撞解决方案：

  我注意到当滚动时，fullpage.js 改变了<div id="fullpage"> 的transform: translate3d(0px, [height-offset]px, 0px);，所以尽管不情愿，我还是给它应用了背景。这也导致了 100vh 中包含的背景。
  
  除非我这样做：
  

  html {
    height: auto !important;
  }
  

  或

  <div class="wrapper">
    <div id="fullpage">
      <div class="section">One</div>
      <div class="section">Two</div>
      <div class="section">Three</div>
      <div class="section">Four</div>
    </div>
  </div>
  

  读了一点后，我发现 this answer 可以解释这种行为。
  
  简而言之，如果我理解正确，html 和 body 都有 @ 987654351@，body 占用 html 的 100%，html 占用 100% 的视口，并且由于 <div id="fullpage"> 获得 height: 100%，它“继承”了 100% 的视口。因此，导致100vh 中包含背景。
  所以第一个选项只是用auto 覆盖html 的100% 视口，这实际上使它成为一个包装器。而第二个选项，创建一个与body 和html 不同的包装器，它自动根据其子项的大小获取高度，实际上得到了我们400vh，因为每个部分都是100vh。

---

• 第二个凸点：在部分及其内容之间插入掩码。

  我尝试了什么：

  1. 将掩码应用于section 类。
     它不起作用，因为每个部分都会得到一个掩码，并且会随之滚动。
  2. 将掩码应用于<div id="fullpage">。
     没有工作，因为即使我修复了它（使用伪类和位置absolute 或fixed），它创建了高度为400vh 的蒙版，而我希望它只在视口上（100vh )。
  3. 更改结构并在 <div id="fullpage"> 之前添加一个元素，使其充当掩码，它可以工作，但我无法找到将部分内容放在前面的方法。
     

  我目前所拥有的 || CodePen:

new fullpage('#fullpage', {
  licenseKey: 'YOUR KEY HERE',
  autoScrolling: true,
});

:root {
  --background-def: #2f3542;
  --green: #5cd3ad;
  --orange: #f5c156;
  --red: #e6616b;
  --purple: #c678dd;
}

html {
  height: auto !important;
  min-height: 100% !important;
}

#fullpage {
  z-index: 2;
  background: linear-gradient( to bottom, var(--green), var(--orange), var(--red), var(--purple));
}

.mask {
  position: fixed;
  height: 100vh;
  width: 100vw;
  background: radial-gradient( at 80vw 80vh, transparent, rgba(47, 53, 66, 0.1), rgba(47, 53, 66, 0.2), rgba(47, 53, 66, 0.3), rgba(47, 53, 66, 0.4), rgba(47, 53, 66, 0.5), rgba(47, 53, 66, 0.6), rgba(47, 53, 66, 0.7), rgba(47, 53, 66, 0.8), rgba(47, 53, 66, 0.9), #2f3542 60%);
  
  /*OR a mask*/
  /*   -webkit-mask-image: radial-gradient(
    farthest-corner at 80vw 80vh,
    transparent,
    black 40%
  );
  background: var(--background-def); */
  z-index: 3;
}

.section {
  text-align: center;
  font-size: 3em;
  
  /*Initially I had the mask here or in an after/before psuedo class but it stuck to the section and scrolled with it for the obvious reasons*/
  z-index: 5;
}

<link href="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.css" rel="stylesheet" />
<script src="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="mask"></div>
<div id="fullpage">
  <div class="section">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>
  <div class="section">Four</div>
</div>

如您所见，尽管z-index 已按应有的方式更改，但部分的内容（当前为标题）显示在背景后面。 我错过了什么？

有没有可能实现我的想法？

提前谢谢你。

P.S.，如果有什么不同，最终，我希望在这些部分的背景上呈现一个画布。 this 之类的东西，但这不是主要问题。

Answer 1

遵循Temani Afif's 的建议。

我找到了一种方法来实现我的想法。说实话，这在某种程度上是一种“破坏”FullPage 所需结构但没有后果的解决方法。

解决办法是：

1.在<div id="fullpage"> 中添加一个div，它将充当叠加层：

<div id="fullpage">
  <div id="overlay"></div>
  <div class="section">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>
  <div class="section">Four</div>
</div>

2.定义一个 CSS 变量：

--overlay-position: 0px;

3.样式化您的叠加层：

#overlay {
  position: fixed;
  height: 100vh;
  width: 100vw;
  -webkit-mask-image: radial-gradient(
    farthest-corner at 80vw 80vh,
    transparent,
    black 40%
  );
  background: var(--background-def); /* is defined at :root */
  transition: all 1200ms ease 0s;    /* 1200 is what I chose for FullPage's scrolling speed */
  transform: translate3d(0px, var(--overlay-position), 0px);
}

4.利用FullPage的回调方法onLeave：

const docStyle = document.documentElement.style;
new fullpage("#fullpage", {
  licenseKey: "YOUR KEY HERE",
  autoScrolling: true,
  scrollingSpeed: 1200,
  onLeave: function (origin, destination, direction) {
    let newPosition = destination.item.offsetTop;
    docStyle.setProperty("--overlay-position", Math.round(newPosition) + "px");
  }
});

工作示例和解释：

const docStyle = document.documentElement.style;
new fullpage("#fullpage", {
  licenseKey: "YOUR KEY HERE",
  autoScrolling: true,
  scrollingSpeed: 1200,
  onLeave: function(origin, destination, direction) {
    let newPosition = destination.item.offsetTop;
    docStyle.setProperty("--overlay-position", Math.round(newPosition) + "px");
  },
});

:root {
  --background-def: #2f3542;
  --green: #5cd3ad;
  --orange: #f5c156;
  --red: #e6616b;
  --purple: #c678dd;
  --overlay-position: 0px;
}

html {
  height: auto !important;
}

#overlay {
  position: fixed;
  height: 100vh;
  width: 100vw;
  -webkit-mask-image: radial-gradient( farthest-corner at 80vw 80vh, transparent, black 40%);
  background: var(--background-def);
  transition: all 1200ms ease 0s;
  transform: translate3d(0px, var(--overlay-position), 0px);
}

#fullpage {
  background: linear-gradient( to bottom, var(--green), var(--orange), var(--red), var(--purple));
}

.section {
  text-align: center;
  font-size: 3em;
  color: white;
  width: 100%;
  height: 100%;
  z-index: 5;
}

<link href="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.css" rel="stylesheet" />
<script src="https://rawgit.com/alvarotrigo/fullPage.js/dev/src/fullpage.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="fullpage">
  <div id="overlay"></div>
  <div class="section">One</div>
  <div class="section">Two</div>
  <div class="section">Three</div>
  <div class="section">Four</div>
</div>

或CodePen

说明：

由于 fullpage.js 实际上并没有滚动页面，而是更改了<div id="fullpage"> 转换：translate3d(0px, [height-offset]px, 0px);，因此我们无法添加滚动事件侦听器。
因此，我将相同的变换应用于叠加层。 它作为<div id="fullpage"> 的子元素插入，因为如果叠加层在其外部，我无法正确堆叠元素。

现有的问题是调整大小，有时叠加层无法正确调整大小。我会尽快更新这个答案。