利用jquery插件fullPage.js整的Mr.quin的活（学习项目）

好久没来写文章了，最近沉迷前端不能自拔，刚好做完了一个项目，来分享一下我的学习经验，这次主要使用的jQuery全屏滚动插件fullPage.js还有一些css3的样式特性

具体的版本是github上发布的最新版本

https://github.com/alvarotrigo/fullPage.js

现在先来预览一下我的项目效果

基于fullpage插件制作的mr.quin全屏网页

这个项目总共是五页，我将以html页面设计和css样式两个方面说明在这个项目中我学习到的一些知识

html页面

现在正常前端开发的页面都是html5版本的那些通用的我就不说了，说一下jquery插件的引用

	<link rel="stylesheet" href="js/fullpage.css">
    <script src="jquery-1.12.4.min.js"></script>
    <script src="js/fullpage.js"></script>

我使用的jquery的插件版本如图所示，fullpage插件是在github上的最新版本，由于浏览器加载html文件顺序，script的引用顺序不能颠倒，fullpage是基于jquery的，还有css样式文件也要一并引入，不然会发生滚轮进入下一个页面，再返回第一个页面，第一个页面的padding样式失效这种情况

---

然后就是页面总体的设计了，fullpage有一个半固定的格式，你可以根据自己实际需求进行修改，我的项目没有文本内容，所以元素都使用div以及img，根据你自己内心对于定位的想法设计div要几层

/*fullpage格式*/
<div id="dowebok">
    <div class="section">
        <h3>第一屏</h3>
    </div>
    <div class="section">
        <h3>第二屏</h3>
    </div>
    <div class="section">
        <h3>第三屏</h3>
    </div>
    <div class="section">
        <h3>第四屏</h3>
    </div>
</div>
/*每个 section 代表一屏，默认显示“第一屏”，如果要指定加载页面时显示的“屏幕”，可以在对应的 section 加上 class=”active”*/

最后就是javascript的设计，fullpage有自己那一套基于jquery的js代码

$(function(){
    $('#dowebok').fullpage();
});

fullpage()方法中可以传入参数来调整全屏页面的某些选项，给开发者更多的便利，我选择的主要是

// 设置每一屏的背景色
                sectionsColor:["颜色内容"....]
// 当滚动到某一屏后调用
       /*新版本下，object中的index当前屏的索引，从0开始*/
       // 旧版本下，index就是索引，从1开始
                afterLoad: function(anchorLink, object) {
                    // 将其他屏的current标记移除
                    $(".section").removeClass("current");
                    setTimeout(function() {
                        var index = object.index;
                        // 当滚动到某一屏为元素添加标记
                        $(".section").eq(index).addClass("current");
                    }, 500);
                }

新版fullpage中的afterLoad回调函数中获得的index不再是一个单独的值，而是一个对象，你要从对象中获取index属性才能实现想要的功能

---

html总体大概是这样，这个项目自己动手最多的地方还是css样式中

CSS页面

* {
    padding: 0;
    margin: 0;
}

.section {
    overflow: hidden;
}

一个是去除默认的间距，另一个是在实现动画效果时防止图片溢出到其他页面

.first .text {
    width: 100%;
    text-align: center;
}

.first .text>img {
    margin: 0 80px;
    opacity: 0.2;
    transition: margin 1s, opacity 1s;
}

.first.current .text>img {
    margin: 0 0;
    opacity: 1;
}

这里说明一下我第一页中间那段文字从间距非常大到间距很小的过程的实现，一开始在还没添加currentclass属性时，先给图片加载到间距80px透明度0.2，当进入界面根据回调函数自动添加currentclass属性时改变图片的样式属性，这里使用transition给样式变化添加一个过程时间，让变化“变成”动画

第二个界面

