scrollreveal
Version:
Easy scroll animations for web and mobile browsers.
75 lines (72 loc) • 2.15 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sandbox</title>
<link rel="stylesheet" href="./css/styles.css">
<style>
html {
overflow-x: hidden;
}
/*.blocks {
overflow-y: scroll;
margin-top: 200px;
height: 200px;
}*/
.blocks li {
visibility: hidden;
}
</style>
</head>
<body class="noir">
<ul class="blocks">
<li class="red"></li>
<li class="orange"></li>
<li class="yellow"></li>
<li class="green"></li>
<li class="blue"></li>
<li class="purple"></li>
<li class="red"></li>
<li class="orange"></li>
<li class="yellow"></li>
<li class="green"></li>
<li class="blue"></li>
<li class="purple"></li>
<li class="red"></li>
<li class="orange"></li>
<li class="yellow"></li>
<li class="green"></li>
<li class="blue"></li>
<li class="purple"></li>
<li class="red"></li>
<li class="orange"></li>
<li class="yellow"></li>
<li class="green"></li>
<li class="blue"></li>
<li class="purple"></li>
</ul>
<script src="./js/scrollreveal.js"></script>
<!-- <script src="https://unpkg.com/scrollreveal@3.3.2/dist/scrollreveal.min.js"></script> -->
<script>
const sr = new ScrollReveal();
const config = {
distance: '100%',
duration: 600,
origin: 'right',
scale: 0.7,
// delay: 2000,
// useDelay: 'onload',
reset: true,
// beforeReveal: (e) => console.log('BEFORE revealed'),
// beforeReset: (e) => console.log('BEFORE reset'),
// afterReveal: (e) => console.log('AFTER revealed'),
// afterReset: (e) => console.log('AFTER reset'),
// rotate: { z: 5 },
// container: 'ul.blocks',
opacity: null,
// desktop: false,
}
sr.reveal('.blocks li', config, 60);
</script>
</body>
</html>