素材牛VIP会员

利用fullpage.js实现的360全屏滑动效果

 所属分类:网页特效-触屏/拖拽/下拉,动画效果

 浏览:2307次  评论:3次  更新时间:2016-12-06
牛币素材VIP可免积分下载
利用fullpage.js实现的360全屏滑动效果兼容IE9
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!   充值积分   充值会员   更多说明»
素材描述:360全屏滑动,HTML5+CSS3炫酷动画,代码注释较全,学习价值比较高!

详细介绍

使用方法:

引入CSS样式文件

<link rel="stylesheet" href="css/index.css">

引入jQuery库文件、插件JS文件

<script src="http://www.sucainiu.com/themes/cdn/jquery/jquery-1.10.2.js"></script>
<script src="js/jquery.fullPage.min.js"></script>

初始化、参数配置

详细用法说明可以查一些fullpage.js的一些用法!

$('#fullpage').fullpage({
    // 设置背景色
    sectionsColor : ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6'],
    afterLoad: function (anchorLink, index) {
        $('.section').removeClass('current');
        // 延时100毫秒执行
        setTimeout(function () {
            $('.section').eq(index - 1).addClass('current');
        }, 100);
    }
});

HTML结构

<div id="fullpage">
    <!-- 第一屏 -->
    <div class="section first">
        <!-- LOGO -->
        <div class="logo"></div>
        <!-- 文字 -->
        <div class="text">
            <img src="images/text_1.png" alt="">
            <img src="images/text_2.png" alt="">
            <img src="images/text_3.png" alt="">
            <img src="images/text_4.png" alt="">
            <img src="images/text_5.png" alt="">
            <img src="images/text_6.png" alt="">
            <img src="images/text_7.png" alt="">
            <img src="images/text_8.png" alt="">
        </div>
        <!-- 信息 -->
        <div class="info"></div>
    </div>
    <!-- 第二屏 -->
    <div class="section second">
        <!-- 盾牌 -->
        <div class="shield">
            <img src="images/shield_1.png" alt="">
            <img src="images/shield_2.png" alt="">
            <img src="images/shield_3.png" alt="">
            <img src="images/shield_4.png" alt="">
            <img src="images/shield_5.png" alt="">
            <img src="images/shield_6.png" alt="">
            <img src="images/shield_7.png" alt="">
            <img src="images/shield_8.png" alt="">
            <img src="images/shield_9.png" alt="">
        </div>
        <!-- 信息 -->
        <div class="info"></div>
    </div>
    <!-- 第三屏 -->
    <div class="section third">
        <!-- 信息 -->
        <div class="info"></div>
        <!-- 圆环 -->
        <div class="circle"></div>
        <!-- 火箭 -->
        <div class="rocket"></div>
    </div>
    <!-- 第四屏 -->
    <div class="section fourth">
        <!-- 搜索 -->
        <div class="search">
            <div class="key"></div>
            <div class="input"></div>
            <div class="wrap">
                <div class="result"></div>
            </div>
        </div>
        <!-- 信息 -->
        <div class="info"></div>
    </div>
    <!-- 第五屏 -->
    <div class="section fifth">
        <!-- 信息 -->
        <div class="info"></div>
        <!-- 浏览器 -->
        <div class="broswer">
            <!-- 四边框 -->
            <div class="leftline"></div>
            <div class="topline"></div>
            <div class="rightline"></div>
            <div class="bottomline"></div>
            <!-- 工具栏 -->
            <div class="toolbar"></div>
            <!-- 边框盒子 -->
            <div class="box">
                <span></span>
            </div>
            <div class="line"></div>
            <!-- 其它 -->
            <div class="extra"></div>
        </div>
    </div>
</div>

相关素材 - 触屏/拖拽/下拉,动画效果

讨论这个素材(3)回答他人问题或分享使用心得会奖励牛币

素材牛  
2016年12月10日

用上了~!

回复
No***ng  
2018年12月27日

刚好有这个需求

回复
qq***34  
2020年05月04日

记得毕业设计的项目用到过fullpage.js 设计的页面挺好看

回复
 文明上网,理性发言!   😉 阿里云幸运券,戳我领取
我的牛币余额:0
所需牛币:1 开始下载

牛币获取:签到、评论、充值    » 在线充值(10牛币=1元)