Divi의 스크롤 효과로 분리된 이미지 전환을 만드는 방법

Divi의 스크롤 효과를 사용하면 눈길을 끄는 디자인으로 방문자를 놀라게 할 수 있는 뛰어난 전환 애니메이션을 만들 수 있습니다. 특히 이미지는 놀라운 방식으로 이러한 스크롤 효과의 힘을 보여줄 수 있습니다. 이 자습서에서는 Divi의 스크롤 효과를 사용하여 분리 이미지 전환을 만드는 방법을 단계별로 설명합니다. 이 효과는 원래 데모 페이지에 등장했습니다. 효과는 Photoshop과 같은 사진 편집기를 사용하여 미리 이미지를 자르는 것과 관련이 있습니다. 이미지를 슬라이스한 후 Divi에 추가하고 내장된 스크롤 효과를 사용하여 마법을 구현하기만 하면 됩니다.

시작하자.

엿보기

오늘 소개할 디자인은 여기까지입니다.

또한 "운동은 지루할 필요가 없습니다"라는 제목의 데모 페이지에서 디자인의 원본 라이브 데모를 볼 수 있습니다.

Breakaway 이미지 전환 Divi 레이아웃을 무료로 다운로드하십시오.

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

파일 다운로드

무료로 다운로드

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

다운로드

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

레이아웃을 페이지로 가져오려면 zip 파일을 추출하고 JSON 파일을 Divi Builder로 끌어다 놓기만 하면 됩니다.

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

시작하는 데 필요한 것

시작하려면 다음을 수행해야 합니다.

1. 아직 설치하지 않았다면 Divi 테마를 설치하고 활성화하십시오.
2. WordPress에서 새 페이지를 만들고 Divi Builder를 사용하여 프런트 엔드(비주얼 빌더)에서 페이지를 편집합니다.
3. "처음부터 빌드" 옵션을 선택합니다.

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

위의 Divi 설정 외에도 다음이 필요합니다.

• 2개의 이미지(최소 1080px x 540px)
• Photoshop과 같은 사진 편집 소프트웨어는 이미지를 Divi에 추가하기 전에 슬라이스합니다.

1부: Photoshop에서 이미지 자르기

Divi에서 디자인 생성을 시작하기 전에 분리 전환 스크롤 효과에 사용할 두 개의 이미지를 슬라이스해야 합니다. 두 이미지 모두 정확히 1080x540픽셀이 되도록 잘려야 합니다. 그런 다음 8등분으로 잘라야 합니다(가로 4개, 아래로 2개). 준비가 되면 컴퓨터에 저장하고 이미지 조각을 사이트에 업로드할 수 있습니다. 첫 번째 이미지부터 시작하겠습니다.

이미지 #1

이미지 자르기

가장 먼저 해야 할 일은 1080px x 540px의 정확한 크기를 갖도록 이미지를 자르는 것입니다. 모든 이미지 편집 소프트웨어를 사용하여 이 작업을 수행할 수 있습니다. Photoshop에서는 자르기 도구를 사용할 수 있습니다.

이미지 슬라이싱

그런 다음 을 클릭하여 슬라이스 도구를 사용하고 전체 이미지를 선택합니다. 슬라이스/이미지를 마우스 오른쪽 버튼으로 클릭하고 슬라이스 분할 옵션을 선택합니다.

분할 슬라이스 옵션 상자에서 다음을 업데이트합니다.

수평으로 나누기:

• 2조각을 일정한 간격으로
• 슬라이스당 270픽셀

세로로 나누기:

• 가로로 4조각, 일정한 간격으로
• 슬라이스당 270픽셀

그런 다음 확인을 클릭합니다.

이미지 조각 저장

이제 우리는 각각 270px x 270px인 8개의 동일한 블록으로 분할된 이미지를 가지고 있습니다.

이미지 조각을 저장하려면 파일 > 내보내기 > 웹용으로 저장으로 이동합니다.

그런 다음 파일 형식을 선택하고 저장을 클릭합니다.

팝업 상자에서 다음을 업데이트해야 합니다.

• 다른 이름으로 저장: [이미지 이름 입력]
• 형식: 이미지만
• 설정: 기본 설정
• 슬라이스: 모든 슬라이스

그런 다음 저장을 클릭합니다.

이제 모든 이미지 조각이 컴퓨터에 저장되어 Divi에 업로드할 준비가 됩니다.

이미지 #2

이 분리된 이미지 전환 스크롤 효과에 필요한 두 번째 이미지를 만들려면 첫 번째 이미지를 만들 때 사용한 것과 동일한 프로세스(자르기, 슬라이싱 및 저장)를 따라야 합니다.

