!
也想出现在这里? 联系我们
广告位

[代码样式]用fullPage.js制作百度百科史记2013效果

[代码样式]用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="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >网络机顶盒</a>
        <a class="itemshow stiteml st2" href="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >干细胞人造肉</a>
        <a class="itemshow stiteml st3" href="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >3D涂鸦笔</a>
        <a class="itemshow stiteml st4" href="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >H7N9</a>
        <a class="stimg1" href="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" >
            <img width="181" height="166" src="https://www.dowebok.com/images/h7n9.jpg">
        </a>
    </div>
</div>

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

<div class="section">
    <div class="science-inner inner">
        <a class="itemshow stiteml st1" href="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="0,-350,0,7">网络机顶盒</a>
        <a class="itemshow stiteml st2" href="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="0,-350,0,37">干细胞人造肉</a>
        <a class="itemshow stiteml st3" href="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="0,-350,0,68">3D涂鸦笔</a>
        <a class="itemshow stiteml st4" href="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="0,-350,0,88">H7N9</a>
        <a class="stimg1" href="https://www.dowebok.com/javascript:void(0)" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="0,-350,0,153">
            <img width="181" height="166" src="https://www.dowebok.com/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);
    }
}

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


[b2_file link="

百度网盘" name="用fullPage.js制作百度百科史记2013效果" pass="" code=""]

给TA打赏
共{{data.count}}人
人已打赏
脚本代码

[代码样式]用fullPage.js制作搜狐快站页面效果

2020-10-27 14:47:20

脚本代码

[代码样式]用Orbit制作新浪电影频道2013版幻灯片

2020-10-27 14:47:24

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索