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

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

转载作者：太空宇宙更新时间：2023-11-04 07:08:45

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

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>

最佳答案

这是一个使用 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>

关于css - 如何让网页背景图片的滚动速度变慢，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51363284/

文章推荐： html - 仅更改表格的一部分的背景图像

文章推荐： java - 多个嵌套循环的数学等价物

文章推荐： c++ - UDP 服务器停止接收数据

太空宇宙

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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