fullpage全屏插件应用

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

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

fullpage全屏插件应用

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

fullpage全屏插件应用

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

fullpage全屏插件应用

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

实例应用:

HTML页面第一屏

fullpage全屏插件应用

css样式第一屏

fullpage全屏插件应用

js文件

fullpage全屏插件应用

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

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

相关文章:

  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2021-09-07
  • 2021-07-09
  • 2021-06-29
  • 2022-12-23
猜你喜欢
  • 2021-12-13
  • 2021-09-22
  • 2022-01-08
  • 2021-09-20
  • 2022-12-23
  • 2021-04-09
  • 2022-01-06
相关资源
相似解决方案