Question

所以我正在尝试为这家当地餐厅创建一个网站，现在我正在为nav ul（menu）制作出动画。以前，我只是添加了一些scrollReveal动画来对导航栏按钮和介绍性信息进行动画处理。效果很好……那是当我开始使用拉出菜单时，当我完成时，我注意到导航栏的scrollReveal动画不起作用。简介消息的动画效果很好，但是吗？我将代码粘贴到codePen中，并且可以在其中运行，但不在此处，也没有在Sublime编辑器中，有什么想法吗？

window.sr = ScrollReveal();
		sr.reveal('.b1', {
			duration: 2000,
			origin: 'top',
			distance: '80px'
		});
		window.sr = ScrollReveal();
		sr.reveal('.b2', {
			duration: 1500,
			origin: 'top',
			distance: '80px'
		});
		window.sr = ScrollReveal();
		sr.reveal('.b3', {
			duration: 1000,
			origin: 'top',
			distance: '80px'
		});
		window.sr = ScrollReveal();
		sr.reveal('.w1', {
			duration: 3000,
			origin: 'right',
			distance: '200px'
		});
		window.sr = ScrollReveal();
		sr.reveal('.w2', {
			duration: 3500,
			origin: 'right',
			distance: '150px'
		});
		window.sr = ScrollReveal();
		sr.reveal('.w3', {
			duration: 4000,
			origin: 'right',
			distance: '150px'
		});

html, body {
	margin: 0;
	padding: 0;
}

/*.side-menu {
	position: fixed;
	top: 134.5px;
	background-color: white;
	width: 299.5px;
	padding: 10px;
	transition: all 2s ease;
	left: -330px;
}

.side-menu ul {
	list-style-type: none;
	text-align: center;
}

.side-menu li {
	color: grey;
	font-size: 1.8rem;
	margin: 6px;
	margin-left: -35px;
	margin-bottom: 35px;
	font-family: 'Ubuntu';
}

.side-menu li:hover {
	color: orange;
	cursor: pointer;
}*/

.menu-bars{
	position: fixed;
	left: 50px;
	top: 80px;
}

.b1, .b2, .b3 {
	width: 60px;
	height: 8px;
	background-color: red;
	margin:.8rem;
	border-radius: 5px;
	transition: all 2s ease;
}

.b1 {
	background-color: lightgreen;
}

.b2 {
	background-color: white;
}

.b3 {
	background-color: #ff4d4d;
}

/*.b1-animate {
	position: relative;
	background-color: lightgreen;
	left: 157px;
	top: 41px;
	border-radius: 0;
	width: 100px;
}

.b2-animate {
	background-color: white;
	position: relative;
	left: 35px;
	top: 21px;
	border-radius: 0;
	width: 122px;
	height: 7.5px;
}

.b3-animate {
	position: relative;
	background-color: #ff4d4d;
	right: 65px;
	border-radius: 0;
	width: 100px;
}*/

.intro {
	background-image: url("img/mex-9.jpg");
	width: 100%;
	height: 100vh;
	background-attachment: fixed;
	background-size: cover;
	margin-bottom: 0;
}

h1 {
	font-family: 'Cedarville Cursive';
	position: absolute;
	left: 700px;
	top: 50px;
	color: white;
	font-size: 3rem;
}

h2 {
	text-align: center;
	margin-bottom: 300px;
	font-family: 'Cedarville Cursive';
	font-size: 2.5rem;
	padding: 30px;
}

.about-us {
	margin-top: 0;
	background-color: lightgrey;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>El Metate | Mexican food</title>
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<header>
		<nav>
			<!-- <div class="side-menu">
				<ul>
					<li>Home</li>
					<li>About</li>
					<li>Menu</li>
					<li>Contact</li>
					<li>Location</li>
					<li>News</li>
				</ul>
			</div> -->
			<div class="menu-bars">
				<div class="b1"></div>
				<div class="b2"></div>
				<div class="b3"></div>
			</div>
		</nav>
		<div class="intro">
			<h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1>
		    <img src="" alt="">
		</div>
	</header>
	<section class="about">
		<div class="about-us">
			<h2>About Us</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam itaque aperiam porro temporibus saepe pariatur ad, asperiores cumque recusandae provident aliquam nulla, ex, explicabo eos suscipit culpa sapiente nesciunt quas!</p>
		</div>	
	</section>
	<script src="https://unpkg.com/scrollreveal"></script>
	<script src = "script.js"></script>
</body>
</html>

Answer 1

删除“转换：所有2s缓解；”从.b1，.b2和.b3 CSS中获取。它干扰了scrollreveal库。

ScrollReveal（）遇到一些问题

1 个答案: