스크롤, 호버, 클릭 시 콘텐츠 애니메이션.
섹션, 행, 모든 콘텐츠 요소를 움직이게 만들 수 있습니다. 보기에 스크롤될 때 제목을 위로 페이드인하고, 버튼은 잠시 뒤에 따라오게 하며, 호버 시 아이콘을 두근거리게 합니다. 각 항목의 설정에 Animation 패널이 있습니다. 예시에서는 제목을 페이드인한 뒤 잠시 후 등록 버튼을 페이드인합니다.
동영상에서는 섹션이 보기에 들어올 때 버튼과 제목을 페이드인합니다.
제목과 버튼 페이드인
- 빈 콘텐츠 영역에서 Add Elements(을)를 클릭하고 Layout 탭에서 Section(을)를 고르세요.
- 섹션을 가리키고 More > Settings(을)를 여세요.
- 다음에서 HTML classes 아래 Align text center(을)를 고르고 Save(을)를 클릭하세요.
- 섹션의 +(을)를 클릭하고 Content 탭에서 Button(을)를 고르세요. 설정이 열립니다.
- 다음을 입력하세요:
Register now(Title에),/register(Link에). - 다음을 여세요: Animation 패널. Animation start(을)를 On appear(으)로 설정하세요.
- 다음을 설정하세요: Animation in(을)를 fadeInUp(으)로.
- 다음에서 Hidden 아래 Before in-animation(을)를 선택하세요.
- 다음을 설정하세요: In-delay(을)를 600으로. Save(을)를 클릭하세요.
- 섹션의 +(을)를 다시 클릭하고 Content 탭에서 Text(을)를 고르세요. 버튼 위에 배치됩니다.
- 다음 같은 제목을 입력하세요:
Open day 2026. 에디터 툴바에서 Heading 2(으)로 설정하세요. - 다음을 여세요: Animation 패널. 버튼과 마찬가지로 On appear, fadeInUp, Before in-animation(을)를 고르세요.
- 다음을 설정하세요: Duration(을)를 800으로. Save(을)를 클릭하세요.
- 툴바에서 Save(을)를 클릭하세요.
- 뷰 메뉴(툴바의 눈 아이콘)를 열고 Preview(을)를 고르세요.
시험해 볼 추가 효과
- 스크롤 리빌: On appear, fadeInUp, Before in-animation, Duration 800.
- 엇박자 카드: 세 카드에 같은 효과. In-delay는 0, 200, 400.
- 주목 펄스: On appear, pulse, Infinite 켜기, Duration 1500.
- 호버 펄스: On hover, pulse, Parent number 0. 요소 자체만 반응합니다.
- 탭 리빌: On trigger와 fadeIn(탭 안 요소에). 탭이 열릴 때마다 재생됩니다.
표시되는 내용
텍스트를 저장하면 에디터가 두 효과를 재생합니다. 제목이 800밀리초에 걸쳐 위로 페이드인하고 버튼이 600밀리초 뒤에 따라옵니다. 방문자에게도 섹션이 보기에 스크롤될 때 동일하게 표시됩니다. 페이지 로드당 한 번씩입니다. Before in-animation 항목이 선택되어 있으므로 둘 다 효과가 시작되기 전까지 보이지 않습니다.
설정
| 설정 | 기능 | 기본값 |
|---|---|---|
| Animation start | 효과 재생 시점: On appear(보기에 스크롤됨), On hover, On click, On trigger(요소를 담은 캐러셀 슬라이드, 탭, 토글이 열릴 때) | No animation |
| Animation in | 등장 효과: 페이드, 슬라이드, 줌, 플립과 바운스, 펄스, 셰이크 같은 주목 효과 | No animation |
| Animation out | 같은 목록의 퇴장 효과. On hover와 On trigger에만 표시됩니다. | No animation |
| Hidden | Before in-animation(은)는 효과가 재생되기 전까지 요소를 보이지 않게 유지합니다. After in-animation(은)는 효과가 끝나면 숨깁니다. | 둘 다 아님 |
| Infinite | 효과를 끝없이 반복 | 꺼짐 |
| Appear boundary | 다음용: On appear. 화면 높이의 백분율로, 화면 아래 얼마에서 효과가 시작되는지. 0은 요소가 보기에 스크롤될 때 시작하며, 100은 화면 높이 하나만큼 먼저 시작합니다. | 100 |
| Duration | 효과 길이. 0~3000밀리초 | 1000 |
| In-delay | 등장 재생 전 대기. 최대 10000밀리초 | 0 |
| Out-delay | 퇴장 재생 전 대기. 최대 10000밀리초 | 0 |
| Parent number | 다음용: On hover와 On click. 방문자가 가리키거나 클릭하는 요소. 0은 요소 자체, 1은 부모, 2는 부모의 부모. | 1 |
열에는 Animation 패널이 없습니다. 레이아웃 요소 안의단일 탭, 토글, 슬라이드에도 없습니다. 대신 안의 요소에 애니메이션을 적용하세요.
애니메이션이 표시되지 않는 경우
- 요소가 나타나지 않습니다. Before in-animation(은)는 효과가 재생되기 전까지 숨기지만 Animation in(은)는 No animation입니다. Animation in에서 효과를 고르세요.
- 효과가 한 번 재생되고 멈췄습니다. On appear(은)는 페이지 로드당 한 번 재생됩니다. 다시 보려면 페이지를 새로고침하거나 반복되는 효과는 Infinite(을)를 켜세요.
- 방문자가 요소에 닿기 전에 효과가 시작됩니다. Appear boundary가 높습니다. 100에서는 요소가 보기에 스크롤되기 화면 높이 하나 전에 효과가 시작됩니다. Animation 패널에서 0으로 설정하세요.
- 요소 근처에 호버하면 효과가 시작됩니다. Parent number가 1이므로 부모가 포인터를 감지합니다. Parent number(을)를 0으로 설정하세요.
다음 단계
- Hover effects: 포인터가 요소에 머무는 동안 색상, 그림자, 불투명도를 바꿉니다.
- Backgrounds: 애니메이션 섹션에 색상, 사진, 그라데이션을 지정합니다.
- Carousel layout: 슬라이드가 열릴 때마다 On trigger 효과를 재생합니다.