公众号等场所使用全屏滚动页面的一种实现思路
页面的动画变换可以使用 transition : all 1s;
设置为all表示在元素的任意属性变更后，都会有1S的动画时长，
可以利用此特性动态的给元素添加 class,比如
.active .someoneclass{
opacity: 1;
left: 0px;
transition-delay: 1.5s;
}表示元素在添加了 active class后，会延迟1.5秒，opacity会一秒时间渐变为不透明，left变为0距离。
主体是基于 fullPage插件，需要在工程引入 jquery.fullPage.min.js、jquery.fullPage.min.js、jquery.min.js、jquery.fullPage.css。
主要的配置参数：
$('#fullpage').fullpage(
{
sectionsColor:['red','yellow','#ccc','black'], //设置页面背景颜色
//controlArrows:false//设置幻灯片是否使用箭头来切换，false适用于手机用户滑动使用
//controlArrowColor:'#ccc'//左右箭头的背景颜色
verticalCentered:true,//设置每一页的内容是否垂直居中,默认为true
resize:true,//字体是否随窗口缩放而缩放，默认为false
scrollingSpeed:700,//设置鼠标滚动速度，默认为700
anchors:['page1','page2','page3','page4'],/*定义锚链接，默认为[]。有了锚链接，用户可以快速打开定位到某一页面。注意定义锚链接时
值不要和页面中的任意的id或name相同，尤其是在IE浏览器下。定义时不需要加#*/
lockAnchors:false,/*是否锁定锚链接，默认为false。如果设置为true，那么定义的锚链接，也就是anchors属性则没有效果。使用较少。*/
//easing:sessionStorage,//定义页面section滚动动画的方式，默认为easeInOutCubic，如果修改此项，需要引入iquery.easings插件，或者jQuery ui。
css3:true,/*是否使用CSS3 transforms来实现滚动效果，默认为true。这个配置项可以提高支持css3的浏览器，比如移动设备等的速度
，如果浏览器不支持css3，则会使用jQuery来代替css3实现滚动效果。*/
// loopTop:false,//滚动到最顶部后是否连续滚动到底部，默认为false。
//loopBottom:false,//滚动到最底部后是否连续滚动回顶部，默认为false，
loopHorizontal:false,//横向slider幻灯片是否循环滚动，默认为true，
autoScrolling:true,/*默认为true，如果选择false，则会出现浏览器自带的滚动条，将不会按页滚动
而是按照滚动条的默认行为来滚动*/
scrollBar:false,/*是否包含滚动条，默认为false，如果在设置为true，则浏览器自带的滚动条出现，页面滚动时还是按页滚动
但是滚动条的默认行为也有效*/
paddingTop:'10px',//设置每一个section顶部的padding，默认为0.如果需要设置一个固定在顶部或者底部的菜单，导航，元素等，可以使用。
paddingBottom:'10px',//设置每一个section底部的padding，默认为0.如果需要设置一个固定在顶部或者底部的菜单，导航，元素等，可以使用。
fixedElements:'#header',//固定的元素，需要配置一个jquery选择器，在页面滚动的时候fixedElements设置的元素固定不动。
keyboardScrolling:false,//是否可以使用键盘方向键导航，默认为true
touchSensitivity:5,//在移动设备中滑动页面的敏感性，默认为5，是按百分比来衡量，最高为100，越大则越难滑动。
continuousVertical:true,/*是否循环滚动，默认为false。如果设置为true，则页面会滚动，而不像looptop或loopbottom
那样出现跳动，注意这个属性和looptop、loopbottom不兼容，不能同时设置*/
animateAnchor:true,//锚链接时否可以控制滚动动画，默认为true。如果设置为false，则通过锚链接定位到某个页面显示不在有动画效果。
recordHistory:true,/*是否记录历史，默认为true，可以记录页面滚动的历史，通过浏览器的前进后退来导航。注意
如果设置autoScrolling：false，那么这个配置也将被关闭，即设置为false。*/
menu:'#fullpageMenu',//绑定菜单，设置相关属性与anchor的值对应后，菜单可以控制滚动，默认为false。可以设置为菜单的jquery的选择器
navigation:true,//是否显示导航，默认为false。如果设置为true，则会显示小圆点，作为导航
navigationPosition:'right',//设置小圆点的位置，可以设置为left或者right
navigationTooltips:['第一页','第二页','第三页','第四页'],//导航小圆点的tooltips设置，也就是指向小圆点时的提示，默认为[]，注意按照顺序设置
showActiveTooltip:false,//是否显示当前页面的导航的tooltip信息，无需鼠标指向小圆点，默认为false
slidesNavigation:true,//是否显示横向幻灯片的导航，也就是是否显示幻灯片的小圆点，默认为false。
slidesNavPosition:'top',//横向幻灯片导航（小圆点）的位置，默认为bottom，可以设置为top或者是bottom。
scrollOverflow:false,/*内容超过满屏后是否显示滚动条，默认为false，如果设置为true，则会显示滚动条
，如果要滚动查看内容，还需要引用jquery.slimscroll插件的配合，slimscroll插件主要用于模拟传统的浏览器滚动条*/
sectionSelector:'.fp-section',//section的选择器，默认为.section
slideSelector:'.fp-slide'//slide的选择器，默认为.slide。
}
);
一些基本方法可以借鉴下：
//$.fn.fullpage.moveSectionUp() //向上滚动一页
//$.fn.fullpage.moveSectionDown() //向下滚动一页
//$.fn.fullpage.moveTo(section,slide) //滚动到第几页的第几个幻灯片，注意：页面从1开始，幻灯片从0开始
//$.fn.fullpage.silentMoveTo(section,slide) //滚动到第几页的第几个幻灯片，但是没有动画效果，注意：页面从1开始，幻灯片从0开始
//$.fn.fullpage.moveSlideRight() //幻灯片向右滚动
// $.fn.fullpage.moveSlideLeft() //幻灯片向左滚动
// $.fn.fullpage.setAutoScrolling(boolean) //动态设置autoScrolling
// $.fn.fullpage.setLockAnchors(boolean) //动态设置LockAnchors
// $.fn.fullpage.setRecordHistory(boolean) //动态设置RecordHistory
// $.fn.fullpage.setScrollingSpeed(milliseconds) //动态设置ScrollingSpeed
// $.fn.fullpage.setAllowScrolling(boolean,[directions]) //添加或删除鼠标滚轮、滑动控制，第一个参数true/false为启用/禁用
//后面的参数为方向，取值包括all，up，down，left，right，可以使用多个，逗号分隔
// $.fn.fullpage.destroy('type')//销毁fullpage特效，type可以不写。或者使用all。不写type，fullpage给页面添加的样式和html元素还在
//如果使用all，则样式\html等全部销毁，页面恢复和不使用fullpage相同的效果
// $.fn.fullpage.reBulid()//重新更新页面和尺寸，用于通过ajax请求后改变了页面结构之后，重建效果
