Get started with parallax CDN

MIT licensed

Parallax: library for scrolling backgrounds at varied rates, creating depth illusion.

Tags:
  • parallax
  • gyroscope
  • jquery
  • javascript
  • library

Stable version

Copied!

How to start using parallax CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with parallax CDN - cdnhub.io</title>
  <style>
    /* Add your custom styles here */
  </style>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/parallax.min.js"></script>
</head>
<body>
  <header>
    <!-- Add your header content here -->
  </header>
  <main>
    <section id="background">
      <img src="background.jpg" alt="Background Image">
    </section>
    <section id="foreground">
      <h1>Welcome to Parallax Example</h1>
      <p>Scroll down to see the parallax effect.</p>
    </section>
  </main>
  <footer>
    <!-- Add your footer content here -->
  </footer>
  <script>
    // Initialize Parallax
    const scene = document.getElementById('scene');
    const parallaxInstance = new Parallax(scene, {
      background: {
        image: document.getElementById('background'),
        positionInBackground: true
      },
      foreground: {
        element: document.getElementById('foreground')
      }
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!

All versions