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

업데이트 소식

제목버전 3.28 릴리즈노트2022-02-26 15:58
작성자 Level 10

새로운 호버 애니메이션 효과: 이동, 회전 및 크기 조정

최신 웹사이트에서 호버 애니메이션 효과가 더욱 정교해졌습니다. 호버 애니메이션에 대해 이동, 회전 및 크기 조정 효과를 구현했습니다.

move-rotate-scale-hover-animation-effects.gif

호버 애니메이션 이동

Hover에서 요소를 이동할 수 있습니다.

  1. 요소를 선택합니다.
  2. 속성 패널로 이동하여 호버 탭으로 전환합니다.
  3. 애니메이션 속성을 열고 X, Y 이동 속성 값을 설정합니다.

이동 방향을 변경하는 양수 및 음수 값을 모두 입력할 수 있습니다.

move-hover-animation.gif
 

호버 애니메이션 회전

속성 패널에서 Hover에서 요소를 회전할 수도 있습니다. 슬라이더로 각도를 선택하거나 필드에 값을 입력합니다. Slider에 지원되는 값은 0에서 359까지이며 수동으로 다른 값을 입력할 수 있습니다.

rotate-hover-animation.gif
 

스케일 호버 애니메이션

디자인에 필요한 경우 호버에서 요소의 크기를 조정할 수도 있습니다. 실제 크기는 100과 같습니다. 요소를 축소 및 확장하면서 양방향으로 이동할 수 있습니다. Slider에 지원되는 값은 10에서 200까지이며 필요한 경우 이 필드에 더 큰 숫자를 입력할 수 있습니다.

scale-hover-animation.gif
 

그리드 리피터 요소에 대한 호버 효과

이전에는 그리드 리피터 요소에 대한 호버 애니메이션을 지원하지 않았습니다. 이제 그리드 리피터에서 사용되는 요소에 대한 호버로 모든 속성을 적용할 수 있습니다.

hover-animation-grid-repeater.gif
 

스크롤 애니메이션 속성

On-Scroll 애니메이션의 속성 패널 탭을 개선했습니다. 이전에는 사전 설정 및 설정이 있는 탭이 있었지만 이제는 속성을 한 번에 볼 수 있으며 방향 아이콘을 클릭하여 시각적으로 방향을 선택할 수 있습니다.

on-scroll-animation-properties.gif
 

속성 패널의 이미지 맞춤 옵션

이미지 맞춤 옵션을 보다 시각적이고 직관적으로 만들었으며 이제 클릭으로 이미지 맞춤을 전환하거나 이러한 옵션에 대한 세부 정보가 있는 대화 상자를 열 수 있습니다.

image-fit-options.png
 

문의 양식 요소 속성

양식 입력 반경

Contact Form 입력 필드에 Radius 속성을 추가했습니다.

radius-form-inputs.png
 

양식 버튼의 그림자

Contact Form의 Button에 Shadow 속성을 추가했습니다.

shadow-form-button.png