javascript - 视差效果滞后且跳跃-6ren

javascript - 视差效果滞后且跳跃

转载作者：行者123 更新时间：2023-11-28 17:21:58

好的。我正在尝试制作一个适用于所有浏览器的视差网站。我已经在所有浏览器上实现了效果，但在某些浏览器中它是滞后和跳跃的。有什么办法可以让它顺畅吗？

这是我的代码

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>

最佳答案

尝试 transition: transform 200ms ease; 到正在转换的元素。这应该为您在 js 中应用的转换添加一个转换。

关于javascript - 视差效果滞后且跳跃，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41874370/

c# - 如何避免用户界面卡顿/滞后？
我有一个简单的应用程序，它读取数据库，然后经过一些操作将结果写入另一个数据库。第一行代码使用给用户的消息和屏幕日志更新 ui，然后全部包装在带有 using 和其他 try/catch 的 try/
sql - 聚集超前/滞后
我有一个名为activity的表，其中有一个memberId和一个时间戳。我想找出在给定的月份中有多少成员执行了一项 Activity (即-在 Activity 表中有记录)，但在过去12个月中，谁
r - 滞后、平均和替换变量
我有前三列数据。第一个列表示 id 在前一天做了某件事。我试图通过添加一个新变量“new”来从 dat 转到 dat2，该变量执行三件事: 将 yest 的值复制到前一天。但日子并不总是连续的。因此，
c# - 如何避免用户界面卡顿/滞后？
我有一个简单的应用程序，它读取数据库，然后经过一些操作将结果写入另一个数据库。第一行代码使用给用户的消息和屏幕日志更新 ui，然后全部包装在带有 using 和其他 try/catch 的 try/
r - 不规则时间序列中的“滞后”
我有 data.frame，它显示了股票的当前出价和要价以及我当时的信号。 time bid_price ask_price signal 10:10:01.000500
javascript - 移动背景卡顿/滞后
我无法让网站正常运行。它有许多移动背景并使用 css-invert 过滤器。请看这里: http://epicstudios.de/blackwhite/ 我的问题是，即使是普通计算机也无法处理移动
JavaFX 进入鼠标事件延迟/滞后
我创建了一个矩形对象网格并将它们添加到一个 Pane 中。每个矩形都有一个连接到它的鼠标事件监听器，它由 MouseEvent.Entered 触发器触发。当用户将鼠标移到矩形上时，处理程序只是更改矩
c - 为什么控制台应用程序游戏在笔记本电脑上运行缓慢/滞后
感觉我的笔记本电脑不允许控制台应用程序以一定的速度运行，因为我也尝试过其他应用程序，并且它们也随机滞后。我的机器不老，也不应该这样做，它具有i7-4720HQ CPU @ 2.60GHz（8 CPUs
javascript - 由于图像而加载页面时负载很大(滞后)
我现在正面临这个问题。当我的页面加载 (DOM) 时，我调用一个返回 1880 张图像的函数，这些图像存储在 Steam 服务器中。这些图像在回调之后被添加到我的 DOM 中，该回调返回我的数组响应
Swift Scheduler 滞后？
我正在尝试创建一个每两秒执行一次函数的应用程序。为了实现这一点，我使用 Timer.scheduledTimer 函数。问题是该函数没有按照应有的那样每两秒执行一次。通常应用程序开始时的间隔是 2 秒
安卓 GPS 滞后
我得到了这个 gps 接收器方法，它将一些数据存储到数据库中。 // GPS private void addGPSListener() { globalconstant.db
ios - UISwitch 滞后
我有一个 UISwitch，它可以在切换值时更改其上方 UILabel 的文本。每隔一段时间(大约 2% 的时间)文本不会改变。标签的文本被保存到文本文件中，因此我需要准确性。由于这个问题是间歇性的，
ios - UIRefreshControl 滞后
我有一个包含用户帖子的表格 View 。每个帖子都有图片、用户名和帖子本身。刷新控件的操作是使用来自 Parse 的数据重新加载表。除了拉动刷新时的极度延迟外，一切都完美无缺。不知道是因为每个单元格里
iPhone UIViewController 滞后
我有一个“详细信息”页面，其中显示俱乐部的信息。该页面是一个 UIViewController，由按钮和标签组成，以实现这种外观(就像分组的小表格)。当我在设备上加载此页面时，它比我的应用程序中的任何
ios - ActionSheet 滞后
我有 ActionSheet 的代码，它可以连接的东西有点慢？ @IBAction func showAction(_ sender: UIButton) { let actionSheetC
java - BufferStrategy 滞后
我的桌面应用程序滞后。我认为 java.awt.image.BufferStrategy 中有问题。 private void render() { BufferStrategy bs
Android ViewPager 滞后
你好，我有一个包含多个页面的 viewpager(使用 fragment 状态寻呼机)，以及一些 png 作为这些页面的背景。我已经遵循了在 Ui 中显示位图 (http://developer.an
C# RichTextBox 滞后
我在 WPF 窗体上有一个 richtextbox 控件。它有 SpellChecking.IsEnabled 设置为 true 并且 VerticalScrollBarVisibility 设置为
Android SQLite 滞后
在我的 android 应用程序中，我将数据存储在本地 SQLite 数据库中。在这个数据库的大小小于 8-9 MB 之前，一切都很顺利；然而，一旦数据库大小约为 9 MB，它就会继续在 logcat
android webview滚动不流畅，滞后
我正在开发一个简单的 Android 应用程序，它只有一个 Activity ，一个 WebView。它在我的手机(Android 7.1.2 Nougat 版本)上运行良好，但我收到许多用户的投诉，

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 视差效果滞后且跳跃