--- url: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/animation-tab' title: '스크롤, 호버, 클릭 시 콘텐츠 애니메이션 | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T01:37:19+00:00' updated: '2026-10-24T06:23:23+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- 섹션, 행, 모든 콘텐츠 요소를 움직이게 만들 수 있습니다. 보기에 스크롤될 때 제목을 위로 페이드인하고, 버튼은 잠시 뒤에 따라오게 하며, 호버 시 아이콘을 두근거리게 합니다. 각 항목의 설정에 Animation 패널이 있습니다. 예시에서는 제목을 페이드인한 뒤 잠시 후 등록 버튼을 페이드인합니다. 동영상에서는 섹션이 보기에 들어올 때 버튼과 제목을 페이드인합니다. tags: - Ontwerpgidsen image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T06:23:23+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: '스크롤, 호버, 클릭 시 콘텐츠 애니메이션' description: |- 섹션, 행, 모든 콘텐츠 요소를 움직이게 만들 수 있습니다. 보기에 스크롤될 때 제목을 위로 페이드인하고, 버튼은 잠시 뒤에 따라오게 하며, 호버 시 아이콘을 두근거리게 합니다. 각 항목의 설정에 Animation 패널이 있습니다. 예시에서는 제목을 페이드인한 뒤 잠시 후 등록 버튼을 페이드인합니다. 동영상에서는 섹션이 보기에 들어올 때 버튼과 제목을 페이드인합니다. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T01:37:19+0000' dateModified: '2026-10-24T06:23:23+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/animation-tab' articleSection: Ontwerpgidsen - '@type': WebPage '@id': 'https://dxpr.com/ko/hc/documentation/learn-dxpr-builder/design/animation-tab' description: |- 섹션, 행, 모든 콘텐츠 요소를 움직이게 만들 수 있습니다. 보기에 스크롤될 때 제목을 위로 페이드인하고, 버튼은 잠시 뒤에 따라오게 하며, 호버 시 아이콘을 두근거리게 합니다. 각 항목의 설정에 Animation 패널이 있습니다. 예시에서는 제목을 페이드인한 뒤 잠시 후 등록 버튼을 페이드인합니다. 동영상에서는 섹션이 보기에 들어올 때 버튼과 제목을 페이드인합니다. breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: 홈 item: 'https://dxpr.com/ko' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: ko --- [Help Center](/ko/node/75)/[Documentation](/ko/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Elementen stylen](/hc/documentation/learn-dxpr-builder/element-settings) /[Ontwerpgidsen](/hc/documentation/learn-dxpr-builder/design/overview) # 스크롤, 호버, 클릭 시 콘텐츠 애니메이션. Learn DXPR BuilderBuild pagesElementen stylenOntwerpgidsen ## In this guide Related guides - [요소에 마우스를 올리면 반응하게 만들기](/ko/hc/documentation/learn-dxpr-builder/design/hover-effects) - [배경](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds) - [Carousel layout](/hc/documentation/learn-dxpr-builder/layout/carousel-layout) 섹션, 행, 모든 콘텐츠 요소를 움직이게 만들 수 있습니다. 보기에 스크롤될 때 제목을 위로 페이드인하고, 버튼은 잠시 뒤에 따라오게 하며, 호버 시 아이콘을 두근거리게 합니다. 각 항목의 설정에 **Animation** 패널이 있습니다. 예시에서는 제목을 페이드인한 뒤 잠시 후 등록 버튼을 페이드인합니다. 동영상에서는 섹션이 보기에 들어올 때 버튼과 제목을 페이드인합니다. ## 제목과 버튼 페이드인 1. 빈 콘텐츠 영역에서 **Add Elements**(을)를 클릭하고 **Layout** 탭에서 **Section**(을)를 고르세요. 2. 섹션을 가리키고 **More > Settings**(을)를 여세요. 3. 다음에서 **HTML classes** 아래 **Align text center**(을)를 고르고 **Save**(을)를 클릭하세요. 4. 섹션의 **+**(을)를 클릭하고 **Content** 탭에서 **Button**(을)를 고르세요. 설정이 열립니다. 5. 다음을 입력하세요: `Register now`(**Title**에), `/register`(**Link**에). 6. 다음을 여세요: **Animation** 패널. **Animation start**(을)를 **On appear**(으)로 설정하세요. 7. 다음을 설정하세요: **Animation in**(을)를 **fadeInUp**(으)로. 8. 다음에서 **Hidden** 아래 **Before in-animation**(을)를 선택하세요. 9. 다음을 설정하세요: **In-delay**(을)를 600으로. **Save**(을)를 클릭하세요. 10. 섹션의 **+**(을)를 다시 클릭하고 **Content** 탭에서 **Text**(을)를 고르세요. 버튼 위에 배치됩니다. 11. 다음 같은 제목을 입력하세요: `Open day 2026`. 에디터 툴바에서 **Heading 2**(으)로 설정하세요. 12. 다음을 여세요: **Animation** 패널. 버튼과 마찬가지로 **On appear**, **fadeInUp**, **Before in-animation**(을)를 고르세요. 13. 다음을 설정하세요: **Duration**(을)를 800으로. **Save**(을)를 클릭하세요. 14. 툴바에서 **Save**(을)를 클릭하세요. 15. 뷰 메뉴(툴바의 눈 아이콘)를 열고 **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](/ko/hc/documentation/learn-dxpr-builder/design/hover-effects): 포인터가 요소에 머무는 동안 색상, 그림자, 불투명도를 바꿉니다. - [Backgrounds](/ko/hc/documentation/learn-dxpr-builder/design/backgrounds): 애니메이션 섹션에 색상, 사진, 그라데이션을 지정합니다. - [Carousel layout](/hc/documentation/learn-dxpr-builder/layout/carousel-layout): 슬라이드가 열릴 때마다 **On trigger** 효과를 재생합니다.