Studio 에디터: 애니메이션 정보

2 분 분량
디자인에 애니메이션을 통합하면 애니메이션을 한 단계 업그레이드할 수 있습니다. Studio 에디터는 애니메이션을 표시하려는 시점에 따라 5가지 애니메이션 유형을 제공합니다.
방문자가 요소에 마우스오버하거나, 요소를 클릭 또는 스크롤할 때 애니메이션이 표시되도록 하세요. 한 줄의 코드 없이도 요소 첫 로딩 시 적용되는 입장 애니메이션 또는 연속적으로 반복되는 애니메이션 등을 추가할 수도 있습니다.
참고:
애니메이션 크기는 페이지를 처음 로딩 시 특정 브라우저에 따라 계산됩니다. 핸들을 끌어 브라우저 창 크기를 조정할 경우, 애니메이션이 제대로 표시되지 않을 수 있습니다. 최적의 표시를 위해 페이지를 새로 고침하는 것이 좋습니다.

입장 애니메이션

요소에 입장 애니메이션을 추가하는 것은 방문자의 관심을 끌 수 있는 좋은 방법입니다.요소가 처음 뷰에 표시될 때 애니메이션이 적용되어 즉시 시선을 사로잡을 수 있습니다. 다양한 유형 중 선택하고 클라이언트의 요구에 맞게 사용자 지정할 수 있습니다.  
전체 페이지에 적용되는 입장 애니메이션의 예로, 로딩 시 표시됩니다.

마우스오버 및 클릭 인터랙션

방문자가 요소에 마우스오버하거나 클릭 시 표시되는 멋진 효과를 추가하세요. 마우스오버 또는 클릭 시 요소를 변형, 이동 또는 새로운 콘텐츠를 표시하도록 할 수 있습니다.
사전 디자인된 다양한 효과 중 선택하거나 정확한 사양으로 사용자 지정 효과를 생성하세요. 실행 시점, 순서, 완화 방식 등을 관리해 모든 설정을 통합한 후, 에디터에서 최종 결과를 미리보기할 수 있습니다.
또한, 요소에 마우스오버 또는 클릭 시 다른 요소에 애니메이션이 적용될 수 있도록, 요소 간에 인터랙션을 생성할 수도 있습니다.
아래 예제에서는 단락에 마우스오버 시 버튼과 이미지가 이동합니다.
라이브 사이트에서 인터랙션이 어떻게 보이는지 보여주는 GIF.

스크롤 애니메이션

스크롤 기반 애니메이션을 활용해 참여도를 높이고 흥미로운 효과를 만드세요.애니메이션의 진행은 방문자가 위아래로 스크롤 시, 앞뒤로 이동하는 스크롤 위치와 직접 관련이 있습니다. 
또한, 한 요소를 지나 스크롤 시 다른 요소에 애니메이션이 적용될 수 있도록, 요소 간에 인터랙션을 생성할 수도 있습니다.
아래 예에서는 제목을 지나 스크롤 시 반복 레이아웃이 커집니다. 
라이브 사이트의 스크롤 효과 예제

루프 애니메이션

지속적으로 반복되는 애니메이션을 사용해 디자인에 움직이는 느낌을 더하세요. 방문자가 관심을 갖기를 바라는 모든 요소에 루프 애니메이션을 추가할 수 있습니다. 일부는 더 미세하며, 일부는 진정한 관심을 끌 수 있습니다.
라이브 사이트의 루프 애니메이션이 있는 텍스트 마스크 요소의 예

도움이 되었나요?

|