Get started with scrollama CDN

MIT licensed

Scrollama is a library that creates interactive and animated scrolling experiences on webpages.

Tags:
  • scrollytelling
  • scroll
  • observer
  • IntersectionObserver
  • enter
  • exit
  • view
  • trigger

Stable version

Copied!

How to start using scrollama CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.cdnhub.io/scrollama/3.2.0/scrollama.min.js"></script>
</head>
<body>
  <div id="container">
    <h1 id="section1">Section 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum. Cras porttitor metus justo, ut fringilla urna bibendum et.</p>

    <h1 id="section2">Section 2</h1>
    <p>Donec id elit non mi porta gravida at eget magna. Nullam id felis et ipsum bibendum ultrices. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>

  <script>
    const controller = new Scrollama({
      container: '#container',
      element_activate: '.active',
      offset: 0.5
    });

    controller.setup();

    document.querySelectorAll('#container h1').forEach((el, i) => {
      controller.addElement(el);

      el.addEventListener('click', () => {
        controller.scrollTo(i);
      });
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions