독특한 디자인을 위해 Divi에서 애니메이션과 시차를 결합하는 방법

식사를 준비하든 웹사이트를 디자인하든 재료만으로는 맛있는 요리나 아름다운 사이트를 보장할 수 없습니다. 이러한 요소들을 얼마나 잘 결합하느냐가 모든 차이를 만듭니다. 이 튜토리얼에서는 이전에 생각해 본 적이 없는 방식으로 애니메이션과 이미지 시차를 결합하는 방법을 보여 드리겠습니다. 아직 모르는 경우 애니메이션은 페이지 로드 시 모든 Divi 요소에 추가할 수 있는 내장 Divi 기능입니다. Parallax는 스크롤할 때 배경 이미지에 고유한 움직임을 추가할 수 있는 Divi 옵션이기도 합니다.

오늘 우리는 Divi의 내장 디자인 설정을 사용하여 모든 종류의 창의적인 방법으로 애니메이션과 시차를 결합할 것입니다. 이 조합은 페이지를 아래로 스크롤할 때 멋지게 보이는 애니메이션 시차 이미지의 아름다운 레이아웃을 만들기 위해 아주 마술처럼 함께 작동합니다.

시작하자!

엿보기

무료로 레이아웃 다운로드

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 json 파일을 Divi Builder로 드래그하기만 하면 됩니다.

튜토리얼로 들어가 볼까요?

시작하는 데 필요한 것

시작하려면 다음이 필요합니다.

1. Divi 테마가 설치되고 활성화되었습니다.
2. 프론트 엔드에서 처음부터 빌드하기 위해 생성된 새 페이지(비주얼 빌더)
3. 모의 콘텐츠에 사용할 이미지입니다. 이 튜토리얼에 사용된 이미지는 Life Coach Divi 레이아웃 팩에서 찾을 수 있습니다.

그런 다음 Divi에서 디자인을 시작할 수 있는 빈 캔버스가 생깁니다.

기본 아이디어

이 디자인 컨셉의 기본 아이디어는 배경 이미지에 CSS 시차를 사용하는 것입니다. CSS 시차가 작동하는 방식 때문에 시차 이미지는 고정된 상태로 유지되고 이를 사용하는 요소의 크기에 관계없이 브라우저 창을 자동으로 채웁니다. 이미지의 고정된 특성으로 인해 Divi의 여러 요소에 동일한 시차 이미지를 사용한 다음 애니메이션을 사용하여 해당 요소를 이동할 수 있습니다. 애니메이션이 안정화되면 사용된 시차 배경 이미지가 일치하고 페이지를 아래로 스크롤할 때 예상대로 작동합니다.

1부: Divi 애니메이션 및 시차 디자인 만들기(버전 1)

2열(1/2 1/2) 행으로 새 섹션을 만듭니다.

모듈을 추가하기 전에 섹션과 행을 약간 조정해 보겠습니다.

섹션 및 행 설정 업데이트

먼저 섹션 설정을 열고 다음과 같이 기본 패딩을 제거합니다.

패딩: 0px 상단, 0px 하단

그런 다음 행 설정을 열고 행에 시차 배경 이미지를 제공합니다.

배경 이미지: [이미지 업로드]
시차 효과 사용: 예
시차 방법: CSS

여기에서 시차 방법은 디자인이 작동하도록 CSS로 설정되어야 합니다.

폭: 100%
최대 너비: 100%
패딩: 상단 10vw, 왼쪽 10vw, 오른쪽 10vw

일치하는 시차 배경이 있는 텍스트 모듈 추가

이제 디자인에 텍스트 모듈을 추가할 준비가 되었습니다. 첫 번째 텍스트 모듈은 이 디자인의 핵심입니다. 정확히 동일한 배경 이미지와 CSS 시차를 텍스트 모듈에 적용함으로써 완전히 독특한 효과를 위한 애니메이션으로 창의력을 발휘할 수 있습니다.

