Divi에서 스크롤 효과로 이미지 갤러리를 표시하는 방법

이미지 갤러리는 대부분의 웹 사이트에서 가장 좋아하는 곳입니다. 그리고 대부분의 경우 이미지 갤러리를 밝고 정적 인 상태로 유지하여 이미지가 마법처럼 작동하도록하는 것이 가장 좋습니다.

그러나 슬라이딩 퍼즐 스크롤 효과를 이미지 갤러리 (이 자습서에서와 같이), 시대를 초월한 고전에 상쾌한 감동을 줄 수 있습니다.

이 튜토리얼에서는 Divi에서 슬라이딩 퍼즐 스크롤 효과가있는 이미지 갤러리를 보여주는 간단한 레이아웃을 만드는 방법을 보여줍니다.

핵심은 이미지 크기가 각 스크롤 효과의 수직 및 수평 오프셋 값과 어떻게 관련되는지 이해하여 이미지를 정확히 한 지점으로 이동하는 것입니다. 그러나 완료되면 결과적인 모션 효과가 점차적으로 조합되어 독특한 방식으로 이미지 갤러리를 드러내므로 선명하고 정확합니다.

가능한 결과

다음은이 튜토리얼에서 만들 슬라이딩 퍼즐 스크롤 효과가있는 이미지 갤러리 레이아웃의 개요입니다.

헤더 섹션 만들기

시작하려면 사용자가 갤러리를보기 위해 페이지를 스크롤하고 멋진 스크롤 효과를 사용하도록 지시하는 빠른 헤더 섹션을 만들어 보겠습니다.

행 추가

기본 섹션에 한 열의 행을 추가합니다.

텍스트 모듈 추가

열 / 행 안에 새 텍스트 모듈을 추가하십시오.

텍스트 설정에서 다음과 같이 본문 내용을 업데이트하십시오.

<h1>Image Gallery</h1>

텍스트 모듈 설정

디자인 탭에서 다음과 같이 텍스트 디자인을 업데이트합니다.

제목 글꼴 : Roboto
제목 글꼴 무게 : 굵게
제목 글꼴 스타일 : TT
헤더 텍스트 정렬 : 가운데
헤더 텍스트 크기 : 50px (데스크톱), 40px (태블릿 및 휴대 전화)
제목 글자 간격 : 4px

Blurb 모듈 아이콘 추가

텍스트가 완성되면 텍스트 모듈 아래에 새 프레젠테이션 텍스트 모듈을 추가하십시오.

그런 다음 기본 콘텐츠에서 모든 제목과 본문을 제거하고 아래쪽 화살표 아이콘을 사용하도록 선택합니다.

프리젠 테이션 텍스트 설정

그런 다음 프리젠 테이션 텍스트 설정을 새로운 색상과 반복 슬라이드 애니메이션으로 업데이트하십시오.

아이콘 색상 : # ffb500
애니메이션 스타일 : 슬라이드
애니메이션 방향 : 아래로
애니메이션 강도 : 20 %
애니메이션 반복 : 루프

섹션 패딩

스크롤을위한 섹션 공간을 제공하려면 다음과 같이 패딩을 업데이트하십시오.

패딩 : 20vh 이상, 50vh 이하

여기에서는 간격이 모든 브라우저 크기에 일관되게 맞도록 브라우저 창의 높이에 상대적인 길이 vh 단위를 사용합니다.

스크롤링 효과가있는 이미지 갤러리 생성

헤더 섹션이 완성되었으므로 슬라이딩 퍼즐 스크롤 효과를 사용하여 실제 이미지 갤러리를 구축 할 준비가되었습니다. 전체 갤러리는 각 행에 4 개의 이미지 / 열로 구성된 12 개의 행으로 구성되어 총 XNUMX 개의 이미지를 만듭니다. 그러나 레이아웃이 끝나면 레이아웃에 더 많은 선과 이미지를 쉽게 추가 할 수 있습니다.

단면과 선 만들기

새 섹션 추가

제목 섹션 아래에 새로운 일반 섹션을 추가하여 시작하겠습니다.

행 추가

그런 다음 섹션에 XNUMX 개의 열이있는 행을 추가하십시오.

라인 설정

회선 설정에서 다음을 업데이트하십시오.

거터 폭 : 1
너비 : 100 %
최대 너비 : 1200 픽셀 (데스크톱), 600 픽셀 (태블릿), 300 픽셀 (전화)

