我想向我的网站添加一些纯 CSS 视差滚动功能，但我尝试过的所有方法似乎都不起作用。我也在这里寻找答案，但没有任何答案可以回答我的问题。有谁知道我如何获取此代码：http://wolfleader116.github.io/ （抱歉，Doctype 声明不像实际文件中那样缩进。） 并添加纯CSS视差滚动功能，使背景以半速滚动？谢谢！
您可以使用
background-attachment: fixedbackground-image.parallax div{
background-attachment: fixed;
height: 50vh;
text-indent : -9999px;
position : relative;
background-position : center center;
background-size : cover;
&:nth-child( 2n ) {
box-shadow : inset 0 0 1em #111;
}
}
这就是我使用视差滚动制作网站（WIP）的方式（http://www.ideathhead.co.uk）：
HTML：
使用以下属性添加部分标签。 （每个部分代表一张幻灯片）
<section name="home" id="home" data-type="background" data-speed="10">
<p class="buzz-out" id="Welcome"></p>
</section>
CSS：
这将确保您的背景图像跨越整个页面，并针对每种分辨率调整其大小！
#home {
background: url(img/slide1.png) 50% 0 repeat fixed;
min-height: 100%;
background-size: cover;
margin: 0 auto;
}
这就是字面上的意思，无论如何，对于视差滚动的基础知识，如果您在互联网上进一步挖掘，您可以尝试一些更酷的效果，记住，谷歌是您的朋友！
___________________________________________________________________
___________________________________________________________________
此外，一个提示是，如果您想稍后在滚动时平滑地添加按钮到某些页面，请将其添加到 JavaScript 文件中：
JS：
这个脚本使页面滚动更加平滑，因此它不会仅仅跳转到页面的一部分
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
然后，在 HTML 中的标签中，将 href 设置为要滚动到的部分的 ID，它也会顺利完成！举个例子， 这是这个部分：
<section name="home" id="home" data-type="background" data-speed="10">
<p class="buzz-out" id="Welcome"></p>
</section>
这是按钮：
<a href="#home">CLICK</a>
记住，这是ID而不是名字，因为我一开始对此感到困惑！
我很乐意提供帮助:)
尝试滚动此页面codepen
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("https://i.ibb.co/JnWFTCM/vadim-kaipov-6k-I0qhmxc4-unsplash.jpgimg_parallax.jpg");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.parallax {
/* The image used */
background-image: url("https://i.ibb.co/JnWFTCM/vadim-kaipov-6k-I0qhmxc4-unsplash.jpgimg_parallax.jpg");
/* Set a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<p>Scroll Up and Down this page to see the parallax scrolling effect.</p>
<div class="parallax"></div>
<div style="height:1000px;background-color:red;font-size:36px">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>
</body>
</html>