<!doctype html>
<html lang="zh-CN">
<head>
<title>scrollReveal.js</title>
<meta charset="utf-8">
<style>
* {
margin: 0;
padding: 0;
}
.row {
display: flex;
align-items: center;
justify-content: space-around;
flex-wrap: wrap;
width: 500px;
margin: auto;
}
.row div {
margin: 20px;
width: 100px;
height: 300px;
background: lightseagreen;
}
</style>
</head>
<body>
<div class="row">
<div data-scroll-reveal="enter top"></div>
<div data-scroll-reveal="enter left"></div>
<div data-scroll-reveal="enter right"></div>
<div data-scroll-reveal="enter bottom"></div>
<div data-scroll-reveal="enter top over 1s"></div>
<div data-scroll-reveal="enter left after 1s"></div>
<div data-scroll-reveal="enter right and move 50px"></div>
<div data-scroll-reveal="enter bottom over 1s after 1s and move 50px"></div>
<div data-scroll-reveal="enter top and move 300px after 0.3s"></div>
<div data-scroll-reveal="enter left over 1s and move 50px after 0.3s"></div>
<div data-scroll-reveal="enter right over 1s after 1s and move 50px after 0.3s"></div>
<div data-scroll-reveal="enter bottom over 1s after 1s and move 50px after 0.3s over 1s"></div>
</div>
</body>
<script src="https://cdn.bootcss.com/scrollReveal.js/0.1.1/scrollReveal.min.js"></script>
<script>
(function () {
window.scrollReveal = new scrollReveal({ reset: true });
})();
</script>
</html>
来源：CSDN
作者：任我行R
链接：https://blog.csdn.net/AK852369/article/details/103805960