如何让网页背景图片的滚动速度变慢答案

【问题标题】：How to make the scroll speed of background image of the webpage slower如何让网页背景图片的滚动速度变慢
【发布时间】：2018-12-24 02:05:56
【问题描述】：

我想制作视差效果，但我尝试了很多方法仍然无法做到。现在我有一半的视差效果，即背景图像是固定的，没有移动，下一张图像将覆盖前一张图像，但现在我希望它变成当我向下滚动时，背景图像也会向下移动，但比原来的速度。

My code here

<!DOCTYPE html>
<html>
<style>
html, body
{
	height: 100%;
	width: 100%
}

html
{
	overflow:hidden;
}

body
{
	color: #fff;
	margin: 0;
	padding: 0;
	perspective: 1px;
	transform-style: preserve-3d;
	overflow-x:hidden;
	overflow-y:scroll;
}


*
{
	margin:0;
	padding:0;
	font-family: Century Gothic;
}

.top
{
	background-image:linear-gradient(rgba(0,0,0,0.8),rgba(0,0,0,0.5)), url('../image/Kinkis-Bottomless-Brunch-Lead-Image.jpg');
	height: 100vh;
	background-size: cover;
	background-position:center;
	background-attachment:fixed;
}




.bottom
{
	background-image:url('../image/AdobeStock_80592193.jpeg');
	height: 100vh;
	background-size: cover;
	background-position:center;
	background-attachment:fixed;
}



.main{
	max-width: 1500px;
	margin: auto;
	margin-left:80px;
}


.main2{
	max-width: 1500px;
	margin: auto;
	margin-left:80px;
}



.nav
{
	float:left;
	list-style-type: none;
	margin-top:55px;
	margin-left:65px;
}


.account
{
	font-size: 25px;
	font-family:"Times New Roman", Times, serif;
}



ul li
{
	display: inline-block;
}



ul li a
{
	text-decoration:none;
	color: #fff;
	padding: 5px 20px;
	border: 1px solid transparent;
	transition: 0.6s ease;

}


ul li a:hover
{
	background-color: #fff;
	color:#000;
}


ul li .active a
{
	background-color: #fff;
	color: #000;
		
}


.logo img
{
	float: left;
	width: 150px;
	height: auto;
	margin-top: 40px;
}



.title
{
	position: absolute;
	top: 45%;
	left: 34%;
	
}

.title h1
{
	color:#fff;
	font-size:70px;
	font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}


.title2
{
	position: absolute;
	top: 110%;
	left: 23%;
}

.title2 h2
{
	color: black;
	font-size:70px;
	font-family: "Brush Script MT",Arial, Helvetica, sans-serif;
}

</style>
  <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>Home Page</title>
    <link rel="stylesheet" href="css/style.css">
  </head>

  <body>
    <div class="top">
      <div class="main">
        <div class="logo">
          <img alt="" src="TAO_LOGO1.jpg">
        </div>
        <ul class="nav">
          <li><a href="#">Gallary</a></li>
          <li><a href="#" class="account">Account</a></li>
        </ul>
        <div class="title">
          <h1>TAO Restaurant</h1>
        </div>
      </div>
    </div>




    <div class="bottom">
      <div class="main">
        <div class="title">
          <h1>TAO Restaurant</h1>
        </div>
      </div>
    </div>

  </body>

</html>

【问题讨论】：

jsfiddle.net/6gcax9vq/1 这是我的代码
创建parallax purely with css 有一种非常老套的方法，但除此之外，我建议您为此使用javascript。如果你没有足够的 JS 知识，有很多插件，比如this one。
我认为即使这样也会很有帮助How TO - Parallax Scrolling
实际上..我已经尝试了这些代码，但它对我不起作用...它会导致背景滚动或保持固定..
@Matt 这只是描述了 OP 已经具有的效果。它也不是真正的视差，因为它只是“固定”图像的位置，这与 OP 想要的相反（让它们移动更慢，而不是 根本不移动。）

标签： css html parallax vertical-scrolling

【解决方案1】：

这是一个非常简单的使用 jQuery 的视差效果示例：

$(document).scroll(function() {
  var scroll = $(window).scrollTop();
  $("img").css("top", "0" + (scroll / 1.8) + "px");
});

body {
  margin: 0;
}

img {
  position: absolute;
  top: 0;
  z-index: -1;
}

.block {
  background: #ffffff;
  position: relative;
  margin-top: 100px;
  height: 1000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
  <img src="https://placeimg.com/640/480/any">
  <div class="block">Some text</div>
</div>

这里同样的方法适用于您的案例：

$(document).scroll(function() {
  var scroll = $(window).scrollTop();
 $("#header").css("background-position", "0%" + (scroll / -1.8) + "px");
});

html,
body {
  height: 100%;
  width: 100%
}

html {
}

body {
  color: #fff;
  margin: 0;
  padding: 0;
}

* {
  margin: 0;
  padding: 0;
  font-family: Century Gothic;
}

.top {
  background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)), url('https://placeimg.com/640/640/any');
  height: 500px;
  background-size: cover;
  background-position: 0 0;
  background-attachment: fixed;
}

.bottom {
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.main {
  max-width: 1500px;
  margin: auto;
  margin-left: 80px;
}

.main2 {
  max-width: 1500px;
  margin: auto;
  margin-left: 80px;
}

.nav {
  float: left;
  list-style-type: none;
  margin-top: 55px;
  margin-left: 65px;
}

.account {
  font-size: 25px;
  font-family: "Times New Roman", Times, serif;
}

ul li {
  display: inline-block;
}

ul li a {
  text-decoration: none;
  color: #fff;
  padding: 5px 20px;
  border: 1px solid transparent;
  transition: 0.6s ease;
}

ul li a:hover {
  background-color: #fff;
  color: #000;
}

ul li .active a {
  background-color: #fff;
  color: #000;
}

.logo img {
  float: left;
  width: 150px;
  height: auto;
  margin-top: 40px;
}

.title {
  position: absolute;
  top: 45%;
  left: 34%;
}

.title h1 {
  color: #fff;
  font-size: 70px;
  font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}

.title2 {
  position: absolute;
  top: 110%;
  left: 23%;
}

.title2 h2 {
  color: black;
  font-size: 70px;
  font-family: "Brush Script MT", Arial, Helvetica, sans-serif;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="header" class="top">
  <div class="main">
    <div class="logo">
      <img alt="" src="TAO_LOGO1.jpg">
    </div>
    <ul class="nav">
      <li><a href="#">Gallary</a></li>
      <li><a href="#" class="account">Account</a></li>
    </ul>
    <div class="title">
      <h1>TAO Restaurant</h1>
    </div>
  </div>
</div>




<div class="bottom">
  <div class="main">
    <div class="title">
      <h1>TAO Restaurant</h1>
    </div>
  </div>
</div>

【讨论】：

是的，我编辑了我的答案以包含您的具体情况。您可以使用任何可以包含 int 值的 CSS 属性将其应用于任何元素。
兄弟！！你有Skype吗？...它仍然不适用于我的代码...\
兄弟，我可以加你的Skype吗？
很高兴我能帮上忙 :) 我没有 Skype，但如果您认为无法提供帮助，可以在其他问题中提及我。我不能保证总是回答，但如果我有时间我会试试的。