Scroll animation con Javascript e AOS
AOS è una piccola libreria per Javascript per creare animazioni durante lo scroll della pagina.
Il tutto si compone di un JS e un CSS che potete importare anche da CDN.
Qui sotto un esempio (creato con un pò di PHP giusto per creare un pò di div):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
<style>
div {
width: 100px;
border-radius: 10px;
border: 1px solid black;
margin: 0 auto 200px auto;
text-align: center;
}
</style>
</head>
<body>
<?php for ($i = 1; $i < 10; $i++): ?>
<div <?php echo ($i % 2 == 0) ? 'data-aos="fade-right"' : 'data-aos="fade-left"'; ?>
data-aos-delay="50"
data-aos-duration="1000"
data-aos-once="false"
data-aos-easing="ease-in-out">
<p><?php echo $i; ?></p>
</div>
<?php endfor; ?>
</body>
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
<script>
AOS.init();
</script>
</html>
Enjoy!
javascript html css aos
Commentami!