Studio 에디터: 스크롤 애니메이션 추가하기 | 도움말 센터

Wix를 사용해해 사이트와 비즈니스를 구축하는 방법을 알아보세요.

직관적인 Wix 기능을 사용해 사이트를 디자인하고 관리하세요.

구독, 플랜 및 인보이스를 관리하세요.

비즈니스를 운영하고 회원과 소통하세요.

도메인을 구매하고 사이트에 연결, 이전하는 방법을 알아보세요.

비즈니스 및 웹 존재감을 키울 수 있는 도구를 확인하세요.

SEO 및 마케팅 도구로 가시성을 높이세요.

보다 효율적으로 작업할 수 있는 고급 기능을 활용하세요.

해결책을 찾고, 알려진 문제에 대해 알아보거나 문의하세요.

강좌 및 튜토리얼을 통해 실력을 향상시키세요.

웹 디자인, 마케팅 등에 대한 팁을 확인하세요.

검색 엔진에서 유기적 사이트 트래픽을 증가시키는 방법을 알아보세요.

풀스택 플랫폼을 활용해 맞춤형 사이트를 구축하세요.

목표 달성에 도움을 줄 전문가를 만나보세요.

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

6 분

페이지 메뉴

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

도움말:

Wix Studio 아카데미 과정을 확인하고 애니메이션 및 인터랙션 추가에 대한 자세한 도움말을 확인하세요. (영문)

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

참고:

고정된 요소는 (방문자의 뷰포트를 기준으로) 항상 동일한 위치에 유지되므로 트리거로 설정할 수 없습니다.
스크롤 애니메이션이 제대로 표시될 수 있도록 페이지에 충분한 공간이 있는지 확인하세요. 예를 들어, 요소가 페이지의 첫 번째 또는 마지막 접기 부분에 있는 경우 스크롤 애니메이션이 표시되지 않을 수 있습니다.

가로 스크롤을 찾고 있나요?

속성의 옵션은 세로 스크롤에 적용되지만 Wix Academy 튜토리얼을 따라 멋진 가로 스크롤 효과를 만들 수 있습니다.

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

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