모바일N 프리미엄 반응형 노코딩 테마

업데이트 소식

제목버전 3.30 릴리즈노트2022-02-26 16:21
작성자 Level 10

이벤트에 대한 애니메이션


애니메이션 켜기

이제 모든 애니메이션 옵션이 오른쪽 속성 패널에 그룹화되어 동시에 사용할 수 있습니다.

애니메이션 켜기:

  • 스크롤
  • 호버
  • 에서 시작하다
  • 이미지 호버
animation-001.jpg
 

스크롤 애니메이션

방문자가 페이지를 스크롤할 때 애니메이션을 트리거할 수 있으며 요소가 화면에 표시됩니다.

scroll.png

호버에 애니메이션

Hover 애니메이션을 라디오 버튼으로 활성화하여 명확하게 하는 옵션을 추가했습니다. 그룹 옵션 은 요소가 그룹 또는 그리드 내부에 있을 때 나타납니다. 또한 호버 애니메이션을 비활성화하는 옵션을 구현했습니다.

radio-button.png

요소에 마우스를 가져갑니다.

요소에 Hover를 추가할 수 있습니다.

event-hover-big.gif

그룹 위로 마우스를 가져갑니다.

또한 그룹에서 호버를 트리거할 수 있습니다.

event-hover-on-group-21.gif

애니메이션 시작

그룹의 요소에 대한 초기 애니메이션 매개변수를 설정할 수 있는 시작 탭 을 추가했습니다 . Hover 탭
에서 끝 매개변수를 지정할 수 있습니다 .

start-from-2.gif
다음 예제는 Animation Start From을 사용하는 방법을 보여줍니다.

example.gif

페이드 효과 투명도

투명도 옵션을 100%로 설정하여 시작 탭 아래에 있는 요소를 숨길 수 있습니다 .

Hover에 표시하려면 Hover 탭에서 투명도를 0%로 설정하십시오. 그룹 위로 마우스를 가져가는 동안 요소를 표시하려면 그룹에 호버 를 사용합니다 .

start-from-pw-2.png

다음은 Hover 투명도의 예입니다

hover-transparency (1).gif

사용자 정의 요소

호버 애니메이션에 대한 사용자 정의 요소 옵션을 계속 개선했습니다.

custom-elements.png

다음은 사용자 정의 요소를 사용하는 방법의 예입니다.

custom-elements-example.gif