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>

如何降低网页背景图片的滚动速度

1 个答案: