Studio 에디터: 루프 애니메이션 추가하기
4 분 분량
페이지 메뉴
- 루프 애니메이션 추가하기
- 루프 애니메이션 사용자 지정하기
- 루프 애니메이션 제거하기
지속적으로 반복되는 애니메이션으로 디자인에 움직이는 느낌을 더하세요. 방문자가 관심을 갖기를 바라는 모든 요소에 루프 애니메이션을 추가할 수 있습니다. 일부는 더 미세하며, 일부는 진정한 관심을 끌 수 있습니다.
다른 중단점에 있는 애니메이션은 어떻게 되나요?
데스크톱 중단점에 애니메이션을 추가하면 더 작은 중단점까지 계단식으로 표시됩니다. 하지만, 중단점별로 다른 애니메이션을 설정하거나 동일한 애니메이션을 사용자 지정할 수 있습니다.
Wix Studio 아카데미로 이동해 추가 Wix Studio 웨비나, 튜토리얼 및 강좌를 확인하세요. (영문)
루프 애니메이션 추가하기
특정 요소 및 섹션, 또는 사이트 페이지 전체에 루프 애니메이션을 추가할 수 있습니다.
루프 애니메이션을 추가하려면
- 해당 요소를 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
화살표를 클릭합니다.
![Studio 에디터에서 속성 패널을 여는 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- 애니메이션 및 효과
탭을 클릭합니다.
- 반복 재생 아래에서 + 추가를 클릭합니다.
- 목록에서 애니메이션을 선택합니다.
도움말: 애니메이션에 마우스오버해 표시되는 방식을 미리 확인할 수 있습니다.
![사용 가능한 루프 애니메이션과 해당 애니메이션에 마우스오버하면 미리보기가 표시되는 방법을 보여주는 GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/e808436f-41ad-4d8f-9c6a-94d6034eadd2/e2b5e0b1-98ff-4462-83ac-c1b948a0862d.gif)
루프 애니메이션 사용자 지정하기
애니메이션을 선택한 후에는 원하는 방식으로 작동하도록 설정하세요. 애니메이션 지속 시간 및 강도 설정, 반복 사이에 지연 시간을 추가하는 등의 작업을 수행할 수 있습니다.
루프 애니메이션을 사용자 지정하려면:
- 해당 요소를 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
화살표를 클릭합니다.
![Studio 에디터에서 속성 패널을 여는 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- 애니메이션 및 효과
탭을 클릭합니다.
- 변경하고자 하는 애니메이션을 클릭합니다.
- 애니메이션 조정을 클릭해 설정을 변경합니다.
- 방향: 애니메이션이 나오는 방향을 선택합니다. (예: 왼쪽에서, 위에서)
- 강도: 애니메이션을 더 은은하게 또는 공격적으로 만듭니다.
- 지속 시간: 애니메이션의 지속 시간을 변경합니다.
- 반복 지연: 애니메이션의 무한 반복 사이에 지연 시간(초)을 추가합니다.
- Ease 효과: 애니메이션이 서서히 나타나거나 사라지는 정도를 선택합니다.
참고:
사용 가능한 설정은 선택한 애니메이션에 따라 달라집니다.
![루프 애니메이션에 사용할 수 있는 조정 옵션의 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2023/07/27/081df38f-3060-4b91-9238-f9b2f9504a5d/7df8c1d2-63f0-4773-aba5-dbc72b876929.png)
루프 애니메이션 제거하기
속성 패널에서 언제든지 루프 애니메이션을 제거할 수 있습니다.
루프 애니메이션을 제거하려면:
- 해당 요소를 선택합니다.
- 에디터 오른쪽 상단에서 속성 열기
화살표를 클릭합니다.
![Studio 에디터에서 속성 패널을 여는 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/d6b40156-9694-4cfe-9209-54815ef9d6dc/2024/03/07/ed25ff0f-6b3d-4d1c-9155-e9b1c788a0b5/326f9801-aa4e-4ca8-8989-360b80ec33f2.png)
- 애니메이션 및 효과
탭을 클릭합니다.
- 애니메이션에 마우스오버한 후 추가 작업
아이콘을 클릭합니다.
- 제거를 클릭합니다.
![속성 패널에서 루프 애니메이션 제거하기](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/8696077d-830a-4b1e-bd86-9df98f89994a/2024/08/07/3802d9f8-945b-41c6-b4da-84726b1455dc/27ead035-4ea2-4ac4-a6b4-6a92acfbabab.png)