모든 것이 그냥 거기에 앉아있는 페이지는 PDF 처럼 읽습니다. 섹션에 도달하면 섹션이 쉽게 만들어지는 것처럼 느껴지는 페이지입니다. The 입구 애니메이션 확장 Elementor용 마스터 애드온 어떤 요소에 그 모션을 추가합니다: 40+ 애니메이션 라이브러리에서 효과를 선택하고, 타이밍을 설정하고, 요소가 보기로 스크롤되는 순간에 애니메이션을 적용합니다.
여기 실제 페이지에 대한 효과가 있습니다. 각 섹션은 뷰포트에 들어갈 때 페이드 인되고 상승합니다:
Entrance Animation 확장 프로그램이 수행하는 작업 #
활성화되면 모든 Elementor 요소는 다음을 얻습니다 입구 애니메이션 아래 섹션 고급 탭. 거기에 애니메이션을 할당하고 요소가 숨겨지기 시작한 다음 방문자가 스크롤하면 해당 효과를 재생합니다. 섹션,컨테이너, 제목,이미지, 버튼: 편집기의 모든 항목은 자체 입구를 전달할 수 있습니다.
애니메이션 라이브러리는 입구 스타일의 전체 범위를 다룹니다:
- 페이드 인 가족: 일반, 아래, 위, 왼쪽, 오른쪽, 각각 이동 거리를 변경하는 번호가 매겨진 변형이 있습니다.
- 에서 슬라이드 오른쪽, 왼쪽, 위쪽, 아래쪽.
- 마스크 From 요소를 지우는 상단, 하단, 왼쪽 및 오른쪽.
- 회전하세요 각 모서리를 향한 Down 및 Up 변형이 있습니다.
- 확대하세요 그리고 스케일 업 / 스케일 다운 깊이를 위한 가족.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치 및 활성. 플러그인에 새로운? 따라 설치 가이드 첫번째.
- Entrance Animation은 무료 확장 프로그램이므로 Pro 라이센스가 필요하지 않습니다.
Entrance Animation 확장을 활성화하는 방법 #
WordPress 대시보드에서 다음으로 이동하세요 마스터 애드온 그리고 열어보세요 확장 탭. 입구 애니메이션이 선두를 달리고 있습니다 애니메이션 위젯 transforms and Reveal 옆에 Hot 배지가 있는 그룹입니다. 보라색으로 변하도록 토글을 클릭한 다음 누르십시오 변경 사항 저장 그리고 녹색 “설정이 성공적으로 저장되었습니다” 공지를 기다리십시오.
요소에 대한 애니메이션을 선택합니다 #
Elementor 편집기에서 요소를 선택하고 엽니다 고급 탭하고 확장하세요 입구 애니메이션 보라색 MA 배지가 있는 섹션입니다. 그만큼 애니메이션 드롭다운은 전체 라이브러리를 보유합니다. 데모에서 영웅 섹션은 페이드 효과를 얻고 드롭다운은 과거를 스크롤하는 페이드,슬라이드, 마스크,회전, 줌 및 스케일 그룹을 보여줍니다.
하나를 선택하면 편집기가 즉시 미리보기하므로 모션이 내용에 맞을 때까지 옵션을 뒤집을 수 있습니다. Fade In Up 은 안전한 기본값입니다: 미묘한 리프트,드라마 없음,거의 모든 작업.
타이밍을 조정하십시오 #
애니메이션 드롭다운 아래에는 4개의 타이밍 컨트롤이 있습니다.
- 기간(ms): 애니메이션이 실행되는 시간. 데모는 과장된 5000ms 를 사용하므로 모션을 쉽게 볼 수 있습니다; 제작 페이지에서 400 ~ 800ms 는 일반적으로 올바른 느낌입니다.
- 지연(ms): 효과가 시작되기 전에 일시 정지, 데모에서 400ms. 형제 요소에 걸쳐 스태거 지연 그들은 한 번에 모두 대신 차례로 입력.
- 완화: 가속 곡선. 기본값은 작동하지만 출입구에는 용이성이 더 자연스럽게 적용됩니다.
- 반복 횟수: 효과가 몇 번 재생되는지.
페이지의 결과 #
게시 및 스크롤합니다. 각 요소는 뷰포트에 들어갈 때까지 유지된 다음 입구를 재생합니다: 기능 목록이 제자리에 올라가고 서비스 카드가 행으로 페이드 인되고 팀 섹션이 도달하면 따라옵니다. 이 페이지 상단의 애니메이션 GIF 는 데모 사이트의 정확한 순서를 보여줍니다.
연습에서 한 가지주의: 애니메이션 섹션,그 안에있는 모든 위젯이 아닙니다. 50 개의 요소가 각각 어딘가에서 날아 오는 페이지는 소음으로 읽습니다. 섹션 당 하나의 입구는 리듬을 유지합니다.
입구 애니메이션이 잘 작동하는 곳 #
- 영웅 섹션. 페이드인 헤드라인은 페이지가 로드되는 순간 톤을 설정합니다.
- 기능 행. 시차적 지연을 사용하여 순서대로 상승하는 카드입니다.
- 통계 및 카운터. 숫자가 시야로 스크롤되면 움직임이 눈을 사로잡습니다.
- 사용후기. 텍스트의 벽 대신 순간으로 읽기 쉬운 인용문입니다.
- 긴 랜딩 페이지. 자신을 발표하는 각 섹션은 스크롤 추진력을 계속 유지합니다.
비디오 자습서 #
확장 기능 활성화부터 완성된 페이지까지 움직이는 애니메이션을 시청하세요.
자주 묻는 질문 #
Elementor 에서 입구 애니메이션을 어떻게 추가합니까?
마스터 애드온 확장 탭에서 입구 애니메이션 확장을 활성화하고 편집기에서 아무 요소나 선택한 다음 고급 탭에서 입구 애니메이션을 엽니다. 애니메이션 드롭다운에서 효과를 선택하고 지속 시간과 지연을 설정하면 요소가 뷰로 스크롤될 때 애니메이션화됩니다.
확장 프로그램에는 어떤 애니메이션이 포함되어 있나요?
6 개 제품군에 걸쳐 40 개 이상의 효과: 페이드 인 (변형이 있는 위,아래, 왼쪽,오른쪽), 네 방향 모두에서 슬라이드,네 방향 모두에서 마스크,각 모서리를 향해 회전,줌인, 스케일 업 또는 다운 섹션,컨테이너 및 개별 위젯에서 각각 작동합니다.
입구 애니메이션은 언제 재생되나요?
요소가 뷰포트에 들어갈 때. 접기 위의 요소는 페이지 로드에서 애니메이션을 적용하고,더 아래의 모든 요소는 방문자가 해당 요소로 스크롤할 때까지 기다립니다. 지연 설정은 효과가 시작되기 전에 일시 중지를 추가하며,이는 카드 행을 비틀거리는 방식입니다.
애니메이션 속도를 제어할 수 있나요?
예. 지속 시간은 효과의 길이를 밀리초 단위로 설정하고,지연은 시작을 연기하고,이징은 가속 곡선을 형성하고,반복 횟수는 다시 재생합니다. 요소 사이의 짧은 스태거가 있는 400~800ms 의 지속 시간은 대부분의 디자인을 다룹니다.
Entrance Animation 확장 프로그램은 무료입니까?
예. Entrance Animation 은 확장 프로그램 탭의 애니메이션 위젯 그룹에서 Elementor 용 Master Addons 무료 버전과 함께 제공됩니다. The 가격 페이지 pro 플랜이 추가하는 내용을 다룹니다.
감싸는 #
입구 애니메이션 확장은 모든 Elementor 요소에 스크롤 트리거 입구를 제공합니다: 효과를 위한 하나의 드롭다운,타이밍을 위한 네 개의 필드. 지속 시간을 초 미만으로 유지하고 지연을 시차를 두고 섹션 수준에서 애니메이션을 적용하며,페이지가 장식된 대신 의도적인 느낌을 줍니다. 스크롤 대신 커서에 반응하는 모션의 경우 를 보십시오 부동 효과 확장및 의 전체 목록입니다 마스터 애드온 위젯 및 확장 나머지는 가지고 있습니다.
