<head>
<style>
.scroll{
width:180px;
height:50px;
background-color:red;
margin:5px;
}
</style>
<!-- 第一步：导入scrollReveal插件 -->
<script src="../static/js/scrollReveal.js"></script>
</head>
<body>
<!-- 第二步：在标签中添加data-scroll-reveal属性
data-scroll-reveal="动画起始位置(top|right|bottom|left) 动画执行距离(px像素为单位) 动画持续时间(以秒为单位) 动画延迟时间(以秒为单位)"
-->
<div class="scroll" data-scroll-reveal="bottom 5px 3 3"></div>
<div class="scroll" data-scroll-reveal="bottom 5px 3 3"></div>
<div class="scroll" data-scroll-reveal="bottom 5px 3 3"></div>
<script>
//第三步：向window对象(就是浏览器)中添加scrollreveal对象
window.scrollReveal = new scrollReveal({
reset:true
})
</script>
</body>
</html>
|
