Dom动画是一个jQuery支持的动画库，当元素在视口中可见或鼠标悬停在它们上面时，它可以为它们设置动画

它支持各种动画，包括淡入淡出、滑动、展开和收缩。您还可以自定义速度和方向，以满足您的实际需求。非常适合创建引人入胜的滚动和鼠标触发的DOM动画，使您的网站或登录页更具视觉吸引力。

如何使用它:

1.要开始，请将主脚本作为模块导入（包括jQuery）。

<script type="module" src="./index.js"></script>

2.添加class=“动画化”到目标元素。

<div class="animated">
  Element To Animate
</div>

3.将您选择的动画应用于元素。所有可能的动画和方向。

• 淡入：淡入
• 变换：幻灯片
• 高度展开：展开图元的高度
• 高度收缩：收缩图元的高度
• 向上：从下到上
• 向下：从上到下
• 左：从右到左
• 右：从左到右

<div 
  class="animated"
  data-animated="fade,transform up">
  Element To Animate
</div>

4.指定触发事件。可以是“在屏幕上”，也可以是“鼠标悬停”。

<div 
  class="animated"
  data-animated="fade,transform up"
  data-trigger="on screen">
  Element To Animate
</div>

<div 
  class="animated"
  data-animated="height shrink"
  data-trigger="on mouse over"
  data-target="#example">
  Shrink Element #example On Mouse Over
</div>

<div id="example">
  ...
</div>

5.配置动画速度。

<div 
  class="animated"
  data-animated="fade,transform up"
  data-trigger="on screen"
  data-transition="600">
  Element To Animate
</div>

预览截图

动画元素滚动和鼠标悬停 jQuery dom动画