Wix 에디터: 애니메이션 추가 및 사용자 지정하기
3 분 분량
애니메이션을 사용해 생동감 넘치는 사이트를 만들어보세요. "떠다니기" 및 "확대하기"와 같은 효과를 추가해 창의적이고 멋진 페이지를 만들어 보세요. 애니메이션이 재생되는 방법과 시기(한 번, 스크롤 시, 반복 재생 등)를 선택할 수 있습니다.
다양한 요소에 애니메이션을 적용할 수 있고 데스크톱과 모바일 사이트에서 같은 요소에 서로 다른 효과를 적용할 수도 있습니다. Wix의 모바일 애니메이션은 작은 화면에 맞게 설계되어 모든 기기에서 방문자에게 놀라운 경험을 선사할 수 있습니다.
다음 지침을 참고하세요.
애니메이션에 오류가 발생했다면:
여기의 단계를 따라 애니메이션이 라이브 사이트에서 예상대로 작동하는지 확인하세요.
요소에 애니메이션 추가하기
요소에 애니메이션을 추가해 사이트를 역동적이고 매력적으로 만들어 보세요. 각 애니메이션은 서로 다른 효과를 가지고 있어 다양한 요소와 결합해 방문자에게 오래도록 기억될 수 있습니다.
도움말:
그룹을 선택하고 애니메이션 
아이콘을 클릭해 요소 그룹에 애니메이션을 추가할 수 있습니다.
아이콘을 클릭해 요소 그룹에 애니메이션을 추가할 수 있습니다.애니메이션을 추가하려면:
- 에디터에서 해당 요소를 클릭합니다.
- 애니메이션 아이콘을 클릭합니다.
- 제공된 옵션에서 애니메이션을 선택합니다.
- 입장: 선택한 요소가 화면에 나타날 때 애니메이션이 한 번만 재생됩니다.
- 반복 재생: 애니메이션이 반복 재생됩니다.
- 스크롤: 요소가 뷰 화면으로 스크롤될 시 애니메이션이 재생됩니다.
참고:
머리글 요소는 페이지 첫 방문 시 한 번만 애니메이션 효과가 적용됩니다.
애니메이션 사용자 지정하기
요소에 애니메이션을 추가한 뒤 원하는 대로 작동하고 사이트의 분위기에 어울리도록 사용자 지정할 수 있습니다.
강도, 방향 및 속도 등의 설정을 조정해 임팩트를 주고 방문자를 끌어들일 수 있습니다.
참고:
사용 가능한 사용자 지정 옵션은 선택한 애니메이션에 따라 달라집니다.
애니메이션을 사용자 지정하려면:
- 에디터에서 해당 요소를 클릭합니다.
- 애니메이션 아이콘을 클릭합니다.
- 사용자 지정을 클릭하고 옵션을 사용해 애니메이션을 조정합니다.
- 강도: 드롭다운을 클릭해 애니메이션 재생 강도를 선택합니다.
- 방향: 애니메이션이 시작하는 방향(예: 시계 방향 또는 오른쪽)을 선택합니다.
- 거리: 슬라이더를 사용해 효과 시작 지점과 종료 지점 간의 거리를 변경합니다.
- 지속 시간: 슬라이더를 사용해 애니메이션 지속 시간을 조정합니다.
- 속도: 슬라이더를 끌어 페이지 로딩과 애니메이션 시작 시점 간의 속도를 조정합니다.
- 애니메이션 유형: 스크롤 시 안쪽, 바깥쪽 또는 연속 애니메이션 유형 중에서 선택합니다.
- 모션 스타일: 모션의 강도를 완만하게 또는 보통으로 선택합니다.
모바일 사이트에 애니메이션 추가하기
데스크톱 사이트 요소뿐만 아니라 모바일 사이트에도 애니메이션을 추가할 수 있어 방문자가 모든 기기에서 뛰어난 브라우징 경험을 할 수 있습니다.
모바일을 위한 애니메이션은 작은 화면 해상도 및 크기를 위해 특별히 설계되어 여백에 대해 걱정할 필요가 없습니다.
참고:
데스크톱에 추가한 애니메이션 효과는 다양한 화면 크기에 최적화되어 있으므로 모바일 사이트에 적용되지 않습니다. 모바일에서도 요소에 애니메이션 효과를 적용하려면 아래 단계를 따르세요.
모바일에 애니메이션을 추가하려면:
- 모바일 에디터로 이동합니다.
- 해당 요소를 클릭합니다.
- 애니메이션 아이콘을 클릭합니다.
- 제공된 옵션에서 애니메이션을 선택합니다.
Velo에 대한 중요 참고 사항:
Velo(코드)를 사용해 요소를 숨기거나 표시하는 경우 애니메이션 또한 Velo를 통해 설정되어야 합니다.
도움이 되었나요?
|