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

Question

想做视差效果，试了很多方法还是不行。现在我有一半的视差效果，背景图像是固定的，没有移动，下一个图像将覆盖前一个图像，但现在我希望它成为当我向下滚动时背景图像也会向下移动但速度比原来的速度。

<!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>

Answer 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>

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

How to make the scroll speed of background image of the webpage slower

css

html

parallax

vertical-scrolling