이미지 슬라이스 회전

그러나 회전 스크롤 효과가 작동하는 방식 때문에 두 번째 이미지를 구성하는 각 이미지 조각을 왼쪽이나 오른쪽으로 90도 회전해야 합니다.

이미지를 회전하려면 Photoshop 또는 운영 체제의 내장 이미지 편집 소프트웨어를 사용할 수 있습니다(WordPress 미디어 갤러리를 사용하여 이미지를 사이트에 업로드한 후 편집 및 회전할 수도 있습니다.).

다음은 이미지를 슬라이싱할 때 이미지를 원래 위치 내에서 회전하는 방법에 대한 안내입니다.

여기 원본 이미지가 있습니다.

다음은 이미지 조각을 사이트에 업로드하기 전에 회전하는 방법입니다.

이것은 결국 다음과 같은 스크롤 효과를 얻기 위해 필요합니다.

두 이미지 모두 자르기, 슬라이스, 저장 및 회전이 완료되었으므로 Divi 사이트에 추가할 준비가 되었습니다. 총 16개의 이미지가 있어야 합니다(이미지 1의 8개, 이미지 2의 8개).

2부: Divi에서 분리 이미지 전환 스크롤 효과 만들기

이미지 조각이 준비되면 Divi에서 디자인 프로세스를 시작할 수 있습니다. 방법은 다음과 같습니다.

행 #1 추가

시작하려면 4열 행을 만드십시오.

행 설정

행 설정을 열고 다음을 업데이트합니다.

• 거터 폭: 1
• 최대 너비: 1080px(데스크톱), 540px(태블릿 및 휴대폰)
• 패딩: 0px 상단, 0px 하단
• 수평 오버플로: 표시
• 수직 오버플로: 표시

섹션 패딩 업데이트

두 번째 행을 첫 번째 행의 맨 위에 절대적으로 배치할 것이므로 섹션의 위쪽(아래쪽) 패딩을 제거하여 두 번째 행의 위치를 ​​버리지 않도록 해야 합니다. 섹션 설정을 열고 다음을 업데이트합니다.

• 패딩: 상단 0px, 왼쪽 0px

이미지 추가

첫 번째 행에서는 첫 번째 이미지를 구성하는 8개의 이미지/슬라이스를 각각 추가합니다. 이미지는 Photoshop에서 슬라이싱된 것과 정확히 같은 열 내에 위치해야 합니다(가로 4개, 아래로 2개).

다음은 숫자가 표시된 각 이미지의 그림입니다. 이것은 모든 이미지가 행에 추가된 후의 모습이어야 합니다.

이미지 #1

첫 번째 이미지 모듈을 열 1에 추가합니다.

그런 다음 첫 번째 이미지 조각을 모듈에 업로드합니다.

스크롤 효과

고급 탭에서 다음 스크롤 효과를 이미지에 추가합니다.

• 페이드 인 및 아웃 활성화: 예
• 시작 불투명도: 100%(20% 뷰포트에서)
• 중간 불투명도: 100%(20% 뷰포트에서)
• 종료 불투명도: 0%(50% 뷰포트에서)

배율 탭을 클릭하고 다음을 업데이트합니다.

• 확장 및 축소 활성화: 예
• 시작 배율: 100%(20% 뷰포트에서)
• 중간 배율: 70%(32% – 48% 뷰포트에서)
• 종료 배율: 100%(60% 뷰포트에서)

회전 탭을 클릭하고 다음을 업데이트합니다.

• 회전 활성화: 예
• 시작 회전: 0도(0% 뷰포트에서)
• 중간 회전: 0도(20% 뷰포트에서)
• 종료 회전: -90도(60% 뷰포트에서)

페이지를 아래로 스크롤하면 스크롤 효과가 다음과 같이 나타납니다.

이미지 #2

이미지 #2를 생성하려면 이미지 #1을 복제하고 열 2에 복제물을 배치합니다.

이미지 #2로 복제 이미지 모듈을 업데이트합니다.

스크롤 효과 업데이트

우리는 이미지 #1에서 가져온 동일한 스크롤 효과의 대부분을 유지할 것입니다. 우리가 변경해야 할 유일한 것은 회전입니다. 고급 탭으로 이동하여 끝 회전을 -90도 대신 90도로 변경하여 반대 방향으로 회전합니다.

• 끝 회전: 90도

이미지 #3

이미지 #3을 만들려면 이미지 #1을 복사하여 3열에 붙여넣은 다음 이미지를 이미지 #3으로 변경합니다.

