입구 애니메이션
첫인상이 붙습니다. 여러분의 컨텐츠가 그냥 나타나게 하지 말고 도착하게 하세요. The 입구 애니메이션 확장은 뷰로 스크롤되는 순간 모든 Elementor 요소에 모션을 추가합니다 70+ 효과 선택하려면: 페이드,슬라이드, 바운스,플립, 줌. 속도,지연, 완화를 설정하므로 기능 아이콘 행이 차례로 팝업되는 동안 제목이 부드럽게 드리프트될 수 있습니다. CSS 가 없고 키프레임이 없으며 고급 탭에서 몇 가지 설정만 하면 됩니다.
잘 사용하고 입구 애니메이션은 페이지 아래로 눈을 당겨 첫 번째 스크롤에서 사이트가 살아있는 것처럼 느끼게합니다. 모든 것에 사용하면 노이즈로 변합니다. 아래 비디오는 기본 사항을 다루고 더 아래로 전체 효과 목록,전체 섹션에 하나의 애니메이션을 적용하는 방법 및 타이밍을 올바르게 맞추는 방법에 대해 설명합니다.
입구 애니메이션이란 무엇입니까?
입구 애니메이션은 요소가 화면에 올 때 만드는 모션입니다. 방문자가 스크롤하고,머리글이나 이미지 또는 버튼이 뷰포트에 닿고,그것이 페이드되거나,슬라이드되거나, 항상 앉아있지 않고 제자리에 바운스되는 입구 효과,스크롤 애니메이션 또는 웹 사이트 항목 애니메이션이라고 불리는 것을 볼 수 있습니다. 매번 같은 아이디어: 아래로 내려갈 때 반응하기 시작하는 정적 페이지.
이 모든 것을 CSS 애니메이션으로 직접 작성할 수 있습니다. 그러면 키프레임은 유지 관리할 수 있는 사용자의 것이며 모든 화면 크기에 대한 반응 동작도 마찬가지입니다. 마스터 애드온 애니메이션 툴킷 이를 요소 설정으로 이동하므로 드롭다운에서 효과를 선택하고 코드를 건너뜁니다.
70+ 입구 효과 라이브러리
70 개 이상의 사전 설정으로 거의 모든 섹션을 소개하는 피팅 방법이 있습니다. 조용하고 싶습니까? 페이드 인. 에너지를 원하십니까? 바운스 또는 고무 밴드. 좀 더 고의적 인 것 후에? 플립 또는 슬라이드. 그 스프레드는 섹션에 자신의 성격을 부여 할 수 있기 때문에 편리합니다: 사명 선언문에 대해 차분하고 매끄럽고 기능 행에 대해 약간 장난 스럽습니다.
- 페이드: 조용히 도착하려면 페이드 인, 페이드 인 업, 페이드 인 다운 등을 선택하세요.
- 슬라이드: 요소는 왼쪽, 오른쪽, 위쪽 또는 아래쪽에서 미끄러져 들어갑니다.
- 바운스: 주목해야 할 섹션의 바운스 및 고무 밴드.
- 회전 및 뒤집기: 약간의 깊이를 원할 때 뒤집고 회전하세요.
- 줌 및 특수 효과: 영웅이나 CTA를 위한 줌인, 라이트 스피드 및 기타 뛰어난 기능.
- 작업에 효과 일치: 행동 촉구에 시끄러운 소리, 본문 텍스트에 부드러운 페이드.
- 커밋하기 전에 미리보기: 편집기는 목록에서 애니메이션을 마우스오버하면서 애니메이션을 재생합니다.
제어 기간, 지연 및 완화
타이밍은 대부분의 애니메이션이 승리하거나 손실되는 곳이며,이는 온/오프 토글 그 이상입니다. 설정 기간 밀리초 안에 빠르고 빠르게 또는 느리고 끌어서 이동할 수 있습니다. a를 추가합니다 지연 그래서 한꺼번에 들어오는 대신 연속으로 연속적으로 항목들이 들어옵니다. pick an 완화 평평한 로봇 속도로 미끄러지는 대신 실제 물체가 원하는 방식으로 움직임의 속도가 빨라지고 느려지도록 곡선을 그리세요.
- 속도 설정: 500ms 는 활기차게 느껴지고,1500ms 는 느긋하게 느껴집니다. 그 하나의 숫자가 전체적인 분위기를 바꿉니다.
- 시퀀스를 비틀거리다: 연속으로 각 아이콘의 지연을 한 단계씩 올리면 하나씩 팝업됩니다.
- 완화 방법을 선택하세요: Ease-Out (빠른 시작,부드러운 정지) 은 대부분의 입구에 자연스럽게 읽혀집니다. 내가 먼저 도달하는 것입니다.
모든 요소에 대한 기본 입구 애니메이션을 설정하는 방법은 무엇입니까?
사람들은 이렇게 많이 묻습니다: Elementor 에서 한 번에 모든 것에 하나의 입구 애니메이션을 적용 할 수 있습니까? 똑바로 대답하면 Elementor 코어에는 사이트의 모든 요소에 애니메이션을 적용하는 단일 글로벌 스위치가 없습니다. 실제로 작동하는 것은 컨테이너 또는 섹션 수준에서 애니메이션을 적용 한 다음 해당 설정을 재사용하는 것입니다.
- 을 선택합니다 단면도 또는 콘테이너 그 안에 있는 각각의 위젯 대신. 열기 고급 → 마스터 애드온 입구 애니메이션 그리고 효과를 선택하세요. 그러면 전체 블록이 스크롤되면서 함께 도착합니다.
- 동일한 모션을 재사용하려면 요소를 마우스 오른쪽 버튼으로 클릭하고 누르세요 복사, 그럼 붙여넣기 스타일 다음 섹션으로. 애니메이션 설정은 스타일과 함께 타고,그래서 당신은 한 번 설정하고 페이지 아래로 붙여 넣기.
- 모든 것이 함께 발사되는 것이 아니라 캐스케이드의 경우 효과를 동일하게 유지하고 올립니다 지연 내려갈 때 각 섹션에 조금씩.
즉,Elementor 가 제공하는 기본값에 가까운 코드를 건드리지 않고 모든 요소에 걸쳐 일관된 입구 애니메이션을 얻을 수 있습니다. 전체 입구 애니메이션 문서 모든 설정을 다룹니다.
입구 애니메이션이 가장 도움이 되는 곳은 어디입니까?
- 영웅 섹션: 헤드라인의 페이드 인 업, 그 아래 버튼의 짧은 지연.
- 기능 행: 아이콘을 비틀거리며 하나씩 착지합니다.
- 통계 및 카운터: 숫자가 보기로 스크롤되면서 확대됩니다.
- 추천서 및 로고: 갑자기 스냅되지 않도록 부드러운 페이드.
- 행동 촉구: 누군가가 결정하는 시점의 바운스 또는 고무 밴드.
확장은 더 넓어집니다 마스터 애드온 위젯 및 확장. 그만큼 가격 페이지 어떤 계획에 도달하는지 보여줍니다.
입구 애니메이션에 대해 자주 묻는 질문
많은 입구 애니메이션이 내 웹 사이트를 느리게합니까?
수십 개의 애니메이션 요소가있는 페이지에서 약간의 무게를 추가 할 수 있지만 효과는 처음부터 가볍습니다. 실제 수정 사항은 구속입니다: 모든 단락이 아닌 주요 섹션과 헤드 라인을 애니메이션하십시오. 잘 배치 된 몇 가지 항목은 거의 등록하지 않습니다. 로드 시간이 마음에 있다면,이것들 elementor 사이트의 속도를 높이는 팁 도움말.
Elementor 입장 애니메이션이 작동하지 않는 이유는 무엇입니까?
보통 세 가지 중 하나입니다. 애니메이션은 요소가 뷰포트에 처음 들어갈 때만 실행되므로 다시 스크롤하지 않고 새로 스크롤하여 테스트합니다. 효과가 실제 요소에 있는지 확인하고 주변에 빈 래퍼가 없는지 확인하십시오. 그리고 게시한 후 캐싱 플러그인을 지우십시오. 캐시된 페이지는 애니메이션 없이 이전 버전을 제공하므로.
데스크톱과 모바일에서 다른 애니메이션을 사용할 수 있습니까?
아니요. Elementor 에서 데스크톱,태블릿, 모바일에 대해 애니메이션을 독립적으로 설정할 수는 없습니다. 선택한 효과가 모든 중단점에 적용되므로 작은 화면에서 여전히 제대로 보이는 효과를 선택하십시오.
Easing 설정은 무엇이며 어떤 설정을 사용해야 합니까?
이징은 동작의 속도를 제어합니다. 선형은 하나의 일정한 속도를 유지하며 로봇처럼 느껴질 수 있습니다. Ease-Out 은 부드러운 정지로 굴러가는 것처럼 빠르게 시작하고 느리게 끝나며 자연스럽게 느껴집니다. Ease-In 은 그 반대입니다. 대부분의 입구 애니메이션의 경우 Ease-Out 으로 이동합니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
