AnimatedH2Divs是一个jQuery Animate On Scroll插件,当元素在滚动时出现在屏幕上时,它使用CSS为元素设置动画。
1.加载主脚本动画H2Divs.js
在jQuery之后。
- <script src="/path/to/cdn/jquery.slim.min.js"></script>
- <script src="/path/to/AnimatedH2Divs.js"></script>
2.添加CSS类动画化-h2-div
滚动到应该设置动画的元素。
- <div class="animated-h2-div">
- Element 2
- </div>
- <div class="animated-h2-div">
- Element 3
- </div>
- <div class="animated-h2-div">
- Element 3
- </div>
- ...
3.使用您自己的CSS在滚动中为这些元素制作动画。在本例中,元素将在向下/向上滚动页面时淡入和淡出。
- .animated-h2-div {
- color: transparent;
- transition: 5s;
- }
- .animated-h2-div.already-animated {
- color: black;
- }