是否可以在 fullpage.js 的部分及其内容之间插入蒙版背景？
Is it possible to insert a masked background between fullpage.js's sections and their content?
目标：
扩展 100vh 并随着用户滚动而变化的渐变背景。
更具体地说：
- 该页面 div 分为多个部分，每个部分的高度为
100vh。
- 每卷滚动一整节。
- "main" 背景的高度应为
number of sections * 100vh。
- 关键是： 覆盖层或蒙版 "shows" 只是 "main" 背景的一部分，但不会随着部分滚动而滚动，全部同时将各部分的内容放在前面。
示例 || 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.
的简单介绍
请向下滚动到标题为 "Second bump" 的部分，随时跳到挑战的核心。
基本结构：
<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 由 fullpage.js)
第一个障碍：实现"Long gradient background"效果。
由于 fullpage.js 将每个部分的大小调整为 100vh，因此 "long background" 应该应用于 parent 元素或具有 [=23] 的元素是合乎逻辑的=] 和 "correct" 维度，即 400vh。
所以我尝试将其应用于以下元素：
htmlbodywrapper 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都有height: 100%;，body取html的 100% 而 html 占据视口的 100%，并且由于 <div id="fullpage"> 获得 height: 100% 它 "inherits" 占据视口的 100%。因此，导致 100vh.
中包含背景，因此第一个选项只是用 auto 覆盖 html 的 100% 视口，这有效地使其成为包装器.而第二个选项，创建一个不同于 body 和 html 的包装器自动根据其 children 的大小获取高度，实际上我们得到了 400vh 因为每个部分都是 100vh。
第二个颠簸：在节和它的内容之间插入一个掩码。
我试过的：
- 正在对
sectionclass应用蒙版。
它不起作用，因为每个部分都会有一个遮罩，并且会随之滚动。
- 正在对
<div id="fullpage">应用蒙版。
没有用，因为即使我修复了它（使用伪 classes 和位置 absolute 或 fixed），它也会在我想要的时候创建高度为 400vh 的蒙版它仅在视口上 (100vh)。
- 更改结构并在
<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., 如果它有什么不同，最终，我想在这些部分的背景上呈现一个 canvas。类似于 this，但这不是主要问题。
遵循 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"> 的子元素插入，因为如果叠加层在它外面，我将无法正确堆叠元素。
调整大小存在一个问题，有时叠加层无法正确调整大小。我会尽快更新这个答案。
目标：
扩展 100vh 并随着用户滚动而变化的渐变背景。
更具体地说：
- 该页面 div 分为多个部分，每个部分的高度为
100vh。 - 每卷滚动一整节。
- "main" 背景的高度应为
number of sections * 100vh。 - 关键是： 覆盖层或蒙版 "shows" 只是 "main" 背景的一部分，但不会随着部分滚动而滚动，全部同时将各部分的内容放在前面。
示例 || 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.
请向下滚动到标题为 "Second bump" 的部分，随时跳到挑战的核心。
基本结构：
<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 由 fullpage.js)
第一个障碍：实现"Long gradient background"效果。
由于 fullpage.js 将每个部分的大小调整为
100vh，因此 "long background" 应该应用于 parent 元素或具有 [=23] 的元素是合乎逻辑的=] 和 "correct" 维度，即400vh。所以我尝试将其应用于以下元素：
htmlbodywrapperdiv（包装 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都有height: 100%;，body取html的 100% 而html占据视口的 100%，并且由于<div id="fullpage">获得height: 100%它 "inherits" 占据视口的 100%。因此，导致100vh.
中包含背景，因此第一个选项只是用auto覆盖html的 100% 视口，这有效地使其成为包装器.而第二个选项，创建一个不同于body和html的包装器自动根据其 children 的大小获取高度，实际上我们得到了400vh因为每个部分都是100vh。
第二个颠簸：在节和它的内容之间插入一个掩码。
我试过的：
- 正在对
sectionclass应用蒙版。
它不起作用，因为每个部分都会有一个遮罩，并且会随之滚动。 - 正在对
<div id="fullpage">应用蒙版。
没有用，因为即使我修复了它（使用伪 classes 和位置absolute或fixed），它也会在我想要的时候创建高度为400vh的蒙版它仅在视口上 (100vh)。 - 更改结构并在
<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., 如果它有什么不同，最终，我想在这些部分的背景上呈现一个 canvas。类似于 this，但这不是主要问题。
遵循 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>
解释：
由于 fullpage.js 实际上并没有滚动页面，而是改变了 <div id="fullpage"> 转换：translate3d(0px, [height-offset]px, 0px);，我们无法添加滚动事件侦听器。
因此，我将相同的变换应用于叠加层。
它作为 <div id="fullpage"> 的子元素插入，因为如果叠加层在它外面，我将无法正确堆叠元素。
调整大小存在一个问题，有时叠加层无法正确调整大小。我会尽快更新这个答案。