fullpage全屏插件应用

fullpage全屏插件应用

利用fullpage插件制作全屏效果,添加菜单导航,无缝循环滚动。

各屏动画实现的核心是,js中利用滚动到某一屏后的回调函数afterLoad ,为当前屏section动态添加一个类comeout并移除其它屏的comeout类,从而对需要动画的元素进行统一管理。

这里写图片描述

需要添加动画的元素,css样式中在出场位置(初始状态)设置盒子隐藏

这里写图片描述

滚动到元素所在屏后,afterLoad回调函数会为该屏section添加comeout类,css样式中在进场位置(目标状态)设置盒子显示,实现动画效果

这里写图片描述

继续滚到下一屏后,该屏的comeout类被移除,元素回到出场位置

实例应用:

HTML页面第一屏

这里写图片描述

css样式第一屏

这里写图片描述

js文件

这里写图片描述

代码及相关文件详见GitHub主页 微信T管家-fullpage全屏插件

https://github.com/Jianxq12/ITcast/tree/master/H5C3

原文地址:https://www.cnblogs.com/Jianxq12/p/7684303.html