Get started with magic CDN

MIT licensed

Library: simplifies DOM manipulation and animations with chained, fluent API.

Tags:
  • css
  • css3
  • magic
  • animations

Stable version

Copied!

How to start using magic CDN


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.cdnhub.io/magic/1.4.7/magic.min.css">
  <style>
    #magic-box {
      width: 200px;
      height: 200px;
      border: 1px solid #ccc;
      margin: 0 auto;
      position: relative;
    }
  </style>
  <script src="https://cdn.cdnhub.io/magic/1.4.7/magic.min.js"></script>
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const magicBox = document.getElementById('magic-box');
      const magic = new Magic(magicBox);

      magic.setImage('https://example.com/image.jpg');
      magic.draw();
    });
  </script>
</head>
<body>
  <div id="magic-box"></div>
</body>
</html>

All versions