웹사이트에 애니메이션 효과를 추가하면 방문자의 주의를 웹 디자인의 필수 요소로 끌어들이는 강력한 방법입니다.
애니메이션은 웹 디자인에 즐거움을 더함으로써 감정적 경험을 향상시킬 수 있습니다.
Animation On Scroll은 웹 페이지를 로드하고 스크롤하는 기본 효과입니다. 요소를 선택한 다음 속성 패널로 이동하여 추가할 수 있습니다.
On Scroll 링크를 클릭하고 애니메이션 확인란을 선택합니다. 필요한 경우 사전 설정을 선택하고 On Scroll 효과를 사용자 정의합니다.
Box 또는 Jack In Box는 인기 있는 장난감 움직임을 모방한 전환 효과를 만듭니다. 중앙 페이드 인으로 시작하여 한 쪽에서 다른 쪽으로 계속 흔들립니다.
요소가 페이지 로드 또는 스크롤 시 특정 방향으로 한 지점에서 다른 지점으로 점진적으로 이동하도록 하려면 효과를 추가하십시오. 요소를 추가하고 선택한 다음 속성 패널의 스크롤 시 애니메이션 섹션에서 슬라이드 사전 설정을 클릭하여 슬라이드 효과를 지정합니다.
페이드 효과는 이미지, 텍스트 또는 배경과 같은 요소가 점차 사라지고 웹 페이지에 다시 나타나는 스타일 전환입니다. 요소를 선택하고 속성 패널에서 애니메이션 스크롤을 선택하여 페이드 효과를 설정할 수 있습니다.
뒤집기 효과를 적용하여 요소의 반 회전을 구현하여 현재 요소의 앞면과 뒷면을 모두 볼 수 있습니다. X축 또는 Y축으로 플립 폴을 선택할 수 있습니다. 요소를 선택한 다음 속성 패널에서 애니메이션 스크롤에 대한 사전 설정 뒤집기를 선택할 수 있습니다.
Animation On Scroll 사전 설정을 사용할 수 있습니다. 그리고 두 가지 유형이 있습니다. 속성을 완전히 편집할 수 있는 사용자 정의 가능한 애니메이션 사전 설정, 라이브러리에서만 선택하고 미세 조정을 최소화할 수 있는 사전 설계된 애니메이션 사전 설정입니다.
깜박임과 관련된 Flash Animation도 방문자의 관심을 끌기 위해 인기가 있습니다. 애니메이션 개체 또는 텍스트의 불투명한 상태를 강조하는 일련의 페이드 인 및 페이드 아웃 전환처럼 보입니다.
힌지 효과를 사용하면 상상할 수 있는 힌지 지점에서 요소가 갑자기 빠르게 움직이면서 뒤집히거나 뒤집힙니다. 이 자연스러운 전환은 웹 디자인의 상호 작용에 놀라움을 더할 수 있습니다.
표준 애니메이션 효과가 웹사이트 아이디어에 너무 적으며 원하는 결과를 얻으려면 여러 애니메이션 효과를 혼합해야 한다고 가정합니다. 사용자 정의 가능한 애니메이션 사전 설정에 사용할 수 있는 속성을 완전히 제어할 수 있습니다. 그리고 최소한의 미세 조정으로 라이브러리에서 미리 디자인된 애니메이션 사전 설정만 선택하십시오. 속성 패널로 이동하여 페이드, 이동, 확대/축소, 롤, 회전 및 나선형 효과의 모든 속성을 사용자 지정할 수 있습니다.
요소에 대한 호버 효과는 요소 위로 마우스를 가져갈 때 모양이 변경되는 것입니다.
Hover Animation은 자동으로 방문자의 관심을 콘텐츠로 이끌고 웹사이트의 참여와 상호 작용을 향상시킵니다.
속성 패널에서 Color, Border, Radius, Shadow 등의 hover를 변경하고 Duration을 설정할 수 있습니다.
방문자의 관심을 끌고 유지하기 위해 이미지 갤러리 및 이미지 배경에 상호 작용을 추가할 수 있습니다. 이미지 배경에 적용할 수 있는 확대 및 축소, 크기 조정 및 슬라이드를 포함하여 이미지 배경 호버 애니메이션에 대한 몇 가지 인기 있는 사전 설정이 있습니다. 오른쪽에 있는 속성을 편집하는 동안 이미지 호버 패널에서 선택합니다.
그룹이나 그리드 셀을 가리킬 때의 요소 애니메이션도 흥미롭습니다. 이러한 애니메이션 효과는 우아하고 자연스럽게 보입니다. 그룹에서 요소를 선택하고 속성 패널의 Hover 섹션 링크를 클릭한 다음 Hover 확인란을 선택합니다. 사전 설정을 선택한 다음 속성을 수정하여 설계된 효과를 얻으십시오.
Hover Slider는 클릭하지 않고 일정 시간 동안 그룹에 마우스를 가져 가면 슬라이드가 나타나는 요소입니다. 일반 및 마우스 호버 상태에 대해 다양한 요소 세트를 표시할 수 있으므로 그룹 및 그리드 셀에 상호 작용을 추가합니다. 호버 슬라이드를 추가하려면 그룹을 선택하세요. 속성 패널의 호버 슬라이드 섹션에서 필요한 속성을 수정합니다.
그룹 또는 격자 셀에 있는 요소의 경우 시작 위치 옵션을 설정하여 텍스트, 이미지, 아이콘, 버튼 등과 같은 요소의 시작을 변경하고, 이동, 크기 조정, 회전 및 가리켜서 투명도 속성을 변경할 수 있습니다. 시작 위치를 수정하려면 오른쪽에 있는 속성 패널로 이동하십시오. 시작 위치 링크를 클릭하고 필요한 속성을 편집합니다.