cody-fullpage

项目介绍

cody-fullpage 是基于 gulp-template 编写的单屏滚动模板。想了解的话可以自行前往查看 gulp-template 的说明文档。

项目结构

1 ./index.html

入口文件可以看到下面两条，分别是压缩合并后的all.min.css和all-1.min.js文件：

<link rel="stylesheet" type="text/css" href="./publish/css/all.min.css">

<script type="text/javascript" src="./publish/js/all-1.min.js"></script>

另外我们如果执行了 gulp online 命令用于发布线上版本，引入的css和js文件要加上随机版本号：

<link rel="stylesheet" type="text/css" href="./publish/online/all-2dd1274587.min.css">

<script type="text/javascript" src="./publish/online/all-1-a5b69471d8.min.js"></script>

2 ./package.json

这个包的信息，用于npm下载依赖的模块

{
  "name": "cody-fullpage",
  "version": "0.0.1",
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-clean": "^0.3.1",
    "gulp-concat": "^2.5.2",
    "gulp-connect": "^2.2.0",
    "gulp-jshint": "^1.10.0",
    "gulp-less": "^3.0.3",
    "gulp-livereload": "^3.8.0",
    "gulp-minify-css": "^1.1.0",
    "gulp-rename": "^1.2.2",
    "gulp-rev": "^6.0.0",
    "gulp-uglify": "^1.2.0",
    "less-plugin-autoprefix": "^1.4.1",
    "run-sequence": "^1.1.2"
  },
  ......
}

3 ./src

这个文件夹存放的是我们项目中涉及到的所有的css、less和js文件

4 ./publish

这个文件夹存放的是项目的图片文件./publish/images，以及由./publish/css目录下所有的css文件合并生成的all.min.css和all.css文件，和./publish/js目录下生成的不定数量的all-num.js和all-num.min.js文件，num指的是第几个js文件，从1开始。

5 ./gulpfile.js

可以 点击这里 查看对应的gulp配置文件。平时我们使用命令行工具来到项目文件夹，执行

6 ./gulp-template-config.json

配置项目需求文件列表

{
    "lessList": ["fullpage.less", "style.less"],
    "cssLibList": ["normalize.css", "animate.min.css"],
    "scriptList": ["common-1.js"],
    "jsTaskList": [
        ["fullpage.js","common-1.js"]
    ],
    "rootJsList": ["config"]
}

项目配置

在gulpfile.js里面我们修改

var config = {
    // 由用户配置，可输入多个less文件名
    lessList: [],
    // 由用户配置，可输入多个外来引入的css文件名，一般项目只引入normalize.css文件
    cssLibList: [],
    // 由用户配置，这是用户自己编写的js文件，需要通过jshint验证js规范
    scriptList: [],
    // 由用户配置，代表js文件的各种依赖关系
    jsTaskList: [],
    // 由用户配置，代表根目录下的js文件，压缩以后扔放在根目录，不需要添加js后缀
    rootJsList: [],
    ......
};

config对象的前四个属性的值来达到自由配置，对应的属性的意思可参看注释

项目使用

1 下载本项目

git clone https://github.com/cody1991/cody-fullpage.git

or

npm install cody-fullpage

2 下载依赖插件，执行gulp命令

cd 对应目录
npm install
gulp

3 生成线上版本

gulp online

4 删除线上版本

gulp clean

核心部分

##嵌入了animate.css

可以方便的给页面元素添加动画。另外animate.css这个项目还可以通过 grunt watch 来修改里面的配置文件来定制自己的css文件，那就不用担心这个插件太大了（核心的index.html,all.min.js,all.min.css加起来 20k，不依赖jquery/zepto，再加上animate.css最大也就68k，可定制，算是轻量级了）。

##页面结构

<div id="pageContain">	
	<div class="page page1 current">
		<div class="contain">
			<!-- your own code here-->
		</div>
	</div>
    <!-- ect.. -->
</div>

<!--alternative-->
<ul id="navBar">
	<li>0</li>
	<!-- ect.. -->
</ul>
<!--alternative-->

##javascript部分

var runPage = new FullPage({

  id : 'pageContain',                            // id of contain
  slideTime : 800,                               // time of slide
  continuous : false,                            // create an infinite feel with no endpoints
  effect : {                                     // slide effect
          transform : {
            translate : 'Y',                      // 'X'|'Y'|'XY'|'none'
            scale : [.1, 1],                      // [scalefrom, scaleto]
            rotate : [0, 0]                       // [rotatefrom, rotateto]
          },
          opacity : [0, 1]                       // [opacityfrom, opacityto]
      },                           
  mode : 'wheel,touch,nav:navBar',               // mode of fullpage
  easing : 'ease'                                // easing('ease','ease-in','ease-in-out' or use cubic-bezier like [.33, 1.81, 1, 1];
    //  ,onSwipeStart : function(index, thisPage) {   // callback onTouchStart
    //    return 'stop';
    //  }
    //  ,beforeChange : function(index, thisPage) {   // callback before pageChange
    //    return 'stop';
    //  }
    //  ,callback : function(index, thisPage) {       // callback when pageChange
    //    alert(index);
    //  };
});

设置

• id String - 外层包裹id

• slideTime Integer (default:800) - 每页切换时间(毫秒)

• effect Object (default:{}) - 效果参数

• continuous Boolean (default:false) - 是否循环(即能从最后页跳到第一页面)

  • transform

    • translate String 切换方向 'X'|'Y'|'XY'|'none' 表示 X轴|Y轴|XY轴|无
    • scale Array 缩放 [scalefrom, scaleto] 表示 [起始缩放比例, 结束时缩放比例]
    • rotate Array 旋转 [rotatefrom, rotateto] 表示 [起始旋转角度, 结束时旋转角度]

  • opacity Array 透明度 [opacityfrom, opacityto] 表示 [起始透明度, 结束时透明度]

• mode String (default:'') - 转换模式 'wheel,touch,nav:navBar' 表示 '滚轮,触摸,导航条:导航条id'

• onSwipeStart Function - 触摸开始时的回调函数

  • 当 retrun 'stop' 时,此次触摸将不会生效

• beforeChange Function - 滑动开始时的回调函数

  • 当 retrun 'stop' 时,此次滑动将还原

• callback Function - 滑动结束后的回调函数

API

prev() 直接滑向上一页

next() 直接滑入下一页

thisPage() 返回当前的页码

go(num) 直接滑到第num页