정적 섹션은 평면 이미지처럼 읽습니다. 부드럽고 반복적인 드리프트를 주면 동일한 요소가 살아 있는 것처럼 느껴집니다. The 부동 효과 확장 에서 마스터 애드온 프로 작성할 키프레임이나 사용자 정의 CSS 없이 모든 Elementor 위젯에 해당 연속 모션을 추가합니다. 이 가이드에서는 확장 기능이 수행하는 작업,애니메이션할 수 있는 작업 및 적용 방법을 설명합니다.
부동 효과 확장이란 무엇입니까? #
X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 부동 효과 extension 은 Elementor 위젯에 연속적인 반복 애니메이션을 추가하는 Master Addons Pro 모션 도구입니다. 위젯을 From 과 To 값 사이에서 with 로 이동합니다 번역하다, 회전시키다 그리고 스케일 변환한 다음 다시 돌아오면 각 변환이 있습니다 기간 그리고 지연 필드. 모션은 부드러운 인아웃 용이성으로 작은 anime.js 라이브러리에서 실행됩니다. 섹션,열 및 컨테이너는 패널을 얻지 못합니다.
애니메이션으로 만들 수 있는 것 #
부동 효과는 세 가지 변환 유형을 통해 작동하며, 이를 타이밍 컨트롤과 결합하여 모션을 형성합니다:
- 번역하다: X를 번역하고 Y를 번역합니다. 각각 -100~100px 사이의 From 및 To 값을 가지며 고전적인 상하 또는 좌우 플로트의 경우입니다.
- 회전: X, Y 및 Z를 -180 도에서 180 도 사이로 회전하여 위젯을 앞뒤로 돌려 흔들림.
- 규모: 0 과 5 사이의 스케일 X 및 스케일 Y, 소프트 펄스를 위해 위젯을 성장 및 축소.
- 기간 및 지연: 지속 시간은 최대 10000ms(비어 있는 경우 1000)까지 이동하고 지연은 최대 5000ms까지 이동합니다. 둘 이상의 변환을 켜면 번역의 타이밍을 먼저 사용한 다음 회전의 타이밍, 스케일의 타이밍을 사용하여 하나의 타임라인을 공유합니다.
Elementor에 부동 효과를 추가하는 방법 #
부동 효과는 마스터 애드온에서 확장 프로그램이 활성화되면 Elementor 편집기의 위젯당 적용됩니다. 간단히 말해서: 애니메이션할 요소를 선택하고, 설정을 열고, 부동 효과를 켜고, 타이밍에 따라 변환을 선택합니다.
- 확실히 해 마스터 애드온 프로 설치되고 활성화되었으며 Master Addons 패널에서 부동 효과 확장이 활성화되었습니다.
- Elementor 편집기에서 애니메이션을 적용할 위젯을 선택합니다.
- 요소의 설정을 열고 마스터 애드온을 찾습니다 부동 효과 제어한 다음 효과를 전환합니다.
- 켜다 번역하기, 회전하다 또는 스케일, From 및 To 값을 설정한 다음 기간 그리고 지연.
- 라이브 사이트에서 요소 드리프트를 보려면 페이지를 미리 보거나 게시하세요.
부동 효과 사용을 위한 팁 #
- 모션을 미묘하게 유지하십시오. 작은 번역 거리와 느린 지속 시간이 광택 처리된 것으로 읽혀짐; 크고 빠른 움직임은 산만해 보입니다.
- 한 뷰당 하나 또는 두 개의 요소에 사용합니다. 하나의 떠다니는 영웅 이미지나 아이콘이 눈을 그립니다; 움직이는 전체 페이지가 그 자체와 경쟁합니다.
- 입구 모션과 페어링합니다. 부동 효과를 결합합니다 입구 애니메이션 요소가 먼저 완화되도록 확장한 다음 부드러운 부동 상태를 유지합니다.
- 모바일에서 확인해보세요. 작은 화면에서는 움직임이 여전히 좋아 보이고 근처 콘텐츠를 밀어 넣지 않는지 확인하세요.
자주 묻는 질문 #
Master Addon의 부동 효과 확장은 무엇입니까?
Floating Effects 는 Elementor 위젯에 연속적인 반복 애니메이션을 추가하는 Master Addons Pro 확장 프로그램입니다. 기간 및 지연 설정이 있고 사용자 정의 CSS 또는 키프레임이 없는 translate,rotate 및 scale 변환을 통해 From 및 To 값 사이에서 위젯을 앞뒤로 이동합니다.
Floating Effects는 어떤 종류의 애니메이션을 만들 수 있나요?
세 가지 변환 유형을 지원합니다: translate는 요소를 위아래로 또는 좌우로 이동하고, 회전하여 앞뒤로 부드럽게 흔들리고, 스케일링하여 부드러운 펄스 효과를 얻을 수 있습니다. 변환을 타이밍 설정과 결합하여 원하는 정확한 모션을 형성할 수 있습니다.
플로팅 애니메이션의 속도와 방향을 제어할 수 있나요?
속도,예. 각 변환에는 Duration 및 Delay 필드가 있지만 결합된 변환은 Translate 를 먼저 사용한 다음 Rotate,Scale 을 사용하여 하나의 타임라인을 공유합니다. 방향 설정은 없습니다: 모션은 항상 From 값에서 To 값으로 재생되고 뒤로 재생됩니다.
부동 효과가 모든 Elementor 요소에 작동합니까?
이미지, 아이콘, 표제 또는 버튼과 같은 위젯에서만 작동합니다. 섹션, 열 및 컨테이너는 부동 효과 패널을 얻지 못하므로 요소 그룹을 부동시키려면 각 위젯에 효과를 추가합니다.
떠다니는 애니메이션이 내 웹사이트의 속도를 늦출까요?
모션은 작은 anime.js 라이브러리를 통해 실행되며 브라우저가 잘 처리하는 CSS 변환만 애니메이션화합니다. 페이지를 매끄럽게 유지하려면 한 번에 페이지의 모든 것에 애니메이션을 적용하지 않고 보기당 한두 개의 요소에만 사용하고 움직임을 미묘하게 유지하십시오.
부동 효과는 무료입니까?
아니요. 부동 효과는 Master Addons Pro 의 일부입니다. Free Elementor 에는 한 번 재생되는 입구 애니메이션이 있지만 반복 부동은 없습니다.
