[Thymeleaf] 타임리프 lottie json 형식으로 불러오기

2023-12-18

1. 방법

CDN 으로 자바스크립트 코드 소스를 불러온다.

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

lottie-player 태그를 이용해 자신의 json 파일을 불러오면 된다.

    <lottie-player th:src="@{first_icon.json}" loop autoplay>
    </lottie-player>

아래는 참고용 위치이다.

전체코드

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <meta charset="UTF-8">
    <title>Elegant</title>

    <!--자바스크립트 인포트-->
    <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
</head>
<style>
    /* CSS 스타일링 */
    .colored-div {
        background-color: #ffcc00; /* 원하는 색상 코드로 변경하세요 */
        width: 300px; /* 원하는 너비로 변경하세요 */
        height: 200px; /* 원하는 높이로 변경하세요 */
        padding: 20px; /* 원하는 안쪽 여백으로 변경하세요 */
    }
</style>

<body>
<h1>template</h1>
<div class="colored-div">
<div>
    <lottie-player th:src="@{first_icon.json}" background="transparent" style="width: 300px; height: 225px;" speed="1" loop autoplay>
    </lottie-player>
</div>
</div>
</body>
</html>

메인 이미지 출처 : 사진: Unsplash의Austin Schmid

저작자표시 비영리

1. 방법

티스토리툴바