Get started with arrive CDN

MIT licensed

Arrive.js is a 3.5KB library for detecting element entry into webpage viewport.

Tags:
  • jquery
  • javascript
  • js
  • watch
  • dynamic
  • creation
  • new
  • element
  • insertion
  • listen
  • DOM
  • elements
  • removal
  • injected

Stable version

Copied!

How to start using arrive CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with arrive CDN - cdnhub.io</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.cdnhub.io/arrive/2.4.1/arrive.min.js"></script>
</head>
<body>
  <header id="header">
    <h1>Welcome to Arrive Example</h1>
  </header>
  <main>
    <section id="section1">
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget mi eget nibh elementum aliquam.</p>
    </section>
    <section id="section2">
      <h2>Section 2</h2>
      <p>Donec quis odio quis enim fringilla laoreet. Sed euismod, nisi quis bibendum rhoncus, elit quam feugiat mi, vel aliquam quam nisi quis nisl.</p>
    </section>
  </main>
  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const sections = document.querySelectorAll('section');

      sections.forEach((section) => {
        Arrive.scroll(section).on('arrive', () => {
          section.classList.add('is-visible');
        });
      });
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions