Divi의 애니메이션을 사용하여 이미지를 띄우고 바운스하기

Divi의 새로운 애니메이션 옵션을 사용하여 멋진 페이지 섹션을 디자인하는 방법을 알려주는 이 6부 시리즈의 6부에 오신 것을 환영합니다. 웹사이트에 애니메이션을 추가하는 기술을 보여주기 위해 라이브 데모 페이지의 다양한 섹션을 구축하는 방법을 안내해 드리겠습니다. 애니메이션 기능은 정말 재미있고 사용하기 쉽습니다. Visual Builder를 사용하면 모든 단계에서 창작물이 살아 움직이는 것을 볼 수 있습니다. 저와 함께 Divi 애니메이션의 힘을 살펴보세요.

지난 포스트에서 우리는 애니메이션 데모 페이지의 섹션 7을 만들었습니다. 여기서 롤 애니메이션 스타일을 사용하여 이미지에 애니메이션을 적용하여 콘텐츠에 실제와 같은 움직임을 추가하는 방법을 보여드렸습니다.

오늘은 애니메이션 데모 페이지의 섹션 8과 9를 다룰 것입니다. 섹션 8은 슬라이드 애니메이션과 흐림 효과를 조합하여 추천 항목을 돋보이게 하는 방법에 대한 좋은 예입니다. 섹션 9는 팀 사진을 보여주는 팀 섹션에 애니메이션을 추가하는 간단하고 우아한 방법입니다.

시작하자.

다음은 오늘의 게시물에서 구축할 내용을 살짝 엿본 것입니다.

디자인 요소 준비

이 튜토리얼에는 4개의 이미지가 필요합니다. 사용자 정의 배경 이미지와 3개의 레시피 카드 이미지가 필요합니다. 배경 이미지는 1280×936이고 깊이를 위한 그림자가 추가된 6개의 반투명 흰색 직사각형이 있는 노란색 배경이 있습니다. 시차가 있는 섹션에서 배경을 사용하면 배경에 레시피 카드가 떠 있는 듯한 인상을 줍니다. 레시피 카드 이미지는 각각 375×667입니다. 다음은 이 튜토리얼에서 사용된 이미지입니다.

배경 이미지

레시피 카드 이미지 #1

레시피 카드 이미지 #2

레시피 카드 이미지 #3

Divi의 애니메이션을 사용하여 이미지를 띄우고 바운스하기

YouTube 채널 구독

건물 섹션 8

빌드 프로세스를 시작하기 전에 시각적 빌더를 사용하여 생성할 섹션 레이아웃의 와이어프레임 보기를 살펴보겠습니다.

Visual Builder를 사용하여 레이아웃에 다른 일반 섹션을 추가하여 시작하겠습니다. 그런 다음 섹션에 3열(1/3 1/3) 행을 추가합니다.

행 설정 업데이트

첫 번째 모듈을 추가하기 전에 행 설정으로 이동하여 다음을 업데이트합니다.

디자인 탭에서…

사용자 정의 너비 사용: 예
사용자 정의 너비: 1366px
사용자 지정 거터 너비 사용: 예
거터 폭: 1

열 1 맞춤 패딩: 6% 오른쪽
열 3 맞춤 패딩: 8% 왼쪽

섹션에 배경 추가

다음으로 메인 배경 이미지를 섹션에 넣습니다. 섹션 설정으로 이동하여 다음을 업데이트하십시오.

콘텐츠 탭에서…

배경 이미지: [1280×936 이미지 삽입]
시차 방법 사용: 예
시차 방법: 진정한 시차

이미지 추가 #1

이제 행에 모듈을 추가하도록 읽습니다. 첫 번째(왼쪽) 열에 이미지 모듈을 추가합니다.

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

콘텐츠 탭에서…

이미지 URL: [레시피 카드 이미지 #1 입력]

디자인 탭에서…

강제 전폭: 예

애니메이션 스타일: 슬라이드
애니메이션 방향: 위로
애니메이션 강도: 20%

고급 탭에서…

여기에 카드 이미지에 둥근 모서리, 상자 그림자 및 흐림 필터를 제공하기 위해 몇 가지 사용자 정의 CSS를 추가할 것입니다. 기본 요소 상자에 다음 CSS를 입력합니다.

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(2px) opacity(.75);

설정 저장

중간 열에 두 개의 텍스트 모듈 추가

다음으로 두 번째(또는 중간) 열에 텍스트 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

콘텐츠 상자의 텍스트 탭에 다음 h1 헤더를 입력합니다.

<h1>The Best Recipes for Success</h1>

디자인 탭에서…

헤더 글꼴: Playfair 디스플레이, 굵게(B)
헤더 글꼴 크기: 60px
헤더 라인 높이: 1.3em

맞춤 여백: 20px 하단

애니메이션 스타일: 접기
애니메이션 방향: 위로

설정 저장

방금 만든 모듈 아래에 다른 텍스트 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

내용: Lorem ipsum dolor sit met, consectetur adipiscing elit. Phasellus bibendum est vitae felis rhoncus gravida. Sed nec purus tempus, sagittis mi id, efficitur.

디자인 탭에서…

텍스트 글꼴 크기: 18px
텍스트 텍스트 색상: rgba(0,0,0,0.56)
텍스트 줄 높이: 1.9em
맞춤 여백: 40px

애니메이션 스타일: 접기
애니메이션 방향: 아래로
애니메이션 지연: 150ms

설정 저장

이미지 추가 #2

방금 만든 두 개의 텍스트 모듈 아래에 이미지 모듈을 추가합니다.

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

콘텐츠 탭에서…

이미지 URL: [카드 이미지 #2 입력]

디자인 탭에서…

강제 전폭: 예

애니메이션 스타일: 슬라이드
애니메이션 방향: 위로
애니메이션 강도: 10%

고급 탭에서…

여기에서 카드 이미지에 둥근 모서리와 상자 그림자를 주기 위해 사용자 정의 CSS(흐림 효과가 없는 것을 제외하고 첫 번째 카드 이미지와 유사)를 추가할 것입니다. 기본 요소 상자에 다음 CSS를 입력합니다.

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);

설정 저장

이미지 추가 #3

이미지 모듈을 삽입하여 세 번째(또는 오른쪽) 열에 세 번째이자 마지막 카드 이미지를 추가해 보겠습니다.

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

콘텐츠 탭에서…

이미지 URL: [카드 이미지 #3 입력]

디자인 탭에서…

강제 전폭: 예

사용자 정의 마진: 20% 상단

애니메이션 스타일: 슬라이드
애니메이션 방향: 위로
애니메이션 강도: 30%

설정 저장

고급 탭에서…

기본 요소 상자에 다음 사용자 지정 CSS를 추가합니다.

border-radius: 10px;
overflow: hidden;
box-shadow: 0 40px 40px 0 rgba(232,170,0,0.7);
filter: blur(8px) opacity(.4);

설정 저장

엄청난! 이것으로 데모 페이지의 섹션 8을 마칩니다. 최종 결과를 확인하세요.

애니메이션은 놀라울 정도로 사실적이며 스크롤할 때 모듈이 맨 위에 있는 것과는 다른 속도로 배경을 아래로 이동하는 시차 기능을 잘 활용합니다. 카드가 배경이 아래로 내려가면서 위쪽으로 애니메이션된다는 사실은 카드가 떠 있는 듯한 인상을 줍니다. 나는 이 섹션에서 내용이 정말 튀어 나온다고 말해야 합니다.

데모의 건물 섹션 9

마지막 섹션에서는 문자 그대로 "팝"하는 작은 애니메이션으로 간단한 "우리 팀" 섹션을 만들 것입니다. 다음은 빌드할 내용입니다.

다음은 와이어프레임 보기에서 레이아웃을 살짝 보여줍니다.

섹션 헤더 추가

먼저 1열 행이 있는 일반 섹션을 추가합니다. 그런 다음 열에 텍스트 모듈을 추가합니다.

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

콘텐츠 탭에서…

내용: 우리 팀

디자인 탭에서…

텍스트 글꼴: Raleway, 굵게(B), 대문자(TT)
텍스트 글꼴 크기: 15px
텍스트 텍스트 색상: rgba(0,0,0,0.32)
텍스트 문자 간격: 5px
텍스트 줄 높이: 1.9em

맞춤 여백: 20px

애니메이션 스타일: 슬라이드
애니메이션 방향: 위로
애니메이션 시간: 500ms
애니메이션 지연: 1000ms

고급 탭에서…

설정 저장

방금 만든 모듈 아래에 다른 텍스트 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

콘텐츠 상자의 텍스트 탭에 다음 h1 태그를 입력합니다.

<h1>Highly Skilled Ninjas</h1>

디자인 탭에서…

헤더 글꼴: Raleway Light
머리글 텍스트 정렬: 가운데
헤더 글꼴 크기: 48px
헤더 텍스트 색상: #3a3830
헤더 라인 높이: 1.3em

맞춤 여백: 20px 하단

애니메이션 스타일: 슬라이드
애니메이션 방향: 오른쪽
애니메이션 강도: 12%

설정 저장

이제 작은 녹색 구분선을 추가하려면 텍스트 모듈 아래에 구분선 모듈을 추가합니다.

그런 다음 다음과 같이 구분선 설정을 업데이트합니다.

콘텐츠 탭에서…

디바이더 표시: 예

디자인 탭에서…

색상: #7cda24

디바이더 무게: 3px
높이: 3px
너비: 60px(입력)
모듈 정렬: 중앙

애니메이션 스타일: 슬라이드
애니메이션 방향: 아래로
애니메이션 시간: 500ms
애니메이션 지연: 1000ms
애니메이션 강도: 200%

설정 저장

4개의 팀 이미지 추가

팀원 이미지를 추가하려면 방금 만든 헤더가 포함된 행 아래에 4열 행을 추가합니다.

첫 번째 열에 사람 모듈을 추가하고 다음과 같이 설정을 업데이트합니다.

콘텐츠 탭에서…

이름: 닉
이미지 URL: [150×150 사진 입력]

디자인 탭에서…

헤더 글꼴: Raleway Light, 굵게(B), 대문자(TT)
헤더 글꼴 크기: 13px
헤더 텍스트 색상: rgba(0,0,0,0.71)
헤더 문자 간격: 3px

고급 탭에서…

Member Image 상자에 다음 CSS를 추가합니다.

border-radius: 100%;
overflow: hidden;
width: 180px;
margin: auto auto 20px auto;

이것은 우리 이미지에 멋진 원 테두리를 줄 것입니다.

Member Description에 다음 사용자 정의 CSS를 추가하십시오.

text-align: center;
display: block;

이것은 이름의 중앙에 위치합니다.

설정 저장

이제 방금 생성한 Person 모듈을 복제하여 다음 세 개의 열을 채우기 위해 다음 세 개를 추가할 수 있습니다. 복제한 각 모듈의 이미지와 이름을 업데이트하기만 하면 됩니다.

4개의 개인 모듈을 모두 추가했으면 이 섹션의 마지막 단계인 행의 스타일을 지정하고 애니메이션을 적용할 준비가 된 것입니다. 그렇게 하려면 다음과 같이 행 설정을 업데이트하십시오.

디자인 탭에서…

사용자 지정 거터 너비 사용: 예
거터 폭: 2

맞춤 패딩: 60px 상단

애니메이션 스타일: 바운스
애니메이션 시간: 700ms
애니메이션 지연: 1000ms

이것으로 애니메이션 데모 페이지의 섹션 9를 마칩니다. 또한 Divi에서 애니메이션을 사용하는 방법에 대한 6부작 시리즈를 마무리합니다.

시리즈 마무리

애니메이션 데모 페이지를 즐겁게 만드셨기를 바랍니다. 디자인만으로도 큰 영감을 줍니다. 그리고 전체에 걸쳐 애니메이션을 사용하는 것은 의심할 여지 없이 향후 페이지 빌드를 위한 참조 가이드 역할을 할 것입니다. 이 레이아웃을 만들어준 Kenny Sing 이사에게 특별한 감사를 드립니다. 우리는 그것이 매우 자랑스럽습니다. 다음 프로젝트를 시작하는 데 도움이 되도록 이 레이아웃을 무료로 제공하고 싶습니다.

보너스: 쉽게 가져올 수 있도록 이 섹션을 다운로드하십시오.

보너스 특전으로 오늘의 튜토리얼에 포함된 섹션을 아래의 이메일 수신 동의 양식을 사용하여 얻을 수 있는 무료 다운로드로 패키징했습니다. 이메일을 입력하면 다운로드 버튼이 나타납니다. 이미 Divi 뉴스레터의 일부인 경우 "재구독"에 대해 걱정하지 마십시오. 이메일을 다시 입력해도 더 이상 이메일이 전송되거나 중복되지 않습니다. 그것은 단순히 다운로드를 표시합니다.

즐기다!

레이아웃 팩 다운로드

무료로 다운로드

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

다운로드

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

이 다운로드를 사용하려면 먼저 다운로드 폴더에서 All_Animation_Effects_1.zip 이라는 압축 파일을 찾습니다 . 압축을 풀면 이 게시물의 마지막 두 개를 포함하여 이 시리즈의 모든 가져오기가 표시됩니다.

WordPress 관리자에서 Divi > Divi 라이브러리 > 가져오기 및 내보내기로 이동합니다. 이식성 모달이 나타나면 가져오기 탭과 파일 선택 버튼을 클릭합니다.

원하는 json 파일을 선택하고 "Divi Builder 레이아웃 가져오기"를 클릭합니다. 가져오기가 완료되면 위 섹션 중 하나를 추가하려는 게시물이나 페이지로 이동합니다.

비주얼 빌더를 활성화하십시오. 위 섹션 중 하나를 추가하려는 페이지 부분으로 이동합니다. 새 섹션 추가 아이콘을 클릭하면 "라이브러리에서 추가" 옵션이 표시됩니다. 이 옵션을 선택하고 원하는 레이아웃을 선택합니다.

아래 의견에서 여러분의 의견을 기다리겠습니다.

건배!