Get started with vanilla-tilt CDN

MIT licensed

Vanilla-tilt is a lightweight library for adding parallax effect and perspective transform to elements, without relying on external dependencies.

Tags:
  • tilt
  • effect
  • vanilla
  • js
  • 60fps
  • smooth
  • tilt.js

Stable version

Copied!

How to start using vanilla-tilt CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with vanilla-tilt CDN - cdnhub.io</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/vanilla-tilt@1.8.1/vanilla-tilt.min.js"></script>
</head>
<body>
  <button id="activate-tilt">Activate Tilt</button>
  <div id="box" class="tilt">
    <h2>Hello, I'm a tiltable box!</h2>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const activateTiltButton = document.getElementById('activate-tilt');
      const tiltBox = document.getElementById('box');

      activateTiltButton.addEventListener('click', () => {
        Tilt.init(tiltBox, {
          max: 25,
          speed: 400,
          transition: true,
          perspective: 1000,
          scale: 1.1,
          glare: true,
          maxGlare: 0.5,
        });
      });
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!

All versions