基于Animate.css和 jquery-aniview 做动画

一、前言

就我个人而言，我的项目经验大多在SPA应用，小程序这方面。但在前不久，接到了一个官网的需求，页面简单并且不多，要求就是要做SEO，页面做有简单的交互动画。

二、技术选型

目前我们公司的技术栈都是vue，但vue对于SEO是不太友好的，除非使用SSR，但里面还有做大量的简单动画。不怎么推荐！

这样简单并且页面较少的项目，而且需要SEO和页面中有大量简单的动画，最适合用 html + css + jquery 来完成。并且搭配 Animate.css 和 jquery-aniview 来完成动画需求。

Animate.css : 一款强大的预设css3动画库
jquery-aniview : 一款非常实用的页面滚动元素进入视口发生动画特效jQuery插件。该插件基于animate.css。

三、使用

3.1 引入animate.css，jQuery和jquery.aniview.min.js

<link type="text/css" rel="stylesheet" href="css/animate.min.css">
<script language="JavaScript" src="js/jquery-1.10.2.js">
</script><script type="text/javascript" src="js/jquery.aniview.min.js"></script>

3.2 初始化jquery.aniview

var options = {
    animateThreshold: 100,		//正数值表示元素进入视口指定的像素值之后才会触发动画序列，负数值表示在元素进入视口之前多少像素就触发动画序列
    scrollPollInterval: 50		//测试用户滚动的频率。单位毫秒，这是jQuery内置的"scroll"事件的延伸
}
$('.aniview').AniView(options); 

3.3 给元素添加对应的class

比如：一个div来作为动画元素的包裹元素。 为该元素需要两个设置：

• class为aniview
• av-animation用于设置animate.css的动画过渡效果的class名称

使用示例：

<div class="aniview" av-animation="slideInRight">
   动画示例
</div >

参考文章：
JQuery插件之Animate.css和 jquery-aniview
animate.css文档

文章仅为本人学习过程的一个记录，仅供参考，如有问题，欢迎指出！

对博客文章的参考，若原文章博主介意，请联系删除！请原谅