视差效果是一个跳跃laggy

-1

好的。我试图制作一个适用于所有浏览器的视差网站。我已经在所有的浏览器上取得了效果，但在某些浏览器中却很慢并且很jump jump。有什么办法可以让它流畅吗？视差效果是一个跳跃laggy

这里是我的代码

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{ 
 
\t font-family: 'aka-acid-typogroteskregular'; 
 
} 
 

 
/*...............................colors..................................*/ 
 
.black{ 
 
\t color:#000000; 
 
} 
 

 
.white{ 
 
\t color:#ffffff; 
 
} 
 

 
/*...............................text-centering..................................*/ 
 
.text-center{ 
 
\t text-align:center; 
 
} 
 

 
.text-right{ 
 
\t text-align:right; 
 
} 
 

 
/*...............................navigation..................................*/ 
 
nav{ 
 
\t padding-right:100px; 
 
} 
 

 
nav ul{ 
 
\t list-style:none; 
 
} 
 

 
nav ul li{ 
 
\t padding:30px 20px 20px 20px; 
 
\t cursor:pointer; 
 
} 
 

 
nav ul li:hover{ 
 
\t color:#DCDCDC; 
 
} 
 

 
*{ 
 
    -webkit-backface-visibility: hidden; 
 
    -moz-backface-visibility: hidden; 
 
    -ms-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
\t padding:0; 
 
\t margin:0; 
 
\t letter-spacing:2px; 
 
} 
 

 
.inline{ 
 
\t display:inline-block; 
 
\t *display:inline; 
 
\t zoom:1; 
 
} 
 

 
html, body 
 
{ 
 
    width:100%; 
 
\t height:100%; 
 
} 
 

 
.cont{ 
 
    width:100%; 
 
    height:100%; 
 
    overflow:hidden; 
 
    position:relative; 
 
    webkit-overflow-scrolling:touch; 
 
} 
 

 

 
.rlt-container{ 
 
\t position:absolute; 
 
\t width:100%; 
 
\t height:100%; 
 
    display:block; 
 
\t -webkit-background-size: cover; 
 
\t -moz-background-size: cover; 
 
\t -o-background-size: cover; 
 
\t background-size: cover; 
 
\t background-repeat: no-repeat; 
 
\t 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{ 
 
\t position:absolute; 
 
\t width:100%; 
 
    height:100%; 
 
    z-index:999; 
 
\t background-image: url('../media/backgrounds/dark_overlay.png'); 
 
} 
 

 
.title-cont{ 
 
\t position: absolute; 
 
\t left: 0; 
 
\t right: 0; 
 
\t margin-left: auto; 
 
\t margin-right: auto; 
 
\t top:50%; 
 
\t margin-top:-49.5px; 
 
} 
 

 
.title{ 
 
\t font-size:82px; 
 
\t font-weight: 200; 
 
}

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
 
\t \t <?php include 'incl/base_url.php';?> 
 
\t \t <link rel="stylesheet" type="text/css" href="css/global.css"> 
 
\t \t <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
\t \t <!--[if lt IE 9]> 
 
\t \t \t <script src="js/html5shiv.js"></script> 
 
\t \t <![endif]--> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script> 
 
\t \t <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script> 
 
\t \t <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> 
 
\t \t <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script> 
 
\t </head> 
 
\t <body> 
 
\t \t <!--Home--> 
 
\t \t <div class="cont"> 
 
\t \t \t <div class="overlay123"> 
 
\t \t \t \t <header> 
 
\t \t \t \t \t <?php include 'incl/nav.php';?> 
 
\t \t \t \t </header> 
 
\t \t \t \t <div class="title-cont text-center"> 
 
\t \t \t \t \t <h2 class="title font white">Liokoki</h2> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div id="home" class="rlt-container first" style="background-image: url('media/backgrounds/MG_0069.jpg');"> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <!--About--> 
 
\t \t <div class="cont"> 
 
\t \t \t <div class="overlay123"> 
 
\t \t \t \t <div class="title-cont text-center"> 
 
\t \t \t \t \t <h2 class="title font white">About</h2> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div id="about" class="rlt-container others" style="background-image: url('media/backgrounds/MG_0129.jpg');"> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <!--Gallery--> 
 
\t \t <div class="cont"> 
 
\t \t \t <div class="overlay123"> 
 
\t \t \t \t <div class="title-cont text-center"> 
 
\t \t \t \t \t <h2 class="title font white">Gallery</h2> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div id="gallery" class="rlt-container others" style="background-image: url('media/backgrounds/MG_0107.jpg');"> 
 

 
\t \t \t </div> 
 

 
\t \t </div> 
 
\t \t <!--blog--> 
 
\t \t <div class="cont"> 
 
\t \t \t <div class="overlay123"> 
 
\t \t \t \t <div class="title-cont text-center"> 
 
\t \t \t \t \t <h2 class="title font white">Blog</h2> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div id="blog" class="rlt-container others" style="background-image: url('media/backgrounds/MG_0142.jpg');"> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <!--Contact--> 
 
\t \t <div class="cont"> 
 
\t \t \t <div class="overlay123"> 
 
\t \t \t \t <div class="title-cont text-center"> 
 
\t \t \t \t \t <h2 class="title font white">Contact</h2> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div id="contact" class="rlt-container others" style="background-image: url('media/backgrounds/DJI_0011.jpg');"> 
 

 
\t \t \t </div> 
 
\t \t </div> 
 
\t \t <script src="js/effects.js"></script> 
 
\t </body> 
 
</html>

来源

2017-01-26 Kinggeov

尝试transition: transform 200ms ease;到正在转化的元素。这应该会增加您在js中应用的转换。

来源

2017-01-26 13:27:40 Davey

没有。这使得它甚至更糟...... – Kinggeov

好的。你是否以另一种方式解决了问题？ – Davey

我仍在尝试... – Kinggeov

视差效果是一个跳跃laggy

回答

相关问题