Divi 및 GSAP를 사용하여 요소를 스크롤할 때마다 애니메이션을 다시 시작하는 방법

게시 됨: 2021-06-28

페이지의 요소에 애니메이션을 적용할 때 요소가 뷰포트에 들어가면 애니메이션을 활성화하고 싶을 것입니다. Divi의 내장 애니메이션 설정을 사용하면 해당 요소가 표시되고 애니메이션이 적용되는 즉시 전체 페이지를 다시 로드할 때까지 정적 상태로 유지됩니다. 경우에 따라 각 뷰포트 항목과 함께 애니메이션이 다시 시작되는 보다 일관된 접근 방식을 찾을 수 있습니다. 이렇게 하면 방문자가 웹사이트에서 경험하는 경험을 간소화하는 데 도움이 됩니다. 이 튜토리얼에서는 Divi, GSAP 및 GSAP용 ScrollTrigger를 사용하여 정확하게 수행하는 방법을 보여줍니다. 접근 방식을 알게 되면 페이지의 모든 요소에 적용할 수 있습니다. JSON 파일도 무료로 다운로드할 수 있습니다!

시작하겠습니다.

시사

튜토리얼을 시작하기 전에 다양한 화면 크기에 따른 결과를 간단히 살펴보겠습니다.

데스크탑

애니메이션 다시 시작

이동하는

애니메이션 다시 시작

무료로 레이아웃 다운로드

무료 레이아웃을 사용하려면 먼저 아래 버튼을 사용하여 다운로드해야 합니다. 다운로드에 액세스하려면 아래 양식을 사용하여 Divi Daily 이메일 목록에 가입해야 합니다. 신규 구독자는 매주 월요일에 더 많은 Divi 혜택과 무료 Divi 레이아웃 팩을 받게 됩니다! 이미 목록에 있는 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하기만 하면 됩니다. "재구독"되지 않거나 추가 이메일을 받지 않습니다.

파일 다운로드

무료로 다운로드

Divi 뉴스레터에 가입하면 최고의 Divi 랜딩 페이지 레이아웃 팩과 수많은 놀라운 무료 Divi 리소스, 팁 및 요령을 이메일로 보내드립니다. 따라하시면 금세 Divi 마스터가 되실 것입니다. 이미 구독한 경우 아래에 이메일 주소를 입력하고 다운로드를 클릭하여 레이아웃 팩에 액세스하십시오.

성공적으로 구독했습니다. 이메일 주소를 확인하여 구독을 확인하고 무료 주간 Divi 레이아웃 팩에 액세스하세요!

1. 섹션 디자인 만들기

자리 표시자 섹션 추가

디자인 만들기를 시작하기 전에 작업 중인 페이지에 두 개의 자리 표시자 섹션을 추가합니다. 이렇게 하면 디자인이 완료되면 스크롤 경험을 볼 수 있습니다. 또는 이미 설정한 페이지 내에서 디자인을 사용할 수 있습니다. 새 일반 섹션을 추가합니다.

애니메이션 다시 시작

사이징

다음과 같이 단면 높이를 수정합니다.

높이: 100vh

애니메이션 다시 시작

클론 자리 표시자 섹션

그런 다음 섹션을 한 번 복제합니다.

애니메이션 다시 시작

자리 표시자 섹션 사이에 새 섹션 추가

이 게시물의 미리보기에서 볼 수 있었던 디자인을 만들기 위해 자리 표시자 섹션 사이에 새로운 일반 섹션을 추가합니다.

애니메이션 다시 시작

행 #1 추가

열 구조

다음 열 구조를 사용하여 섹션에 새 행을 계속 추가합니다.

애니메이션 다시 시작

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 디자인 탭으로 이동하여 다음과 같이 사이징 설정을 변경합니다.

사용자 지정 거터 너비 사용: 예
거터 폭: 2
폭: 90%
최대 너비: 2080px

애니메이션 다시 시작

열에 텍스트 모듈 #1 추가

콘텐츠 추가

그런 다음 첫 번째 텍스트 모듈을 열에 추가하고 원하는 콘텐츠를 포함합니다.

애니메이션 다시 시작

텍스트 설정

모듈의 디자인 탭으로 이동하여 그에 따라 텍스트 설정을 변경합니다.

