视差效果滞后和跳跃
[英]Parallax effect is laggy an jumps
问题描述
好的。 我正在尝试制作一个适用于所有浏览器的视差网站。 我已经在所有浏览器上实现了效果，但在某些浏览器中它是滞后和跳跃的。 有什么办法可以让它顺利吗？
这是我的代码
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>
1 个解决方案
解决方案1
1 2017-01-26 13:27:40
尝试transition: transform 200ms ease; 到正在转换的元素。 这应该为您在 js 中应用的转换添加转换。
视差滚动效果变得迟钝
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.