Wix 에디터: Lottie 애니메이션 사용자 지정 및 조정하기
3 분 분량
페이지 메뉴
- Lottie 애니메이션 변경하기
- 애니메이션 반복 재생 설정하기
- 애니메이션 효과 추가하기
- Lottie 애니메이션에 대체 텍스트 추가하기
Lottie 애니메이션을 가져오기한 후, 원하는 디자인과 동작으로 조정하세요. 반복 재생할지 한 번만 재생할지 결정하고 페이지를 불러올 때 애니메이션이 돋보이도록 효과를 적용할 수 있습니다.
![레이라스 스쿠버 어드벤쳐라는 Lottie 애니메이션의 Gif.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/16/0f903482-2402-4abb-aea7-5d1be7ecb13b/4699b29f-f539-4403-8bc8-959d4e7733e4.gif)
Lottie 애니메이션 변경하기
Lottie 애니메이션을 변경하려는 경우 요소의 설정 패널에 다른 URL을 붙여넣어 쉽게 변경할 수 있습니다.
애니메이션을 변경하려면:
- LottieFiles 계정에 로그인하고 애니메이션 링크를 복사합니다.
- 에디터에서 Lottie 요소를 클릭합니다.
- 설정
아이콘을 클릭합니다.
- 애니메이션 효과 URL에 새 URL을 붙여넣습니다.
- 키보드에서 Enter 키를 누릅니다.
![Lottie 설정 패널. 커서를 URL 입력란에 마우스오버하고 있습니다.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/16/90890383-99b9-45a3-ae47-77b782a6e53d/37fb6007-5cdb-4538-9928-1b1be0096652.png)
도움말:
애니메이션 효과 변경을 클릭하면 LottieFiles가 새 브라우저 탭으로 바로 열립니다.
애니메이션 반복 재생 설정하기
사이트의 분위기에 따라 애니메이션이 반복 재생되도록 설정할 수 있습니다. 애니메이션이 반복 재생되도록 설정하면 방문자가 페이지에 있는 동안 계속 재생됩니다. 페이지를 불러올 때 한 번만 재생되도록 설정을 끌 수도 있습니다.
반복 재생을 활성화 또는 비활성화하려면:
- 에디터에서 Lottie 애니메이션을 클릭합니다.
- 설정
아이콘을 클릭합니다.
- 반복재생 옆의 버튼을 클릭해 켜거나 끕니다.
![Lottie 설정 패널. 커서를 '반복재생' 버튼에 마우스오버하고 있습니다.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/16/fc039d96-366b-4b6f-a85a-88d16a1d6ea1/3f72dfce-0f13-48c3-a5a8-792d546d0f9f.png)
애니메이션 효과 추가하기
Lottie 삽입 요소에는 고유한 애니메이션 효과가 있습니다. 하지만 Wix 에디터에서 등장 효과를 추가할 수 있습니다. 이러한 효과는 사이트를 불러올 때 표시되며 기존의 애니메이션 재생을 취소하거나 방해하지 않습니다.
애니메이션 효과를 추가하려면:
- 에디터에서 Lottie 애니메이션을 클릭합니다.
- 애니메이션
아이콘을 클릭합니다.
- 패널에서 효과를 선택합니다.
- (선택사항) 사용자 지정을 클릭해 효과의 설정을 조정합니다.
![애니메이션 패널. 커서가 '회전하기' 효과를 클릭했습니다.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/10/18/5d14482d-0297-431d-ac8a-8416eded0770/93833863-db20-41db-bab0-24cf536c9d56.png)
마음을 변경했다면:
패널에서 없음을 클릭해 추가한 애니메이션 효과를 제거할 수 있습니다.
Lottie 애니메이션에 대체 텍스트 추가하기
애니메이션에 대체 텍스트를 추가하려면:
- 에디터에서 Lottie 애니메이션을 클릭합니다.
- 설정
아이콘을 클릭합니다.
- 애니메이션 효과의 대체 텍스트를 입력하세요에 텍스트 설명을 입력하거나 붙여넣습니다.
- 키보드에서 Enter 키를 누릅니다.
![Lottie 설정 패널. 커서가를 대체 텍스트 입력란에 마우스오버하고 있습니다.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/05/16/7db5dd5f-d500-486d-ac57-cba5dabde28d/d70c2040-bccb-4df2-9864-43927bd9c8b8.png)