텍스트 글꼴: 몬세라트
텍스트 글꼴 두께: 무거움
텍스트 글꼴 스타일: 대문자
텍스트 색상: #f9f9f9
텍스트 크기:
- 데스크탑: 150px
- 태블릿 및 전화: 11vw
텍스트 줄 높이: 1.1em
텍스트 정렬: 가운데

애니메이션 다시 시작

열에 텍스트 모듈 #2 추가

H2 콘텐츠 추가

이전 모듈 아래에 다른 텍스트 모듈을 추가하고 일부 H2 콘텐츠를 포함합니다.

애니메이션 다시 시작

H2 텍스트 설정

다음과 같이 H2 텍스트의 스타일을 지정합니다.

제목 2 글꼴: 몬세라트
제목 2 텍스트 정렬: 가운데
제목 2 텍스트 크기:
- 데스크탑: 80px
- 태블릿 및 전화: 10vw

애니메이션 다시 시작

사이징

너비도 100%로 추가합니다.

폭: 100%

애니메이션 다시 시작

위치

그리고 고급 탭에서 전체 모듈의 위치를 변경합니다.

위치: 절대
위치: 센터

애니메이션 다시 시작

행 #2 추가

열 구조

다음 열 구조를 사용하여 이전 행 아래에 다른 행을 추가합니다.

애니메이션 다시 시작

사이징

아직 모듈을 추가하지 않고 행 설정을 열고 다음과 같이 크기 설정을 조정합니다.

사용자 지정 거터 너비 사용: 예
거터 폭: 2
폭: 90%
최대 너비: 2080px

애니메이션 다시 시작

열 1 설정

그런 다음 열 1 설정을 엽니다.

애니메이션 다시 시작

배경 이미지

원하는 배경 이미지를 업로드하세요.

배경 이미지 크기: 표지
배경 이미지 위치: 중앙

애니메이션 다시 시작

간격

다음으로 열의 간격 설정을 수정합니다.

상단 패딩: 100px
하단 패딩:
- 데스크탑: 400px
- 태블릿 및 휴대전화: 200px
왼쪽 패딩: 5.5%
오른쪽 패딩: 5.5%

애니메이션 다시 시작

열 1에 텍스트 모듈 #1 추가

H4 콘텐츠 추가

그런 다음 일부 H4 콘텐츠가 포함된 텍스트 모듈을 열 1에 추가합니다.

애니메이션 다시 시작

H4 텍스트 설정

그에 따라 H4 텍스트의 스타일을 지정합니다.

제목 4 글꼴: Lato
제목 4 글꼴 두께: Heavy
제목 4 글꼴 스타일: 대문자
제목 4 텍스트 크기: 13px
제목 4 글자 간격: 2px

애니메이션 다시 시작

열 1에 텍스트 모듈 #2 추가

H3 콘텐츠 추가

일부 H3 콘텐츠를 사용하여 이전 모듈 아래에 다른 텍스트 모듈을 추가합니다.

애니메이션 다시 시작

H3 텍스트 설정

그에 따라 H3 텍스트 설정을 변경합니다.

제목 3 글꼴: 몬세라트
제목 3 텍스트 크기: 36px
제목 3 글자 간격: 1px
제목 3 줄 높이: 1.2em

애니메이션 다시 시작

열 1에 텍스트 모듈 #3 추가

설명 콘텐츠 추가

선택한 설명 내용이 포함된 마지막 텍스트 모듈을 추가합니다.

애니메이션 다시 시작

텍스트 설정

모듈의 텍스트 설정을 다음과 같이 변경합니다.

텍스트 글꼴: Lato
텍스트 색상: #4c4c4c
텍스트 문자 간격: 0.5px
텍스트 줄 높이: 2em

애니메이션 다시 시작

열 1에 버튼 모듈 추가

사본 추가

이 칼럼에서 필요한 마지막 모듈은 버튼 모듈입니다. 원하는 사본을 추가하십시오.

애니메이션 다시 시작

버튼 설정

디자인 탭에서 버튼의 스타일을 지정합니다.

버튼에 사용자 정의 스타일 사용: 예
버튼 텍스트 크기: 14px
버튼 텍스트 색상: #ffffff
버튼 배경색: #000000
버튼 테두리 너비: 0px

