Wix Studio 에디터: 프리 클릭 또는 마우스오버 인터랙션 추가하기

5 분 분량

인터랙션을 추가해 방문자가 요소를 클릭하거나 마우스오버 시 표시되는 애니메이션 경험을 조성하세요. 빠르고 쉬운 애니메이션이 필요하다면, 프리셋(예: 확대, 축소, 페이드) 중 하나를 선택해 원하는 대로 조정할 수 있습니다.

인터랙션은 방문자가 클릭하거나 마우스오버하는 요소 또는 페이지의 다른 요소에 애니메이션을 적용할 수 있습니다. 어느 쪽이든, 디자인, 느낌, 실행 시점 등을 완전히 제어할 수 있으므로 정말 효과적입니다.

먼저 인터랙션을 트리거하는 요소를 선택하세요. 이는 방문자가 애니메이션을 보기 전에 마우스오버하거나 클릭하는 요소입니다. 요소를 선택한 후에는 속성 패널의 인터랙션 탭으로 이동해 새 인터랙션을 추가합니다.

도움말:

요소에 여러 인터랙션을 추가해 마우스오버 또는 클릭 시 다양한 애니메이션이 트리거되도록 설정할 수 있습니다.

요소 및 트리거를 선택한 후 인터랙션을 설정합니다. 미리 디자인된 애니메이션, 애니메이션을 표시할 요소, 마우스오버 또는 클릭 시 발생하는 동작을 선택하세요.

참고:

사용 가능한 애니메이션은 선택한 요소에 따라 다릅니다.

(인터랙션 설정 패널에서) 마우스오버 시 또는 클릭 시 발생하는 작업을 선택합니다.
- 애니메이션 시작: 요소 클릭 또는 마우스오버 시 선택한 애니메이션이 트리거됩니다.
- 애니메이션 초기화: 요소 클릭 또는 마우스오버 시 이전에 적용된 애니메이션이 제거됩니다.
- 전환키 온/오프: 요소 클릭 시 애니메이션이 트리거되고, 두 번째 클릭하면 애니메이션이 제거됩니다. 참고: 이 옵션은 클릭 인터랙션에만 사용할 수 있습니다.
애니메이션 요소를 선택합니다.
- 요소가 자체 애니메이션을 트리거하도록 설정하기: 요소의 이름을 클릭합니다. (요소 옆 (선택항목) 단어가 표시됩니다.)
- 페이지에서 다른 요소에 애니메이션 효과 적용하기: 드롭다운에서 요소를 선택하거나 캔버스에서 선택을 클릭해 페이지에서 선택합니다.
  도움말: Cmd / Ctrl 키를 누른 상태에서 하위 요소를 선택하세요.
애니메이션을 선택합니다.
1. 프리셋 탭을 클릭합니다.
2. 목록에서 애니메이션을 선택합니다.

도움말:

클릭 또는 마우스오버 시 요소가 표시되도록 설정하면, 캔버스에 체크상자 오버레이와 함께 표시됩니다. 이는 요소가 처음에 투명했음을 나타냅니다.

이 표시는 언제든지 비활성화할 수 있습니다. Wix Studio

아이콘을 클릭하고 보기에 마우스오버한 후 투명 요소를 클릭하세요.

원하는 애니메이션을 선택한 후에는 원하는 효과를 얻을 수 있도록 사용자 지정하세요. 지속 시간, 지연 및 속도와 같은 설정을 제어해 애니메이션을 정말 효과적으로 만들 수 있습니다.

참고:

사용 가능한 설정은 선택한 프리셋 애니메이션에 따라 다릅니다.