Get started with rough-notation CDN

MIT licensed

Rough Notation is a lightweight library that adds animated, responsive placeholders for images, iframes, and other resources, improving the user experience by providing visual feedback before the content loads fully.

Tags:
  • annotate
  • rough
  • sketchy

Stable version

Copied!

How to start using rough-notation CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with rough-notation CDN - cdnhub.io</title>
  <style>
    #target {
      width: 100px;
      height: 100px;
      background-color: #f5f5f5;
      border: 1px solid #ccc;
      margin: 50px auto;
    }
  </style>
  <script src="https://cdn.jsdelivr.net/npm/rough-notation@0.5.1/rough-notation.cjs.js"></script>
</head>
<body>
  <button id="animate">Animate</button>
  <div id="target"></div>

  <script>
    const button = document.querySelector('#animate');
    const target = document.querySelector('#target');

    button.addEventListener('click', () => {
      RoughNotification.show(
        'New message!',
        {
          className: 'my-notification',
          animation: 'fade',
          delay: 1000,
          effect: 'pulse'
        },
        target
      );
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions