lottie-preview/index.html at main · ngbeen/lottie-preview · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { background: transparent; overflow: hidden; }
    #lottie { width: 100%; height: 100vh; }
    #error { display: none; font-family: sans-serif; color: #999; text-align: center; padding-top: 40vh; font-size: 14px; }
  </style>
</head>
<body>
  <div id="lottie"></div>
  <div id="error">파일명을 URL에 입력해주세요<br><br>예시: ?file=animation.json</div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>
  <script>
    const params = new URLSearchParams(window.location.search);
    const file = params.get('file');
    const bg = params.get('bg');

    if (bg) {
      document.body.style.background = bg.startsWith('#') ? bg : '#' + bg;
    }

    if (file) {
      lottie.loadAnimation({
        container: document.getElementById('lottie'),
        renderer: 'svg',
        loop: true,
        autoplay: true,
        path: file
      });
    } else {
      document.getElementById('lottie').style.display = 'none';
      document.getElementById('error').style.display = 'block';
    }
  </script>
</body>
</html>