Wix 에디터: 모바일 사이트에 애니메이션 및 스크롤 효과 사용하기
3 분 분량
페이지 메뉴
- 모바일 사이트에 애니메이션 추가하기
- 모바일 사이트에서 애니메이션 사용자 지정하기
- 모바일 사이트에 스크롤 효과 추가하기
애니메이션 및 스크롤 효과는 중요한 요소와 콘텐츠에 주의를 집중시키는 동시에 방문자에게 재미있는 사이트 경험을 제공합니다.
엄선된 모바일 애니메이션은 더 작은 화면 크기 및 해상도에 맞게 최적화되어 있으므로 사이트 간격이나 정렬에 대해 걱정할 필요가 없습니다. 스트립, 단, 섹션의 배경에 멋진 스크롤 효과를 추가해 모바일 방문자에게 중요한 콘텐츠를 강조할 수도 있습니다.
![Wix 에디터 모바일 사이트의 애니메이션 GIF](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/04/06/627b8c74-e92b-4f40-b99a-9ba9f77883d1/a1c9b161-13bc-4b45-b0f5-cd28086230f3.gif)
중요!
데스크톱 및 모바일 애니메이션은 서로 별개입니다. 즉, 데스크톱 사이트 요소에 추가하는 애니메이션은 모바일 사이트에 영향을 미치지 않으며, 그 반대의 경우도 마찬가지입니다. 모바일 사이트에 애니메이션을 설정하지 않으면 애니메이션이 표시되지 않습니다.
모바일 사이트에 애니메이션 추가하기
요소에 애니메이션 효과를 추가해 생동감을 불어넣으세요. 14개의 모바일 전용 효과 중에서 선택할 수 있어 스타일에 맞는 애니메이션을 추가할 수 있습니다.
요소에 애니메이션을 추가하려면:
- 모바일 에디터에서 해당 요소를 클릭합니다.
- 애니메이션
아이콘을 클릭합니다.
- 제공된 옵션에서 애니메이션을 선택합니다.
도움말:
- 패널에서 효과에 마우스오버해 애니메이션을 미리 확인할 수 있습니다.
- 애니메이션 선택 패널에서 없음을 클릭해 요소에서 애니메이션 효과를 제거합니다.
![Wix 에디터의 애니메이션 옵션 스크린샷.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/09/27/9a16b6d1-62a0-4ebc-8e06-b6f46f246c59/13938aa8-2e6b-45be-9cf1-dcefd06b1b3d.png)
모바일 사이트에서 애니메이션 사용자 지정하기
요소에 사용할 애니메이션을 선택한 후에는 사용자 지정해 독특한 효과를 만들어 보세요.선택한 애니메이션에 따라 지연, 방향, 타이밍 등의 설정을 조정할 수 있습니다.
참고:
사용 가능한 사용자 지정 옵션은 선택한 애니메이션 유형에 따라 다릅니다.
애니메이션을 사용자 지정하려면:
- 모바일 에디터에서 요소를 클릭합니다.
- 애니메이션
아이콘을 클릭합니다.
- 사용자 지정을 클릭해 애니메이션을 조정합니다.
- 강도:드롭다운 메뉴에서 효과의 강도를 선택합니다.
- 방향: 애니메이션이 시작되는 방향을 선택합니다.
- 지속시간: 애니메이션이 지속되는 시간(초)을 선택합니다.
- 지연시간: 페이지 로딩과 애니메이션 재생 사이의 지연 시간(초)을 설정합니다.
도움말:
패널 상단에서 미리보기
아이콘을 클릭해 라이브 사이트에서 효과가 어떻게 보이는지 확인하세요.
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/04/06/01da1965-c041-4d08-96a5-67eba27acf4c/4444888e-0d0e-49c2-bcdb-20e8f62fb680.png)
![Wix 에디터의 애니메이션 사용자 지정 설정 스크린샷.](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/21e446eb-7f73-4f2f-84b1-c6b77e64e45e/2024/09/27/8a87c7b7-fb84-4830-9f49-3a74a4aef05d/020abeb3-2254-4db5-a25d-5e9304bf1be5.png)
라이브 사이트에서 애니메이션이 재생되지 않는다면:
기기에 동작 줄이기가 활성화되어 있을 수 있습니다. 애니메이션 문제 해결 방법에 대한 도움말을 참고하세요.
모바일 사이트에 스크롤 효과 추가하기
모바일 사이트의 스트립, 단 및 섹션 배경에 시선을 사로잡는 스크롤 효과를 추가하세요. 데스크톱 사이트에는 효과가 표시되지 않으므로 모바일 방문자를 위한 맞춤형 경험을 제공할 수 있습니다.
모바일 전용 스크롤 효과를 추가하려면:
- 모바일 에디터에서 스트립 / 단/ 섹션을 클릭합니다.
- 애니메이션
아이콘을 클릭합니다.
- (스트립 및 단의 경우) 드롭다운 메뉴에서 스크롤 효과를 선택합니다.
- 패널에서 원하는 스크롤 효과를 선택합니다.
다음을 참고하세요.
- 스트립 또는 단에 애니메이션 및 배경 스크롤 효과를 모두 추가할 수는 없습니다.
- 단이 포함된 스트립에는 효과를 추가할 수 없습니다. 하지만, 단 자체에 입구 애니메이션 또는 배경 스크롤 효과를 추가할 수 있습니다.
![Wix 에디터의 애니메이션 스크롤 효과 스크린샷](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/12/20/faa3bf86-b5bf-44cb-b331-454172eb90c5/e56f9000-408b-4300-8b49-a472fe31e1f2.png)
참고:
사용 가능한 스크롤 효과는 배경 유형(색상, 이미지 또는 동영상)에 따라 다릅니다.