持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

前言

微信朋友圈中，除了朋友晒的各种精美照片，优雅文字，剩下的内容基本都是分享的各种链接，而其中又分成以下几类

H5是我个人更愿意打开浏览的，有趣有互动有内容，精美的H5会让人眼前一亮。

在这里分享一下个人利用Swiper+Animate及其他一些简单的js插件制作类似H5实现动画等效果的方法

滑屏

Swiper，作为前端开发我们都有所了解，一款强大的轮播图插件，制作滑屏类H5必不可少，利用Swiper的滚动效果加上Animate各种进入消失动画我们可以实现邀请函，趣味互动，企业宣传，简单答题等类型H5

关键代码：

选择合适的滚动模式，更出效果

多个swiper嵌套，实现网站目录跳转的效果

GIF图实在太耗资源，以下示例大家自行点击预览

swiper内嵌视频实现更炫酷动画，通过滑屏无痕触发视频播放更自然

Animate.css 为我们封装了70多种动画效果，引入后可直接通过class名调用，简单高效，省去了手敲动画的麻烦，真的很适合懒人（没说你）

针对很长的图一些，锚点过于密集的我们可以搭配wow.js或 aos.js使用，让滑到元素所在位置时自动出现。我这里采用的aos.js 同时需要引入aos.css，效果同animate.css，此时就不需要引入animate.css了

添加对应的属性即可

不引入其他插件使元素滑到对应位置出现时，我们可通过 window.scroll 判断元素所处位置，为其新增animate.css对应的动画class名或自定义的动画class名

h5低代码平台甚至纯模板平台比比皆是，虽然很方便但有一些定制化需求无法实现，这时我们用原生JS手写一个也不会耗费太长时间，界面动画更合心意

这里效果演示开始我用了GIF图，希望帮助大家省去跳转预览的步骤，但是实在太耗资源，多个gif上传失败，有需要的掘友可以点赞评论❤️，为大家提供更多项目链接

过去的项目中，做过一些h5，滑屏，抽奖，答题，邀请函，拼图，寻宝……后续会慢慢的跟大家分享