이미지 #4

이미지 #4를 만들려면 이미지 #2를 복사하여 4열에 붙여넣고 이미지를 이미지 #4로 업데이트합니다.

이미지 #5

이미지 #5를 만들려면 이미지 #1을 복제하여 열 1의 바로 아래에 복제가 있도록 합니다.

이미지를 이미지 #5로 업데이트합니다. 그런 다음 페이드 인 및 아웃 스크롤 효과를 다음과 같이 업데이트합니다.

• 시작 불투명도: 100%(0% 뷰포트에서)
• 중간 불투명도: 100%(0% 뷰포트에서)
• 종료 불투명도: 0%(40% 뷰포트에서)

그런 다음 다음과 같이 확대 및 축소 스크롤 효과를 업데이트합니다.

• 시작 배율: 100%(0% 뷰포트에서)
• 중간 배율: 70%(12% – 28% 뷰포트에서)
• 종료 배율: 100%(40% 뷰포트에서)

마지막으로 회전 스크롤 효과를 다음과 같이 업데이트합니다.

• 시작 회전: 0도(0% 뷰포트에서)
• 중간 회전: 0도(0% 뷰포트에서)
• 끝 회전: 90도(40% 뷰포트에서)

이미지 #6

이미지 #6을 만들려면 이미지 #5를 복제하고 열 2(이미지 #2 아래)로 이동합니다.

이미지 #5로 이미지 모듈을 업데이트합니다. 그런 다음 회전 스크롤 효과를 다음과 같이 반대 방향(-90도)으로 조정합니다.

• 끝 회전: -90도

이미지 #7

이미지 #7을 생성하려면 이미지 #5를 복제하고 열 3의 이미지 #3 아래로 이동합니다. 그런 다음 복제 이미지 모듈을 이미지 #7로 업데이트합니다.

이미지 #8

이미지 #8을 생성하려면 이미지 #6을 복제하고 열 4의 이미지 #4 아래로 이동합니다. 그런 다음 복제 이미지 모듈을 이미지 #8로 업데이트합니다.

이제 모든 이미지 조각이 분리 스크롤 효과와 함께 행 #1에 추가되었습니다.

지금까지의 결과는 다음과 같습니다.

행 #2 추가

이미지의 두 번째 행은 디자인하는 데 많은 시간이 걸리지 않습니다. 행 #1을 복제하고 모든 이미지를 올바른 이미지로 업데이트한 다음 절대 위치를 지정하기만 하면 됩니다.

계속해서 행 #1을 복제하십시오.

행 #2 이미지 업데이트

이미지 #2를 위해 생성한 회전된 이미지를 기억하십시오. 이제 행 #2 내의 올바른 이미지 모듈 위치에 각각을 업로드하기만 하면 됩니다.

이미지 스크롤 효과 업데이트

회전된 새 이미지가 제자리에 있으면 행 #2의 모든 이미지에서 페이드 인 및 아웃 스크롤 효과를 제거해야 합니다.

이렇게 하고 와이어프레임 보기 모드를 배포하고 다중 선택을 사용하여 행 #2에 있는 8개의 이미지를 모두 선택합니다. 그런 다음 선택한 이미지 중 하나에 대한 설정을 열어 요소 설정을 배포합니다. 페이드 인 및 아웃 스크롤 효과 옵션에서 다음을 업데이트합니다.

• 페이드 인 및 아웃 활성화: 아니오

위치 행 #2

마지막 단계는 행 #1 바로 뒤에 행 #2를 배치하는 것입니다. 이를 수행하는 쉬운 방법은 행과 절대 위치를 지정하는 것입니다. 행 #2에 대한 설정을 열고 다음을 업데이트합니다.

• 위치: 절대
• 위치: 상단 중앙

최종 결과

결과를 보려면 섹션에 상당한 양의 위쪽 및 아래쪽 여백을 지정하거나 디자인 위와 아래에 다른 섹션을 만들어야 할 수 있습니다. 이렇게 하면 스크롤 효과를 제대로 볼 수 있는 공간이 생깁니다.

최종 결과를 확인해보자.

그리고 여기 모바일입니다.

마지막 생각들

이 분리형 이미지 전환은 그 자체로 인상적인 디자인이지만 방문자에게 변형 유형 메시지(예: 전후)를 전달하는 데 쉽게 사용할 수 있습니다. 그리고 이 디자인에 안주할 필요도 없습니다. 더 놀라운 이미지 전환을 만들기 위해 다양한 스크롤 효과를 자유롭게 실험해 보십시오. 어떤 아이디어가 있습니까?

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

건배!