Studio 에디터: 애니메이션 정보
2 분 분량
디자인에 애니메이션을 통합하면 애니메이션을 한 단계 업그레이드할 수 있습니다. Studio 에디터는 애니메이션을 표시하려는 시점에 따라 5가지 애니메이션 유형을 제공합니다.
방문자가 요소에 마우스오버하거나, 요소를 클릭 또는 스크롤할 때 애니메이션이 표시되도록 하세요. 한 줄의 코드 없이도 요소 첫 로딩 시 적용되는 입장 애니메이션 또는 연속적으로 반복되는 애니메이션 등을 추가할 수도 있습니다.
참고:
애니메이션 크기는 페이지를 처음 로딩 시 특정 브라우저에 따라 계산됩니다. 핸들을 끌어 브라우저 창 크기를 조정할 경우, 애니메이션이 제대로 표시되지 않을 수 있습니다. 최적의 표시를 위해 페이지를 새로 고침하는 것이 좋습니다.
입장 애니메이션
요소에 입장 애니메이션을 추가하는 것은 방문자의 관심을 끌 수 있는 좋은 방법입니다.요소가 처음 뷰에 표시될 때 애니메이션이 적용되어 즉시 시선을 사로잡을 수 있습니다. 다양한 유형 중 선택하고 클라이언트의 요구에 맞게 사용자 지정할 수 있습니다.
마우스오버 및 클릭 인터랙션
방문자가 요소에 마우스오버하거나 클릭 시 표시되는 멋진 효과를 추가하세요. 마우스오버 또는 클릭 시 요소를 변형, 이동 또는 새로운 콘텐츠를 표시하도록 할 수 있습니다.
사전 디자인된 다양한 효과 중 선택하거나 정확한 사양으로 사용자 지정 효과를 생성하세요. 실행 시점, 순서, 완화 방식 등을 관리해 모든 설정을 통합한 후, 에디터에서 최종 결과를 미리보기할 수 있습니다.
또한, 요소에 마우스오버 또는 클릭 시 다른 요소에 애니메이션이 적용될 수 있도록, 요소 간에 인터랙션을 생성할 수도 있습니다.
아래 예제에서는 단락에 마우스오버 시 버튼과 이미지가 이동합니다.
스크롤 애니메이션
스크롤 기반 애니메이션을 활용해 참여도를 높이고 흥미로운 효과를 만드세요.애니메이션의 진행은 방문자가 위아래로 스크롤 시, 앞뒤로 이동하는 스크롤 위치와 직접 관련이 있습니다.
또한, 한 요소를 지나 스크롤 시 다른 요소에 애니메이션이 적용될 수 있도록, 요소 간에 인터랙션을 생성할 수도 있습니다.
아래 예에서는 제목을 지나 스크롤 시 반복 레이아웃이 커집니다.
루프 애니메이션
지속적으로 반복되는 애니메이션을 사용해 디자인에 움직이는 느낌을 더하세요. 방문자가 관심을 갖기를 바라는 모든 요소에 루프 애니메이션을 추가할 수 있습니다. 일부는 더 미세하며, 일부는 진정한 관심을 끌 수 있습니다.
도움이 되었나요?
|