Get started with baffle.js CDN

MIT licensed

Lazy loading, image replacement: Lightweight Baffle.js for responsive images.

Tags:
  • baffle
  • tiny
  • simple
  • obfuscate
  • reveal text
  • DOM

Stable version

Copied!

How to start using baffle.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with baffle.js CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/baffle.js/0.3.6/baffle.min.js"></script>
  <style>
    #secret {
      width: 100px;
      height: 100px;
      background-color: #ccc;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <button id="reveal">Reveal Secret</button>
  <div id="secret">Your secret message goes here</div>

  <script>
    const baffle = new Baffle('#secret', {
      characters: 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789',
      lineWidth: 10,
      hideRevealDelay: 100,
      hideSpeed: 20,
      revealSpeed: 50,
      showChar: '.',
      hideChar: ' ',
    });

    document.getElementById('reveal').addEventListener('click', () => {
      baffle.reveal();
    });
  </script>
</body>
</html>
Copied!

All versions