애니메이션 다시 시작

버튼 글꼴: Lato
버튼 글꼴 두께: 굵게
버튼 글꼴 스타일: 대문자

애니메이션 다시 시작

열 1 재사용

열 2 및 3 삭제

열 1과 그 안의 모든 모듈을 완료하면 행의 나머지 두 열을 삭제할 수 있습니다.

애니메이션 다시 시작

열 1을 두 번 복제

열 1을 두 번 복제하여 재사용합니다.

애니메이션 다시 시작

중복 열 배경 이미지 변경

각 중복 열의 배경 이미지를 변경해야 합니다.

애니메이션 다시 시작

중복 열의 내용 변경

모듈 내용과 함께.

애니메이션 다시 시작

열 2 설정에 변환 번역 추가

그런 다음 2열 설정을 열고 디자인 탭으로 이동합니다. 그런 다음 다양한 화면 크기에 걸쳐 일부 변환 번역 값을 추가하여 디자인을 완료합니다.

애니메이션 다시 시작

왼쪽:
- 데스크탑: 50px
- 태블릿 및 전화: 0px

애니메이션 다시 시작

2. Restart Animation 기법을 디자인에 적용

행 #2에 CSS 클래스 추가

이제 디자인이 준비되었으므로 다시 시작 애니메이션 기술에 집중할 수 있습니다. 이를 위해 한 번에 여러 모듈을 대상으로 할 것입니다. 먼저 두 번째 행의 설정을 열고 다음 CSS 클래스를 적용합니다.

CSS 클래스: 트리거 애니메이션 행

애니메이션 다시 시작

행 #1에 코드 모듈 추가

이 자습서의 이전 단계에서 추가한 CSS 클래스는 이 행 내의 모든 모듈을 한 번에 대상으로 지정하는 데 도움이 됩니다. 재시작 애니메이션을 생성하기 위해 일부 JQuery 코드, GSAP JavaScript 라이브러리 및 GSAP용 ScrollTrigger 라이브러리를 사용하고 있습니다. 이 코드를 추가하기 위해 행 #1의 두 번째 텍스트 모듈 아래에 새 코드 모듈을 삽입합니다.

애니메이션 다시 시작

GSAP 및 ScrollTrigger 라이브러리 추가

새 스크립트 태그 안에 GSAP 및 ScrollTrigger 라이브러리를 추가해야 합니다.

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

애니메이션 다시 시작

새 스크립트 태그 추가

그런 다음 라이브러리 스크립트 태그 아래에 새 스크립트 태그를 추가합니다.

애니메이션 다시 시작

GSAP + ScrollTrigger 기능 추가

새 스크립트 태그 내에서 다음 JQuery 코드 줄을 복사하여 붙여넣습니다.

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

이 코드는 한 번에 모든 행 모듈을 대상으로 하며 방문자가 뷰포트에 다시 들어가자마자 애니메이션을 다시 시작합니다. 이 경우 애니메이션은 매우 간단하고 최소화됩니다. 그러나 GSAP 및 ScrollTrigger를 사용하면 원하는 모든 종류의 애니메이션을 만들 수 있으므로 살펴볼 가치가 있습니다!

애니메이션 다시 시작

시사

이제 모든 단계를 거쳤으므로 다양한 화면 크기에 따른 결과를 최종적으로 살펴보겠습니다.

데스크탑

애니메이션 다시 시작

이동하는

애니메이션 다시 시작

마지막 생각들

이 게시물에서는 요소가 뷰포트에 진입하는 즉시 애니메이션을 다시 시작하는 방법을 보여주었습니다. 이 접근 방식은 방문자가 스크롤하는 방식에 관계없이 일관된 경험을 만드는 데 도움이 됩니다. JSON 파일도 무료로 다운로드할 수 있었습니다! 질문이나 제안 사항이 있으면 아래의 댓글 섹션에 자유롭게 의견을 남겨주세요.

Divi에 대해 자세히 알아보고 더 많은 무료 Divi를 받고 싶다면 이메일 뉴스레터와 YouTube 채널을 구독하세요. 그러면 항상 이 무료 콘텐츠를 가장 먼저 알고 혜택을 받을 수 있습니다.