元素出现和消失时 动画制作 动画H2Divs

  • 源码大小:9.14KB
  • 所需积分:1积分
  • 源码编号:19JP-3743
  • 浏览次数:1003次
  • 最后更新:2023年07月17日
  • 所属栏目:动画
本站默认解压密码:19jp.com 或 19jp_com

简介

AnimatedH2Divs是一个jQuery Animate On Scroll插件,当元素在滚动时出现在屏幕上时,它使用CSS为元素设置动画。

如何使用它:

1.加载主脚本动画H2Divs.js在jQuery之后。

  1. <script src="/path/to/cdn/jquery.slim.min.js"></script>
  2. <script src="/path/to/AnimatedH2Divs.js"></script>

2.添加CSS类动画化-h2-div滚动到应该设置动画的元素。

  1. <div class="animated-h2-div">
  2. Element 2
  3. </div>
  4.  
  5. <div class="animated-h2-div">
  6. Element 3
  7. </div>
  8.  
  9. <div class="animated-h2-div">
  10. Element 3
  11. </div>
  12.  
  13. ...

3.使用您自己的CSS在滚动中为这些元素制作动画。在本例中,元素将在向下/向上滚动页面时淡入和淡出。

  1. .animated-h2-div {
  2. color: transparent;
  3. transition: 5s;
  4. }
  5.  
  6. .animated-h2-div.already-animated {
  7. color: black;
  8. }

预览截图