계속해서 열 1에 새 텍스트 모듈을 추가하십시오.

그런 다음 다음과 같이 텍스트 모듈 설정을 업데이트합니다.

본문 내용:

<p>Hi!<br>I'm Jane...</p>

<a href="#">about me</a>

그런 다음 행에 추가한 것과 동일한 CSS 시차 배경 이미지를 텍스트 모듈에 제공합니다.

배경 이미지: [이미지 업로드]
시차 효과 사용: 예
시차 방법: CSS

텍스트 글꼴: Fira Sans
텍스트 글꼴 두께: 가벼움
텍스트 텍스트 색상: #ffffff
텍스트 텍스트 크기: 70px
텍스트 줄 높이: 1em

링크 글꼴 스타일: 밑줄(U)
링크 텍스트 색상: #ffffff(기본값), #881e67(마우스 오버)
링크 텍스트 크기: 30px
링크 문자 간격: 2px

패딩: 상단 20%, 하단 20%, 왼쪽 10%, 오른쪽 10%

테두리 너비: 20px
테두리 색상: #ffffff

그런 다음 텍스트 모듈에 다음 애니메이션을 추가합니다.

애니메이션 스타일: 슬라이드
애니메이션 방향: 오른쪽
애니메이션 지속 시간: 1500ms
애니메이션 강도: 80%
애니메이션 시작 불투명도: 20%

지금까지의 효과를 확인해보자…

애니메이션 텍스트 모듈의 배경 이미지가 행 배경의 일치하는 위치에 어떻게 놓이는지 주목하십시오. 이는 둘 다 CSS 시차 효과로 동일한 배경 이미지를 공유하기 때문입니다.

True Parallax 배경 이미지로 두 번째 텍스트 모듈 추가하기

이 시점에서 다음 텍스트 모듈을 추가할 준비가 되었습니다. 이 다음 이미지는 진정한 시차 효과를 사용하여 다른 배경 이미지를 갖게 됩니다. 우리는 또한 그것에 약간의 애니메이션을 줄 것입니다.

열 2에 새 텍스트 모듈을 추가합니다.

그런 다음 "내 블로그"라는 단어로 본문 내용을 업데이트합니다.

그런 다음 실제 시차 방법으로 배경 이미지를 추가합니다.

배경 이미지: [이미지 업로드]
시차 효과 사용: 예
시차 방법: 진정한 시차

텍스트 글꼴: Fira Mono
텍스트 글꼴 스타일: TT
텍스트 텍스트 정렬: 가운데
텍스트 텍스트 색상: #ffffff
텍스트 문자 간격: 10px
너비: 320px
최대 너비: 320px
모듈 정렬: 중앙

여백: (데스크톱): -5vw 상단, 4vw 하단
마진(태블릿 및 휴대폰): 3vw 상단
패딩: 상단 70px, 하단 70px

테두리 너비: 20px
테두리 색상: #ffffff

애니메이션 스타일: 슬라이드
애니메이션 방향: 아래로
애니메이션 지연: 200ms

새 시차 배경 이미지로 세 번째 텍스트 모듈 만들기

세 번째 텍스트 모듈을 만들려면 2열에서 방금 만든 텍스트 모듈을 복제합니다.

그런 다음 배경 이미지를 동일하게 유지하지만 CSS 시차 방법으로 시차 효과를 업데이트할 것입니다.

너비: 240px
최대 너비: 240px
모듈 정렬: 왼쪽
여백: 0px 하단
패딩: 상단 170px, 하단 170px, 왼쪽 95px, 오른쪽 95px

사용자 정의 너비와 오른쪽 및 왼쪽 패딩은 더 긴 모듈 디자인과 잘 어울리는 세로 텍스트 디스플레이를 만드는 데 사용됩니다.

그런 다음 애니메이션 방향을 아래쪽이 아닌 위쪽으로 업데이트합니다.

애니메이션 방향: UP

