实例介绍fullpage.js常用的配置和方法

本文通过一个简单实例介绍fullpage.js插件中经常用到的配置和方法,通过实例可以让大家更容易理解,效果如下图:

第一--四屏利用回调函数afterLoad给每一屏滚动结束后增加一个动画;

第五屏调用插件自带的幻灯片效果。

编写静态页面

html代码和css样式如下图,这一块比较简单,也不是本文重点,详细代码可自行查看下图。

Tips: 

1.HTML的布局、ID名和Class名要根据fullpage来使用;

2.fullpage插件依赖jquery库,所以需要引入jquery库;

3.为了增加动画效果,需引入jquery.easing库。

实现原理

设置实例的fullpage配置项,详细分析如下:

1.sectionsColor设置每一屏的背景色,该例子背景色被背景图遮盖;

2.anchors定义锚链接,菜单(menu)可根据该设置点击跳转到相应的屏;

3.menu绑定菜单,设定的相关属性与 anchors 的值对应后,菜单可以控制滚动(影响点击高亮效果);

4.navigation是否显示项目导航(该例子左边中间的圆点);

5.navigationPosition项目导航的位置,可选left或right;

6.navigationTooltips鼠标放在项目导航显示的提示信息;

7.showActiveTooltip是否鼠标不放上去就直接显示小圆点提示信息;

8.slidesNavigation是否显示幻灯片的项目导航;

9.controlArrows是否显示幻灯片左右箭头。

利用fullpage的回调函数afterLoad实现滚动到某一屏的动画效果,该函数接收两个参数(anchorLink和index),详细分析如下:

滚到到第一屏时候(index === 1),(由于文字默认隐藏在顶部(top:-120%),这里设置了top: '0'),文字会延迟0.5s(delay(500))后慢慢(animate)的从顶部滑动下来(持续1.5s);

滚到到第二屏时候(index === 2),(由于文字默认隐藏在左边(left:-120%),这里设置了left: '0'),文字会延迟0.5s(delay(500))后慢慢(animate)的从左边滑动过来(持续1.5s);

滚到到第三屏时候(index === 3),(由于文字默认隐藏在底部(bottom:-120%),这里设置了bottom: '0'),文字会延迟0.5s(delay(500))后慢慢(animate)的从底部滑动上来(持续1.5s);

滚到到第四屏时候(index === 4),(由于文字默认隐藏,这里设置了fadeIn(2000)),文字会慢慢显示(持续2s)。

Tips:第五屏只有幻灯片,未添加动画效果。

为了让再次滚动到某一屏还有动画效果,利用fullpage的回调函数onLeave实现滚动前把文字复原到默认位置和显示状态下,代码跟afterLoad函数类似,可自行查看下图代码。

最后分析几个有用的函数:

1.利用定时器可以设置屏幕自动往上或往下滚动($.fn.fullpage.moveSectionDown()),只有两个方向上或下;

2.利用定时器可以设置屏幕自动往上或往下滚动($.fn.fullpage.moveSlideRight()),只有两个方向左或右;

3.利用函数resize在拉伸浏览器屏幕时候调用函数autoScrolling,如果宽度小于1024关闭全屏滚动效果,改为自带滚动条。

注意事项

fullpage使用2.0版本,3.0需要注册

  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值