scrollReveal实现网页重复动画效果
<!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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-01-02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读