一、搭建full-page环境
1、依次下载jquery-3.0.0.min.js、jquery-ui-min.js和jquery.fullPage.js
//因为full-page是基于jquery开发的，所以必须要有jquery的支持；另要设置easing参数，所以也必须要有jquery-ui的支持。
二、html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<!-- 引用full-page自带的css文件 -->
<link rel="stylesheet" href="css/jquery.fullPage.css">
<!-- 引用自己设置的css动画样式 -->
<link rel="stylesheet" href="css/index.css">
<style>
/*改进右侧的导航界面，采用雪碧图的方式*/
#fp-nav ul li a {/*未激活的样式*/
float: right;
width: 21px;
height: 21px;
color: #8F9DA4;
text-decoration: none;
text-align: right;
background: url("images/nav-ico.png") 5px 5px no-repeat;
}
/*鼠标移上去激活的样式*/
#fp-nav ul li .active {
background-position: 0 bottom;
}
</style>
<!-- 引用js文件 -->
<script src="js/jquery-3.0.0.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<!-- 启动full-page -->
<script>
$(function() {
$(‘#fullpage‘).fullpage({
// ‘verticalCentered‘: false,
anchors: [‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘],
‘navigation‘: true,
// ‘navigationColor‘:‘#cccccc‘,
‘navigationPosition‘: ‘right‘,
‘navigationTooltips‘: [‘fullPage.js‘, ‘Powerful‘, ‘Amazing‘, ‘Simple‘]
})
});
</script>
</head>
<body>
<div id="fullpage">
<!-- 第一画面 -->
<div class="section">
<div class="bg">
<img src="images/page1-img.png" alt="">
</div>
<div class="bg11"></div><!-- 此处图片作动画 -->
<div class="bg12"></div><!-- 此处图片作动画 -->
</div>
<!-- 第二画面 -->
<div class="section">
<div class="bg">
<img src="images/page2-img.png" alt="">
</div>
</div>
<!-- 第三画面 -->
<div class="section">
<div class="bg">
<img src="images/page3-img.png" alt="">
</div>
</div>
</div>
</body>
</html>
三、index.css
.bg11{
position: absolute;
width: 79px;
height: 263px;
left: 0;
top:140px;
background: url("../images/bg11.png") no-repeat;
opacity: 0;
transition:all 1s;
}
.active .bg11{
left: 400px;
opacity: 1;
transition-delay:0.7s;
}
.bg12{
position: absolute;
width: 943px;
height: 587px;
left: 25%;
top:-15%;
transform:scale(0.5,0.5);
opacity: 0;
background: url("../images/bg12.png") no-repeat;
transition:all 1s;
}
.active .bg12{
opacity: 1;
transform:scale(1,1);
transition-delay:.7s;
}
四
时间： 2024-08-05 07:06:53