基于fullPage.js制作的百度百科史记全屏网站示例
全屏网站示例-基于fullpage.js插件，本示例采用了fullPage.js插件制作，模仿“百度百科史记”网站，有很炫的动画效果，每屏的关键字和图片会从四面飞往屏幕中间，效果非常炫酷。
入门指南
简单介绍制作方法
1、HTML
我们在每屏（用class=”section”区分）里面放一个块元素div，用于放背景图片，然后把热词和图片放在这个块儿元素 div里面，如：
<div class="section">
<div class="science-inner inner">
<a class="itemshow stiteml st1" href="javascript:void(0)">网络机顶盒</a>
<a class="itemshow stiteml st2" href="javascript:void(0)">干细胞人造肉</a>
<a class="itemshow stiteml st3" href="javascript:void(0)">3D涂鸦笔</a>
<a class="itemshow stiteml st4" href="javascript:void(0)">H7N9</a>
<a class="stimg1" href="javascript:void(0)">
<img width="181" height="166" src="images/h7n9.jpg">
</a>
</div>
</div>
我们在热词和图片中加一个rel属性，里面放4个数字，格式为：rel="num1,num2,num3,num4"，每个数字之间使用逗号隔开，这4个数字的作用是用于该元素的定位，前两个数字是屏幕加载前默认的位置，后两个数字是屏幕加载后出现的位置。如，示例：
<div class="section">
<div class="science-inner inner">
<a class="itemshow stiteml st1" href="javascript:void(0)" rel="0,-350,0,7">网络机顶盒</a>
<a class="itemshow stiteml st2" href="javascript:void(0)" rel="0,-350,0,37">干细胞人造肉</a>
<a class="itemshow stiteml st3" href="javascript:void(0)" rel="0,-350,0,68">3D涂鸦笔</a>
<a class="itemshow stiteml st4" href="javascript:void(0)" rel="0,-350,0,88">H7N9</a>
<a class="stimg1" href="javascript:void(0)" rel="0,-350,0,153">
<img width="181" height="166" src="images/h7n9.jpg">
</a>
</div>
</div>
2、CSS
CSS主要是热词旁边“1月、2月”背景图片的定位，如：
.science-inner .st1 {
background-position: 0 4px
}
.science-inner .st2 {
background-position: 0 -59px
}
.science-inner .st3 {
background-position: 0 -59px
}
.science-inner .st4 {
font-size: 48px;
background-position: 0 -104px
}
3、JavaScript
3.1、首先设置一些基本的效果，比如背景颜色、锚链接、绑定菜单等等；
$(document).ready(function() {
$.fn.fullpage({
slidesColor: ['#0075D1', '#C2E5FF', '#FDF6E1', '#E9E9E9', '#F3F3F3', '#F9F3DC'],
anchors: ['page1', 'page2', 'page3', 'page4', 'page5', 'page6'],
menu: '#menu'
});
});
3.2、初始化后的回调函数，或者笼统的说是页面加载后的回调函数，本例是“史记”两个字的动画效果；
afterRender: function(){
$('.screen-main span').each(function(){
var $rel = $(this).attr('rel');
var $arr = $rel.split(',');
$(this).animate({
left: $arr[2] + 'px',
top: $arr[3] + 'px'
}, 500);
});
$('.inner a').each(function(){
var $rel = $(this).attr('rel');
var $arr = $rel.split(',');
$(this).animate({
left: $arr[0] + 'px',
top: $arr[1] + 'px'
}, 500);
});
}
3.3、滚动前后的回调函数，本例是热词和图片的动画效果；
afterLoad: function(anchorLink, index){
if(index == 1){
$('.screen-main span').each(function(){
var $rel = $(this).attr('rel');
var $arr = $rel.split(',');
$(this).animate({
left: $arr[2] + 'px',
top: $arr[3] + 'px'
}, 500);
});
}
if(index == 2 || index == 3 || index == 4 || index == 5){
$('.inner').eq(index - 2).find('a').each(function(){
var $rel = $(this).attr('rel');
var $arr = $rel.split(',');
$(this).animate({
left: $arr[2] + 'px',
top: $arr[3] + 'px'
}, 500);
});
}
if(index == 6){
$('.zanzhu-con a').fadeIn(1000);
}
},
onLeave: function(index, direction){
if(index == 1){
$('.screen-main span').each(function(){
var $rel = $(this).attr('rel');
var $arr = $rel.split(',');
$(this).animate({
left: $arr[0] + 'px',
top: $arr[1] + 'px'
}, 500);
});
}
if(index == 2 || index == 3 || index == 4 || index == 5){
$('.inner').eq(index - 2).find('a').each(function(){
var $rel = $(this).attr('rel');
var $arr = $rel.split(',');
$(this).animate({
left: $arr[0] + 'px',
top: $arr[1] + 'px'
}, 500);
});
}
if(index == 6){
$('.zanzhu-con a').fadeOut(1000);
}
}
到这里就完成了，可以使用上面类似的方式编写出其他动画效果。
the end
