사용자 정의 Divi 헤더 CTA를 위한 8가지 지연된 버튼 애니메이션
게시 됨: 2020-01-23모든 CTA에 지연된 버튼 애니메이션을 추가하는 것은 방문자의 관심을 끌 수 있는 효과적인 방법이 될 수 있으며 결과적으로 클릭 가능성을 높일 수 있습니다. 이 튜토리얼에서는 Divi를 사용하여 사용자 정의 헤더 CTA에 대한 8개의 지연된 버튼 애니메이션을 만드는 방법을 보여줍니다. 이를 위해 우리는 당신이 생각하지 못했던 방식으로 애니메이션 설정을 결합할 것입니다. 또한 이러한 애니메이션은 사이트 전체의 거의 모든 CTA 버튼에 적용할 수 있습니다.
시작하자.
엿보기
다음은 Divi의 사용자 정의 헤더 CTA에 추가할 8개의 지연된 버튼 애니메이션을 살펴보겠습니다.
8개의 지연된 헤더 버튼 애니메이션 레이아웃을 무료로 다운로드하십시오
이 튜토리얼에서 8개의 지연된 버튼 애니메이션을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.
무료로 다운로드
Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.
성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!
레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.
튜토리얼로 들어가 볼까요?
시작하는 데 필요한 것
시작하려면 Divi 테마를 설치하고 활성화해야 합니다. 최신 버전의 Divi가 있는지 확인하십시오.
이 튜토리얼에서는 해당 팩의 404 페이지 템플릿에서 사용자 정의 헤더를 사용할 것이기 때문에 두 번째 테마 빌더 팩을 다운로드해야 합니다.
그 후, 당신은 갈 준비가되었습니다.
두 번째 테마 빌더 팩에서 템플릿 가져오기
WordPress 대시보드에서 Divi > Theme Builder로 이동합니다. 테마 빌더 내에서 페이지 오른쪽 상단의 이식성 아이콘을 선택합니다. 이식성 팝업에서 가져오기 탭을 선택하고 theme-builder-pack-2-404-page-template.json 파일을 선택한 후 가져오기 버튼을 클릭합니다. (이 가져오기 파일은 Second Theme Builder Pack 폴더 안에 있습니다)
전체 머리글과 바닥글을 정적 레이아웃으로 가져오는 옵션을 선택할 수도 있습니다.
템플릿을 가져온 후 아이콘을 클릭하여 사용자 정의 헤더 영역을 편집합니다.
그러면 미리 만들어진 헤더의 버튼에 지연된 애니메이션을 추가할 본문 템플릿 레이아웃 편집기로 이동합니다.
맞춤형 헤더 CTA를 위한 8가지 지연된 버튼 애니메이션
아래 8개의 지연된 버튼 애니메이션에는 기본 제공 Divi 애니메이션 옵션과 관점 CSS 속성의 고유한 조합이 포함되어 있습니다. Perspective 속성은 버튼 애니메이션에 뒤집기 또는 접기 효과가 포함된 경우 3D 효과를 추가합니다. 대부분의 이러한 애니메이션의 경우 더 복잡한 움직임을 얻기 위해 버튼과 부모 열 모두에 애니메이션을 추가합니다.
여기 있습니다…
#1 드롭다운 바운스
버튼 설정:
드롭다운 바운스 지연 버튼 애니메이션은 간단하고 효과적입니다. 빌드하려면 버튼 모듈의 설정을 열고 다음을 업데이트하십시오.
- 애니메이션 스타일: 바운스
- 애니메이션 방향: 아래로
- 애니메이션 지속 시간: 1100ms
- 애니메이션 지연: 1500ms
- 애니메이션 시작 불투명도: 100%
#2 3D 수직 뒤집기
3D 수직 뒤집기 지연 버튼 애니메이션을 빌드하려면 먼저 버튼의 상위 열(2열)에 관점 속성을 추가해야 합니다.
열 설정
열에 원근감을 추가하려면 행 설정을 연 다음 을 클릭하여 열 2 설정을 편집합니다. 고급 탭에서 다음 사용자 정의 CSS를 기본 요소에 추가합니다.
perspective: 150px
버튼 설정:
- 애니메이션 스타일: 뒤집기
- 애니메이션 방향: 중앙
- 애니메이션 지속 시간: 1500ms
- 애니메이션 지연: 1000ms
- 애니메이션 강도: 400%
- 애니메이션 시작 불투명도: 100%
#3 3D 수평 뒤집기
3D 수평 뒤집기 지연 버튼 애니메이션은 수직 뒤집기와 유사합니다. 유일한 차이점은 애니메이션 방향입니다.
열 설정:
먼저 다음 사용자 정의 CSS를 기본 요소에 추가하여 열 2에 관점을 추가했는지 확인하십시오.
perspective: 150px
버튼 설정:
버튼 모듈 설정을 열고 다음을 업데이트하십시오.
- 버튼 정렬: 중앙
이렇게 하면 수평 뒤집기가 부모 원근 속성의 가운데에 맞춰집니다.
- 애니메이션 스타일: 접기
- 애니메이션 방향: 중앙
- 애니메이션 지속 시간: 1000ms
- 애니메이션 지연: 2000ms
- 애니메이션 강도: 400%
- 애니메이션 시작 불투명도: 100%
- 애니메이션 속도 곡선: 선형
#4 드롭다운 바운스 + 3D 수직 뒤집기
이 지연된 버튼 애니메이션은 바운스 애니메이션(열에 추가됨)과 뒤집기 애니메이션(버튼에 추가됨)을 결합하여 수행됩니다.
빌드 방법은 다음과 같습니다.
열 설정:
행 설정을 열고 다음으로 열 2 설정을 업데이트합니다.
- 애니메이션 스타일: 바운스
- 애니메이션 방향: 아래로
- 애니메이션 지연: 2000ms
- 애니메이션 시작 불투명도: 100%
그런 다음 다음과 같이 기본 요소에 관점 CSS를 추가합니다.
perspective: 150px;
버튼 설정:
열 설정이 완료되면 다음과 같이 버튼 모듈 설정을 업데이트합니다.
- 애니메이션 스타일: 뒤집기
- 애니메이션 방향: 중앙
- 애니메이션 지속 시간: 1500ms
- 애니메이션 지연: 1000ms
- 애니메이션 강도: 400%
- 애니메이션 시작 불투명도: 100%
여기서 트릭은 열 애니메이션이 완료된 후 플립 시작을 지연시키는 것입니다.
#5 급강하(아래로 밀기 + 회전)
다음 애니메이션에 대한 "급강하" 애니메이션을 얻으려면 슬라이드 애니메이션(열에 추가됨)과 롤 애니메이션(버튼에 추가됨)을 결합해야 합니다.
해보자
열 설정:
행 설정을 열고 다음과 같이 열 2 설정을 업데이트합니다.
- 애니메이션 스타일: 슬라이드
- 애니메이션 방향: 아래로
- 애니메이션 지연: 1000ms
- 애니메이션 시작 불투명도: 100%
그런 다음 기본 요소에 다음 사용자 정의 CSS를 추가합니다.
perspective: 150px
버튼 설정:
그런 다음 다음과 같이 버튼 설정을 업데이트합니다.
- 애니메이션 스타일: 롤
- 애니메이션 방향: 아래로
- 애니메이션 지속 시간: 1500ms
- 애니메이션 지연: 1000ms
- 애니메이션 시작 불투명도: 100%
#6 확대(확대 + 스케일 변환)
이 지연된 버튼 애니메이션은 변형 배율을 사용하여 버튼 배율을 조정한다는 점에서 독특합니다. 그런 다음 버튼에 확대/축소 애니메이션을 추가합니다.
방법은 다음과 같습니다.
버튼 설정:
버튼 모듈 설정을 열고 다음을 업데이트하십시오.
- 변환 규모: 175%
- 애니메이션 스타일: 확대/축소
- 애니메이션 방향: 중앙
- 애니메이션 지속 시간: 1500ms
- 애니메이션 지연: 1000ms
- 애니메이션 시작 불투명도: 100%
#7 펄스(확대 + 축소)
이 지연된 펄스 애니메이션은 축소 애니메이션(열에 추가됨)과 확대 애니메이션(버튼에 추가됨)을 결합하여 생성됩니다.
해보자
열 설정:
행 설정을 열고 다음과 같이 열 2의 설정을 업데이트합니다.
- 애니메이션 스타일: 확대/축소
- 애니메이션 방향: 중앙
- 애니메이션 지속 시간: 1000ms
- 애니메이션 지연: 2000ms
- 애니메이션 강도: -100%
- 애니메이션 시작 불투명도: 100%
애니메이션 강도에 음수 값(-100%)을 추가했습니다. 이로 인해 열이 열/단추를 축소(또는 축소)하는 반대 효과가 발생합니다.
버튼 설정:
그런 다음 다음과 같이 버튼 설정을 업데이트합니다.
- 애니메이션 스타일: 확대/축소
- 애니메이션 방향: 중앙
- 애니메이션 지속 시간: 1500ms
- 애니메이션 지연: 1000ms
- 애니메이션 강도: 50%
- 애니메이션 시작 불투명도: 100%
애니메이션 지연은 열 애니메이션보다 1000ms 전에 발생하도록 설정되어 버튼이 축소되기 전에 확대됩니다.
#8 나선형(왼쪽으로 밀기 + 회전)
이 마지막 지연된 버튼 애니메이션은 슬라이드 애니메이션(열에 추가됨)과 720도 플립 애니메이션(버튼에 추가됨)을 결합합니다.
방법은 다음과 같습니다.
열 설정:
먼저 행 설정을 열고 다음과 같이 열 2의 설정을 업데이트합니다.
- 애니메이션 스타일: 슬라이드
- 애니메이션 방향: 왼쪽
- 애니메이션 시간: 2000ms
- 애니메이션 지연: 2000ms
- 애니메이션 강도: 100%
- 애니메이션 시작 불투명도: 100%
버튼 설정:
그런 다음 다음과 같이 버튼 모듈 설정을 업데이트합니다.
- 애니메이션 스타일: 뒤집기
- 애니메이션 방향: 중앙
- 애니메이션 시간: 2000ms
- 애니메이션 지연: 2000ms
- 애니메이션 강도: 800%
- 애니메이션 시작 불투명도: 100%
여기에서 애니메이션 강도가 800%로 설정되어 있습니다. 이렇게 하면 버튼이 세 번 뒤집혀 스핀 효과가 생성됩니다.
최종 결과
8개의 지연된 버튼 애니메이션을 마지막으로 살펴보겠습니다.
마지막 생각들
이 8개의 지연된 버튼 애니메이션이 맞춤 헤더 CTA의 전환을 높이는 데 도움이 되기를 바랍니다. 영감을 얻기 위해 이러한 예를 사용하고 자신의 웹사이트에 대한 추가 디자인 및 응용 프로그램을 탐색할 수도 있습니다!
마음에 드는 것이 있습니까?
댓글로 여러분의 의견을 기다리겠습니다.
건배!