Wix Studio 에디터: 스크롤 애니메이션 추가하기

3 분 분량

스크롤 애니메이션을 추가해 브라우징 경험을 더 매력적이고 기억에 남게 만드세요. 애니메이션의 진행 상황이 스크롤 위치와 직접 연결되어 방문자가 위아래로 스크롤할 때 요소가 공개되거나 변형됩니다.

다음 도움말을 참고하세요.

새로운 스크롤 애니메이션 효과를 추가하려면 해당 효과를 트리거하는 요소를 선택하세요. 선택한 애니메이션은 방문자가 해당 요소를 스크롤하면 시작됩니다.트리거 요소를 선택한 후에는 애니메이션을 적용할 요소를 결정하고 애니메이션 경로를 선택합니다.

해당 요소 또는 섹션을 선택합니다.
에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
인터렉션 탭을 클릭합니다.
스크롤 아래에서 +추가를 클릭합니다.
애니메이션을 설정합니다.
1. 애니메이션 요소 아래에서 애니메이션을 표시할 요소를 선택합니다.
2. 애니메이션 경로 아래에서 옵션을 선택해 디자인한 요소를 기준으로 애니메이션이 시작되는 방식을 결정합니다. 캔버스의 디자인을 애니메이션의 시작점(디자인부터 시작) 또는 끝점(디자인에서 종료)으로 만들 수 있습니다.
3. 목록에서 애니메이션을 선택합니다.
  도움말: 애니메이션에 마우스오버해 표시되는 방식을 미리 확인할 수 있습니다.

애니메이션을 선택한 후에는 원하는 방식으로 작동하도록 설정하세요.사용 가능한 설정은 선택한 특정 애니메이션에 따라 다릅니다.

해당 요소 또는 섹션을 선택합니다.
에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
인터렉션 탭을 클릭합니다.
변경하고자 하는 애니메이션을 클릭합니다.
애니메이션 조정을 클릭해 설정을 변경합니다.
- 방향: 애니메이션이 나오는 방향을 선택합니다. (예: 왼쪽에서, 위에서)
- 비율: 애니메이션에 사용되는 요소의 대상 크기를 설정합니다. 예를 들어, 80%는 애니메이션에서 요소가 20% 축소됨은 의미합니다.
- 거리: 애니메이션에서 요소가 이동하는 거리를 결정합니다.
- 애니메이션 영역: 스크롤하는 동안 애니메이션이 시작되고 중지되는 지점을 결정합니다.0%는 화면 하단이고 100%는 화면 상단입니다. 예를 들어, 영역을 100%로 설정하면 요소가 하단에 있을 때 애니메이션이 시작되고 상단에 도달하면 종료됩니다.

도움말:

스크롤하여 미리보기 버튼을 활성화해 생성하는 애니메이션을 캔버스에서 직접 확인하세요.

속성 패널에서 언제든지 스크롤 애니메이션을 제거할 수 있습니다.

페이지 메뉴