用fullPage.js制作百度百科史记2013效果
2013年过去了,各门户网站纷纷对上一年的大事记进行了盘点,百度百科当然不能缺席,其制作的“百度百科——年终盘点”专题,列举了科技、人物、社会和网络四个方面在2013年从1月到12月各个月的大事、趣事、乐事等等,让我们很好的回顾过去一年某个时刻发生的事情。等等,我们今天要说的并不是这个专题的内容,而是页面效果。这个专题采用了全屏制作,每屏的热词都以从四面飞往屏幕中间,效果非常不错。今天我们使用上次介绍的 jQuery 全屏滚动插件 fullPage.js 制作一个类似的效果。
fullPage.js 提供丰富的回调函数,让我们能都在各个阶段进行控制,制作这个专题的中的动画效果就需要用到这些回调函数。
制作方法
1、HTML
我们在每屏里面放一个 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个数值,用逗号隔开,这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); } }
到这就完成了,大家还可以举一反三,编写出其他动画效果以及应用到其他地方。