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