最新公告:最新上线Yii2实战教程,欢迎大家订阅

fullPage.js制作百度百科史记2013效果

0 13776

fullPage.js 提供丰富的回调函数,让我们能都在各个阶段进行控制,制作这个专题的中的动画效果就需要用到这些回调函数。

78

制作方法

1、HTML

我们在每屏里面放一个 div,用于放背景图片,然后把热词和图片放在这个 div 里面,如:

<div>
<div>
<a href=”javascript:void(0)”>网络机顶盒</a>
<a href=”javascript:void(0)”>干细胞人造肉</a>
<a href=”javascript:void(0)”>3D涂鸦笔</a>
<a href=”javascript:void(0)”>H7N9</a>
<a href=”javascript:void(0)”>
<img width=”181″ height=”166″ src=”images/h7n9.jpg”>
</a>
</div>
</div>

我们在热词和图片中加一个 rel 属性,里面放4个数值,用逗号隔开,这4个数值的作用是用于定位,前两个是默认的位置,后两个是出现后的位置。添加之后代码如下:

<div>
<div>
<a href=”javascript:void(0)” rel=”0,-350,0,7″>网络机顶盒</a>
<a href=”javascript:void(0)” rel=”0,-350,0,37″>干细胞人造肉</a>
<a href=”javascript:void(0)” rel=”0,-350,0,68″>3D涂鸦笔</a>
<a href=”javascript:void(0)” rel=”0,-350,0,88″>H7N9</a>
<a 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);
}
}

到这就完成了,大家还可以举一反三,编写出其他动画效果以及应用到其他地方。

演示地址:http://www.viphper.com/demo/02_viphper.com_fullpage/index.html




注意:您需要在网站顶部 注册 后,才能下载资源

资源名称:02_viphper_fullpage.com_1.rar

(下载次数:459次)

提示:此资源由PHP学习网整理或原创,转载请注明。QQ群:66357155

 

作者:PHP学习网,本文 fullPage.js制作百度百科史记2013效果 版权归作者,免费文章欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

发表评论:

您必须 才能发表留言!

Yii2实战教程

一套真正的从入门到实践的教程,不说废话的讲解,实例操作,作者的亲自指导,有问题随时提问。现在购买即可获取全套完整教程

PHP学习网 – 公众账号

最新文章
免费证书Let’s Encrypt的申请和使用 192
mac下Homebrew的使用 338
mysql5.7.21导入5.6的数据报Error : Invalid default value for ‘comment_date’ 450
阿里云 lnmp一键安装包远程访问Mysql 853
php memcached扩展安装 695
vagrant package 打包命令的用法 721
Warning: require_once(): open_basedir restriction in effect 错误 962
yaf框架教程(6)- yaf路由配置 1051
vagrant问题汇总 1080
ubuntu系统两个PHP版本坑坏人 1056
随机文章
解决git远程分支已经删除本地还存在的办法 2001
Yii CDBCriteria常用方法 776
wordpress后台打开慢解决方案 1245
centos搭建SVN服务器 1252
A​p​a​c​h​e​配​置​h​t​t​p​d​-​v​h​o​s​t​s​虚​拟​主​机 2379
svn post-commit钩子实现代码上传到web目录 811
Minty清新博客主题 1614
阿里云服务器Nginx支持Thinkphp Rewrite 重写 1301
php的URL重定向函数 1956
wordpress wp_title()函数 612
切换注册

登录

切换登录

注册