我在这里找到了类似的答案,但它对我不起作用.我试图制作滚动单页面布局,但通过使用css3动画而不是jquery动画.我正在拍摄的是将变量设置为哈希的位置并将其传递给transformX().这是我到目前为止所拥有的.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css" type="text/css">
</head>
<body>
<section id="wrapper">
<div class="nav-wrapper">
<nav>
<ul>
<li class="nav-li"><a href="#intro">home</a></li>
<li class="nav-li"><a href="#work">work</a></li>
<li class="nav-li"><a href="#about">about</a></li>
<li class="nav-li"><a href="#contact">contact</a></li>
</ul>
</nav>
</div>
<div class="home">
<div id="intro" class="content">
</div>
</div>
<div class="portfolio">
<div id="work" class="content">
</div>
</div>
<div id="about" class="about">
</div>
<div id='contact' class="connect">
</div>
<footer>
</footer>
</section>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/main.js"></script>
</body></html>
相关CSS:
html,body {
height:100%;
text-align:center;
transition:all 1s ease-in-out;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all …