최종 결과

이제 최종 결과를 확인해보자.

2부: 애니메이션 및 시차 디자인 만들기(버전 2)

이 다음 디자인은 모듈의 초기 애니메이션 이후 행에 대한 시차 배경 이미지를 로드하여 고유한 애니메이션을 추가할 것입니다. 이렇게 하려면 콘텐츠 뒤로 이동할 CSS 시차 배경 이미지에 대해 별도의 행을 엄격하게 사용해야 합니다. 그리고 처음에는 섹션 배경이 노출되기 때문에 행 애니메이션 전에 콘텐츠에 대한 사용자 정의 배경색을 추가할 수 있습니다.

방법은 다음과 같습니다.

먼저 와이어프레임 보기 모드를 배포합니다. 그런 다음 텍스트 모듈이 포함된 행을 복제합니다. 이제 두 개의 동일한 행이 생깁니다. 다음으로, 맨 위 행 안의 텍스트 모듈을 삭제하십시오. 우리가 정말로 하고 싶었던 것은 맨 윗줄의 디자인을 시작하는 것뿐이었습니다.

그런 다음 다음과 같이 맨 위 행에 대한 설정을 업데이트합니다.

높이: 900px(데스크톱), 2000px(태블릿 및 휴대폰)
패딩: 0px 상단, 0px 하단

애니메이션 스타일: 슬라이드
애니메이션 방향: 오른쪽
애니메이션 지속 시간: 1250ms
애니메이션 지연: 1800ms

빈 행에는 기본적으로 높이가 없기 때문에 행에 설정된 높이를 제공합니다. 따라서 행의 높이가 두 번째 행의 내용을 내용으로 덮기에 충분한지 확인해야 합니다. 또한 텍스트 모듈이 나타난 후 콘텐츠 뒤로 미끄러지도록 지연 애니메이션을 행에 부여했습니다.

두 행 겹침

이제 우리가 해야 할 일은 음수 여백을 사용하여 맨 아래 행을 위로 가져와 배경 애니메이션과 맨 위 행과 겹치도록 하는 것입니다.

맨 아래 행에 대한 설정을 열고 다음과 같이 여백을 업데이트합니다.

여백: -900px 상단(데스크톱), -2000px(태블릿 및 휴대폰)

그런 다음 맨 위 행 배경 이미지를 대신 사용할 것이기 때문에 행에 대한 CSS 시차 방법으로 배경 이미지를 가져옵니다.

여기까지 디자인입니다. 첫 번째 행의 지연된 배경 애니메이션과 열 1의 텍스트 모듈에 대한 시차 배경이 어떻게 완벽하게 일치하는지 확인하십시오.

섹션 배경색 추가

행 애니메이션 전에 텍스트 모듈에 초기 배경색을 지정하려면 섹션에 배경색을 지정할 수 있습니다.

섹션 설정을 열고 다음을 추가합니다.

배경 그라데이션 왼쪽 색상: rgba(136,30,103,0.61)
배경 그라데이션 오른쪽 색상: #881e67
그라디언트 유형: 방사형

최종 결과

이제 최종 결과를 확인해보자.

블렌드 모드 및 애니메이션 콤보 옵션

또한 두 번째 행에 블렌드 모드를 추가하고 모듈 애니메이션과 함께 작동하는 확대/축소 애니메이션을 추가하여 더욱 창의적으로 만들 수 있습니다.

혼합 모드: 광도
애니메이션 스타일: 확대/축소

다음은 최종 결과입니다.

그리고 모바일에서는 이렇게 보입니다.

마지막 생각들

애니메이션과 시차 이미지를 결합하는 몇 가지 독특한 방법을 탐색하면서 몇 가지를 배웠기를 바랍니다. 결과는 확실히 독특하며 이 설정을 쉽게 조정하여 다음 프로젝트에서 멋지게 보일 수많은 다른 조합을 만들 수 있다고 확신합니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!