昨天,我的学员群里一个童鞋提出的问题,当时我只是简单的说了一下思路。
今天,趁着有时间将这个效果做了出来,供大家参考!
Demo在线体验地址:(内有广告,不喜勿入,入了勿点,点了活该)
小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。
昨天,我的学员群里一个童鞋提出的问题,当时我只是简单的说了一下思路。
今天,趁着有时间将这个效果做了出来,供大家参考!
Demo在线体验地址:(内有广告,不喜勿入,入了勿点,点了活该)
小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。
如今我们经常能见到全屏网站,尤其是国外网站。这些网站用几幅很大的图片或色块做背景,再添加一些简单的内容,显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面(),QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的,显得更上档次,你可以试试
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有:
每个 section 代表一屏,默认显示“第一屏”,如果要指定加载页面时显示的“屏幕”,可以在对应的 section 加上 class=”active”,如:
字体是否随着窗口缩放而缩放 |
绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动 |
是否显示左右滑块的项目导航 |
左右滑块的项目导航的位置,可选 top 或 bottom |
左右滑块的箭头的背景颜色 |
滚动到最底部后是否滚回顶部 |
滚动到最顶部后是否滚底部 |
是否使用插件的滚动方式,如果选择 false,则会出现浏览器自带的滚动条 |
内容超过满屏后是否显示滚动条 |
0 |
0 |
是否使用键盘方向键导航 |
设置页面滚动方式,设置为 true 时自动滚动 |
添加或删除鼠标滚轮/触控板控制 |
添加或删除键盘方向键控制 |
定义以毫秒为单位的滚动速度 |
滚动到某一屏后的回调函数,接收 anchorLink 和 index 两个参数,anchorLink 是锚链接的名称,index 是序号,从1开始计算 |
nextIndex 是滚动到的“页面”的序号,从1开始计算; |
页面结构生成后的回调函数,或者说页面初始化完成后的回调函数 |
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。