确定。我试图建立一个适用于每个浏览器的视差网站。我已经在所有浏览器上实现了这种效果，但在某些浏览器中它是滞后和跳跃的。有没有办法使它顺利？
这是我的代码
function Draw(){
requestAnimationFrame(Draw);
scrollEvent();
}
Draw();
function scrollEvent(){
var height = $(window).height();
if($(document).scrollTop() <= height){
$('#home').css('transform', 'translate3d(0, ' + ($(document).scrollTop() + 'px, 0)'));
$('#about').css('transform', 'translate3d(0, ' + ($(document).scrollTop() - height + 'px, 0)'));
}else if($(document).scrollTop() <= 2*height){
$('#about').css('transform', 'translate3d(0, ' + ($(document).scrollTop() -height + 'px, 0)'));
$('#gallery').css('transform', 'translate3d(0, ' + ($(document).scrollTop() - 2*height + 'px, 0)'));
}else if($(document).scrollTop() <= 3*height){
$('#gallery').css('transform', 'translate3d(0, ' + ($(document).scrollTop() -2*height + 'px, 0)'));
$('#blog').css('transform', 'translate3d(0, ' + ($(document).scrollTop() - 3*height + 'px, 0)'));
}else if($(document).scrollTop() <= 4*height){
$('#blog').css('transform', 'translate3d(0, ' + ($(document).scrollTop() -3*height+ 'px, 0)'));
$('#contact').css('transform', 'translate3d(0, ' + ($(document).scrollTop() - 4*height + 'px, 0)'));
}
}/*...............................fonts..................................*/
@font-face {
font-family: 'aka-acid-typogroteskregular';
src: url('../fonts/actypogrotesk-webfont.eot');
src: url('../fonts/actypogrotesk-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/actypogrotesk-webfont.woff2') format('woff2'),
url('../fonts/actypogrotesk-webfont.woff') format('woff'),
url('../fonts/actypogrotesk-webfont.ttf') format('truetype'),
url('../fonts/actypogrotesk-webfont.svg#aka-acid-typogroteskregular') format('svg');
font-weight: normal;
font-style: normal;
}
.font{
font-family: 'aka-acid-typogroteskregular';
}
/*...............................colors..................................*/
.black{
color:#000000;
}
.white{
color:#ffffff;
}
/*...............................text-centering..................................*/
.text-center{
text-align:center;
}
.text-right{
text-align:right;
}
/*...............................navigation..................................*/
nav{
padding-right:100px;
}
nav ul{
list-style:none;
}
nav ul li{
padding:30px 20px 20px 20px;
cursor:pointer;
}
nav ul li:hover{
color:#DCDCDC;
}
*{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
padding:0;
margin:0;
letter-spacing:2px;
}
.inline{
display:inline-block;
*display:inline;
zoom:1;
}
html, body
{
width:100%;
height:100%;
}
.cont{
width:100%;
height:100%;
overflow:hidden;
position:relative;
webkit-overflow-scrolling:touch;
}
.rlt-container{
position:absolute;
width:100%;
height:100%;
display:block;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-repeat: no-repeat;
background-position:center top;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.first{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.others{
-webkit-transform: translate3d(0, 100, 0);
-moz-transform: translate3d(0, 100, 0);
-ms-transform: translate3d(0, 100, 0);
transform: translate3d(0, 100, 0);
}
.overlay123{
position:absolute;
width:100%;
height:100%;
z-index:999;
background-image: url('../media/backgrounds/dark_overlay.png');
}
.title-cont{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
top:50%;
margin-top:-49.5px;
}
.title{
font-size:82px;
font-weight: 200;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<?php include 'incl/base_url.php';?>
<link rel="stylesheet" type="text/css" href="css/global.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>
</head>
<body>
<!--Home-->
<div class="cont">
<div class="overlay123">
<header>
<?php include 'incl/nav.php';?>
</header>
<div class="title-cont text-center">
<h2 class="title font white">Liokoki</h2>
</div>
</div>
<div id="home" class="rlt-container first" style="background-image: url('media/backgrounds/MG_0069.jpg');">
</div>
</div>
<!--About-->
<div class="cont">
<div class="overlay123">
<div class="title-cont text-center">
<h2 class="title font white">About</h2>
</div>
</div>
<div id="about" class="rlt-container others" style="background-image: url('media/backgrounds/MG_0129.jpg');">
</div>
</div>
<!--Gallery-->
<div class="cont">
<div class="overlay123">
<div class="title-cont text-center">
<h2 class="title font white">Gallery</h2>
</div>
</div>
<div id="gallery" class="rlt-container others" style="background-image: url('media/backgrounds/MG_0107.jpg');">
</div>
</div>
<!--blog-->
<div class="cont">
<div class="overlay123">
<div class="title-cont text-center">
<h2 class="title font white">Blog</h2>
</div>
</div>
<div id="blog" class="rlt-container others" style="background-image: url('media/backgrounds/MG_0142.jpg');">
</div>
</div>
<!--Contact-->
<div class="cont">
<div class="overlay123">
<div class="title-cont text-center">
<h2 class="title font white">Contact</h2>
</div>
</div>
<div id="contact" class="rlt-container others" style="background-image: url('media/backgrounds/DJI_0011.jpg');">
</div>
</div>
<script src="js/effects.js"></script>
</body>
</html>
答案 0 :(得分：0)
尝试transition: transform 200ms ease;到要转换的元素。这应该会添加您在js中应用的转换过渡。