Question

确定。我试图建立一个适用于每个浏览器的视差网站。我已经在所有浏览器上实现了这种效果，但在某些浏览器中它是滞后和跳跃的。有没有办法使它顺利？

这是我的代码

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>

Answer 1

尝试transition: transform 200ms ease;到要转换的元素。这应该会添加您在js中应用的转换过渡。

视差效应滞后跳跃

1 个答案: