<head>
<style>
.scroll{
width:180px;
height:50px;
background-color:red;
margin:5px;
}
</style>
<!-- 第一步：導(dǎo)入scrollReveal插件 -->
<script src="../static/js/scrollReveal.js"></script>
</head>
<body>
<!-- 第二步：在標(biāo)簽中添加data-scroll-reveal屬性
data-scroll-reveal="動(dòng)畫(huà)起始位置(top|right|bottom|left) 動(dòng)畫(huà)執(zhí)行距離(px像素為單位) 動(dòng)畫(huà)持續(xù)時(shí)間(以秒為單位) 動(dòng)畫(huà)延遲時(shí)間(以秒為單位)"
-->
<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對(duì)象(就是瀏覽器)中添加scrollreveal對(duì)象
window.scrollReveal = new scrollReveal({
reset:true
})
</script>
</body>
</html>
|
