fullpage全屏插件应用
利用fullpage插件制作全屏效果,添加菜单导航,无缝循环滚动。
各屏动画实现的核心是,js中利用滚动到某一屏后的回调函数afterLoad ,为当前屏section动态添加一个类comeout并移除其它屏的comeout类,从而对需要动画的元素进行统一管理。
需要添加动画的元素,css样式中在出场位置(初始状态)设置盒子隐藏
滚动到元素所在屏后,afterLoad回调函数会为该屏section添加comeout类,css样式中在进场位置(目标状态)设置盒子显示,实现动画效果
继续滚到下一屏后,该屏的comeout类被移除,元素回到出场位置
实例应用:
HTML页面第一屏
css样式第一屏
js文件
代码及相关文件详见GitHub主页 微信T管家-fullpage全屏插件