선 너비가 이미지 크기를 결정하는 방법

행의 너비는 1 개의 열 각각의 너비를 나타내므로이 디자인에서 매우 중요합니다. 거터 너비를 XNUMX로 설정하면 이미지 사이에 더 이상 여백이 없습니다.

최대 너비를 1200px로 설정하면 300 개의 열 레이아웃이 각 열 / 이미지의 너비를 정확히 1200px (4px / 300 = XNUMXpx)로 만듭니다.

또한 각 이미지가 정사각형이므로 각 이미지의 높이도 300 픽셀이라는 것을 알고 있습니다. 우리가 원하지 않는다면 그렇게 유지할 필요가 없습니다.

예를 들어 400 x 400 픽셀의 이미지가있는 300 열 레이아웃을 선택할 수도 있습니다. 이미지 너비 (300px)와 높이 (XNUMXpx)를 아는 것이 나중에 스크롤 효과를 만드는 열쇠가 될 것입니다.

이미지 추가

이미지 추가 1

이미지 1 스크롤 효과

이미지 크기와 스크롤 효과 오프셋 간의 관계

수직 및 수평 스크롤 효과를 사용할 때 입력 한 숫자 값이 무엇을 나타내는 지 이해하는 것이 중요합니다. 이 예에서는 수직 이동 시작 오프셋이 -3입니다. 이 -3은 실제로 이미지의 너비 인 -300px (또는 아래로 300px)입니다.

그러면 사용자가 스크롤 할 때 오프셋이 0 (홈 위치)에 도달합니다. 이것이 이미지를 정확히 한 블록 / 프레임으로 이동시키는 스크롤 효과를 만듭니다. 수평 이동은 3 (오른쪽에서 300 픽셀)에서 시작하여 기본 위치에서 멈 춥니 다. 이 두 효과가 결합되어 고유 한 두 부분으로 된 스크롤 효과를 만듭니다.

이미지 추가 2

이미지에 스크롤 효과를 추가 한 후 1. 열 2에 새 이미지를 추가합니다.

이 정적 이미지는 스크롤 효과없이 그대로 둡니다.

이미지 추가 3

그런 다음 열 3에 다른 이미지 모듈을 추가하고 새 이미지로 모듈을 업데이트합니다.

이미지 3 스크롤 효과

이미지 설정에서 다음 스크롤 효과를 업데이트합니다.

수평 이동 탭에서 ...

수평 이동 활성화 : 예
시작 오프셋 : -3 (창의 0 %에서)
평균 오프셋 : 0 (뷰포트의 15 %에서)
끝 오프셋 : 0 (뷰포트의 100 %에서)

이미지 추가 4

마지막 이미지를 만들려면 이미지 1을 복사하여 4 열에 붙여 넣습니다.

이미지 설정에서 새 이미지를 업로드하십시오.

이미지 4 스크롤 효과

그런 다음 다음 스크롤 효과를 업데이트하십시오.

수직 이동 탭에서 ...

수직 이동 활성화 : 예
시작 오프셋 : 3 (창의 0 %에서)
평균 오프셋 : 0 (뷰포트의 15 % -28 %에서)
끝 오프셋 : 0 (뷰포트의 40 %에서)

수평 이동 탭에서 ...

수평 이동 활성화 : 예
시작 오프셋 : 3 (창의 0 %에서)
평균 오프셋 : 3 (뷰포트의 28 %에서)
끝 오프셋 : 0 (뷰포트의 40 %에서)

중복 라인

이제 이미지 스크롤 효과가 첫 번째 행에 대해 수행되었으므로 더 많은 이미지와 해당 스크롤 효과를 만들기 위해 행을 복제하기 만하면됩니다. 이 예에서는 행을 두 번 복제하여 총 XNUMX 개의 행을 만듭니다.

필요에 따라 이미지 교체 및 재정렬

그런 다음 드래그 앤 드롭 기능을 사용하여 원하는 위치로 이미지를 이동할 수 있습니다. 여기에서 창의력을 발휘하고 움직이는 이미지가 어떻게 스크롤되는지 확인할 수 있습니다. 이미지가 제자리에 있으면 이미지 모듈의 내용을 요구 사항을 충족하는 새 이미지로 바꿀 수 있습니다. 사이트 웹.