.second>div {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

使用伸缩布局，子元素排列方式多余空间平均分布在子元素两边，侧轴方向垂直居中

.second .sword>img {
    transition: transform 1s;
}

.second .sword>img:nth-of-type(1) {
    transform: translate(100px, 100px) rotate(30deg);
}

.second .sword>img:nth-of-type(2) {
    transform: translate(-100px, -100px) rotate(-30deg);
}

.second .sword>img:nth-of-type(3) {
    transform: translate(200px, 200px) rotate(60deg);
}

.second .sword>img:nth-of-type(4) {
    transform: translate(-200px, -150px) rotate(-60deg);
}

.second .sword>img:nth-of-type(5) {
    transform: translate(150px, 150px) rotate(90deg);
}

.second .sword>img:nth-of-type(6) {
    transform: translate(-1500px, -1500px) rotate(-90deg);
}

.second.current .sword>img {
    transform: none;
}

先将需要拼好的图片通过translate这个css3的新样式属性打散到各个位置，然后通过transition和current标记形成拼图一样的动画

第三个页面

这里要说明一点，第二页面其实是有瑕疵的，就是在浏览器缩放的情况下，第二页面因为伸缩布局无法继续保持位置，于是在第三个界面使用的是定位来实现保持位置

.third {
    position: relative;
}

子绝父相这个顺口溜没有人记不住吧

.third .info {
    width: 682px;
    height: 315px;
    background: url(../img/info3.png);
    position: absolute;
    /* 定位是相对于父容器的宽高 */
    left: 50%;
    top: 50%;
    /* transform是相对于元素本身的宽高 */
    transform: translate(-100%, -50%);
}

.third .circle {
    background: url(../img/光圈.png);
    width: 500px;
    height: 500px;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(120%, -50%);
}

css的方位属性和translate来对元素位置进行调整，加上定位就能保证位置不变

鱼飞上去的动画效果也是跟之前一样是用transition和其他属性来实现，但是要注意鱼也是光圈的子元素，也是给一个绝对定位，这样不会发生元素偏移位置

第四个界面

第四个界面其他内容大体就是上面的总结，主要要介绍那个搜索框进来，显示文字，然后弹出狗头鱼的画面实现

<div class="section fourth">
       <div class="search">
            <div class="searchBar"></div>
            <div class="searchText"></div>
            <div class="searchResult"></div>
       </div>
       <div class="info"></div>
</div>

这里要回到html界面，所有的搜索栏内容都是在search这个div中完成的，为了给搜索栏一个进入的动画效果，给该div加一个overflow:hidden;

.fourth .search {
    width: 640px;
    height: 472px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-100%, -50%);
    overflow: hidden;
}

.fourth .search>.searchBar {
    background: url(../img/搜索框.png);
    width: 640px;
    height: 112px;
    transform: translateX(-100%);
}

然后搜索栏先沿x轴负方向移动隐藏自身，接下来就是transition的事了

文字和内容显示，则是修改width和height两个属性实现

.fourth .search>.searchText {
    background: url(../img/key.png);
    width: 0px;
    /*317px*/
    height: 112px;
    position: absolute;
    left: 50px;
    top: 0;
}

.fourth .search>.searchResult {
    background: url(../img/狗头鱼live2d.gif);
    background-size: 500px;
    width: 520px;
    height: 0px;
    /*320px*/
    border: none;
    position: absolute;
    left: 50px;
}

current标记加上后实现动画

.fourth.current .search>.searchBar {
    transform: translateX(0);
    transition: transform 1s;
}

.fourth.current .search>.searchText {
    width: 317px;
    transition: width 1s 1s steps(3);
}

.fourth.current .search>.searchResult {
    height: 320px;
    border: 5px solid black;
    transition: height 1s 2s;
}

第五个界面是凑数的，没什么好说的

---

现在做一下总结：在项目学习中，本身难度不大，主要是在于自己能不能思考利用css3已有的特性和jquery以及fullpage插件所带来的便利结合起来实现炫酷的效果，很多都是基础的css3内容

最后的最后，开发中实现效果不是最难受的，最难受的是找素材的过程，素材不符合心意就很难受，以后工作了一定要和美工打好关系，什么素材网上没有可以找他们制作