Scroll animation con Javascript e AOS

Mattepuffo's logo
Scroll animation con Javascript e AOS

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!


Condividi

Commentami!