• 홈페이지
  • 조항
  • 주제
  • Divi의 이미지 갤러리에 그리드 스태거링 애니메이션을 추가하는 방법

Divi의 이미지 갤러리에 그리드 스태거링 애니메이션을 추가하는 방법

게시 됨: 2021-06-11

Divi의 이미지 갤러리 모듈은 귀하의 사이트를 위한 멋진 이미지 갤러리를 만들기 위한 편리하고 유용한 도구입니다. 내장된 디자인 설정을 통해 모든 필수품 등을 얻을 수 있습니다. 그러나 이 튜토리얼에서는 독특한 놀라운 애니메이션 효과로 이미지 갤러리 디자인을 새로운 차원으로 끌어 올릴 것입니다. Divi의 기본 제공 디자인 옵션인 anime.js를 조합하여 사용하는 이 놀라운 애니메이션은 매끄러운 디자인 애니메이션으로 갤러리 내의 각 이미지를 차례로 공개하는 일종의 파급 효과와 유사합니다. 이것은 방문자를 위한 갤러리의 독특한 프레젠테이션과 갤러리의 각 페이지를 탐색할 때 인상적인 전환을 찾는 사람들에게 적합합니다.

시작하자!

엿보기

다음은 이 튜토리얼에서 구축할 디자인을 간략하게 살펴보겠습니다.

그리고 여기에 같은 개념을 보여주는 codepen이 있습니다.

무료로 레이아웃 다운로드

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

파일 다운로드
무료로 다운로드

무료로 다운로드

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

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

섹션 레이아웃을 Divi 라이브러리로 가져오려면 Divi 라이브러리로 이동하십시오.

가져오기 버튼을 클릭합니다.

이식성 팝업에서 가져오기 탭을 선택하고 컴퓨터에서 다운로드 파일을 선택합니다.

그런 다음 가져오기 버튼을 클릭합니다.

divi 알림 상자

완료되면 섹션 레이아웃을 Divi Builder에서 사용할 수 있습니다.

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

시작하는 데 필요한 것

확장 코너 탭

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

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

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

Divi 이미지 갤러리에 놀라운 애니메이션을 추가하는 방법

1부: 갤러리 페이지 레이아웃 디자인

그 부분

시작하려면 기존 섹션의 설정을 열고 다음과 같이 배경 그라디언트를 지정합니다.

  • 배경 그라데이션 왼쪽 색상: #d915b5
  • 배경 그라데이션 오른쪽 색상: #000000
  • 시작 위치: 50%
  • 최종 위치: 25%

divi 스태거링 애니메이션 이미지 갤러리

디자인 탭에서 패딩을 업데이트합니다.

  • 패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 0px, 오른쪽 0px

고급 탭에서 다음을 업데이트합니다.

  • 수평 오버플로: 숨김
  • 수직 오버플로: 숨김

divi 스태거링 애니메이션 이미지 갤러리

페이지 제목 행

섹션 내에서 1열 행을 추가합니다. 이것은 페이지 제목을 유지합니다.

divi 스태거링 애니메이션 이미지 갤러리

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

  • 패딩: 상단 15px, 하단 15px

divi 스태거링 애니메이션 이미지 갤러리

제목 텍스트 모듈

페이지 제목을 만들려면 행/열에 텍스트 모듈을 추가하십시오.

divi 스태거링 애니메이션 이미지 갤러리

그런 다음 다음 H1 제목으로 본문 내용을 업데이트합니다. 

<h1>Gallery</h1>

divi 스태거링 애니메이션 이미지 갤러리

텍스트 디자인 설정에서 다음을 업데이트합니다.

  • 제목 글꼴: Poppins
  • 제목 텍스트 정렬: 가운데
  • 제목 텍스트 색상: #ffffff
  • 제목 텍스트 크기: 100px(데스크톱), 80px(태블릿), 60px(휴대폰)

divi 스태거링 애니메이션 이미지 갤러리

갤러리 모듈의 행

같은 섹션에서 갤러리 모듈을 포함할 새 1열 행을 만듭니다.

divi 스태거링 애니메이션 이미지 갤러리

행 설정을 열고 검정색 배경을 지정합니다.

  • 배경색: #000000

divi 스태거링 애니메이션 이미지 갤러리

디자인 설정에서 다음을 업데이트합니다.

  • 사용자 지정 거터 너비 사용: 예
  • 거터 폭: 1
  • 폭: 95%
  • 최소 높이: 80vh
  • 패딩: 0px 상단, 0px 하단
  • 박스 섀도우: 스크린샷 참조
  • 상자 그림자 수직 위치: 0px
  • 상자 그림자 수평 위치: 0px
  • 상자 그림자 확산 강도: 70px
  • 그림자 색상: #000000

divi 스태거링 애니메이션 이미지 갤러리

2부: 갤러리 모듈 디자인하기

마지막으로 갤러리 모듈을 추가하고 디자인할 준비가 되었습니다. 갤러리를 만들려면 행에 새 갤러리 모듈을 추가합니다.

divi 스태거링 애니메이션 이미지 갤러리

이미지들

갤러리 설정의 콘텐츠 탭에서 갤러리에 사용할 이미지를 추가합니다. 이 예에서는 65개(또는 최소 25개 이상)의 이미지를 추가합니다. 이렇게 하면 놀라운 애니메이션 효과와 페이지 매김을 보여주는 많은 갤러리 항목이 제공됩니다.

이미지가 갤러리에 업로드되면 다음을 업데이트합니다.

  • 이미지 수: 25
  • 제목 및 캡션 표시: 아니요
  • 페이지 매김 표시: 예

divi 스태거링 애니메이션 이미지 갤러리

참고: 이미지 수를 "25"로 설정하면 페이지 매김 링크를 클릭할 때 페이지당 표시될 이미지 수가 정의됩니다. 사용자 정의 코드로 추가할 놀라운 그리드 애니메이션은 페이지당 5개 이미지(25개 이미지)의 5행이 있는 이미지 갤러리를 기반으로 합니다. 최상의 결과를 얻으려면 이미지가 25개 이상 있고 이미지 수가 25개로 설정되어 있는지 확인하십시오.

오버레이 및 페이지 매김 디자인

디자인 탭에서 오버레이 디자인을 업데이트합니다.

  • 오버레이 아이콘 색상: #ffffff
  • 오버레이 배경색: rgba(217,21,181,0.55)
  • 오버레이 아이콘: 더하기 아이콘(스크린샷 참조)

divi 스태거링 애니메이션 이미지 갤러리

  • 페이지 매김 텍스트 정렬: 가운데
  • 페이지 매김 텍스트 크기: 2em
  • 페이지 매김 줄 높이: 2em
  • 패딩: 상단 10px, 하단 10px, 왼쪽 5px, 오른쪽 5px

divi 스태거링 애니메이션 이미지 갤러리

고급 스타일링

다음으로 갤러리 모듈에 고급 스타일을 추가할 것입니다. 이렇게 하는 주된 이유는 다른 장치에서 행당 표시되는 이미지 수를 제어하기 위한 것입니다.

먼저 다음과 같이 갤러리 항목에 CSS를 추가해 보겠습니다.

갤러리 항목 CSS(데스크톱) 

animation: fadeLeft 0s !important;
background: #000000;
padding: 10px;
width: 20% !important;
margin: 0 !important;
clear: none !important;

갤러리 항목 CSS(태블릿) 

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 25% !important;
margin: 0 !important;
clear: none !important;

갤러리 항목 CSS(전화) 

animation: fadeLeft 0s !important;
background: #000000;
padding: 5px;
width: 50% !important;
margin: 0 !important;
clear: none !important

각 갤러리 항목의 너비는 각 장치에서 변경됩니다. 바탕 화면에서 너비가 20%이면 행당 5개의 이미지가 생성됩니다. 태블릿에서 너비가 25%이면 행당 4개의 이미지가 생성됩니다. 그리고 휴대폰의 50% 너비는 행당 2개의 이미지를 생성합니다.

다음으로 페이지 매김 테두리를 제거하되 갤러리 페이지 매김 상자에 다음 CSS를 추가합니다. 

border-top: 0px !important;
padding-top: 20px;

마지막으로 활성 페이지 매김 링크에 사용자 정의 색상과 글꼴 두께를 추가합니다. 

color: #d915b5 !important;
font-weight: bold;

divi 스태거링 애니메이션 이미지 갤러리

저장하기 전에 갤러리 모듈에 다음 CSS 클래스를 추가해야 합니다.

  • CSS 클래스: et-anime-gallery

divi 스태거링 애니메이션 이미지 갤러리

3부: JQuery 및 Anime.js를 사용하여 갤러리에 놀라운 애니메이션 효과 추가하기

이제 디자인이 완료되었으므로 간단하고 전문적인 이미지 갤러리 레이아웃이 생겼습니다. 놀라운 애니메이션 이미지 갤러리를 만드는 데 필요한 코드를 추가하기만 하면 됩니다.

이렇게 하려면 갤러리 모듈 아래에 코드 모듈을 추가합니다.

divi 스태거링 애니메이션 이미지 갤러리

CSS

코드 콘텐츠 상자에 다음 CSS를 붙여넣고 CSS를 필요한 스타일 태그로 래핑합니다. 

/*hide prev and next pagination links*/  
.et-anime-gallery li.prev, .et-anime-gallery li.next {
  display:none !important;
  }

divi 스태거링 애니메이션 이미지 갤러리

Anime.js 라이브러리

끝 스타일 태그 아래에 다음 src를 스크립트 태그와 함께 붙여넣어 그 아래의 JavaScript/Jquery에 사용할 수 있도록 anime.js 라이브러리를 호출합니다. 

src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"

스크립트는 다음과 같아야 합니다...

divi 스태거링 애니메이션 이미지 갤러리

divi 스태거링 애니메이션 이미지 갤러리

제이쿼리

anime.js 라이브러리를 호출하는 스크립트 아래에 다음 JQuery를 붙여넣고 필요한 스크립트 태그로 래핑합니다. 

jQuery(function ($) {
  $(document).ready(function () {
    
    var fromCenter = "center";
    var animeTargetItem = ".et-anime-gallery .et_pb_gallery_item";
    var animeTargetImage = ".et-anime-gallery .et_pb_gallery_image";
    var $paginationLink = $(".et-anime-gallery .et_pb_gallery_pagination li a");
    
		//animate gallery on page load
    animateGalleryFunction(animeTargetItem, animeTargetImage, fromCenter);

    //animate gallery when clicking pagination number link
    $($paginationLink).click(function (e) {
      var pageNum = $(e.target).attr("data-page");
      var fromNum = pageNum*25-25; //replace 25 with image count for gallery module
      animateGalleryFunction(animeTargetItem, animeTargetImage, fromNum);
    });

    function animateGalleryFunction(targetItem, targetImage, stagFrom) {
      //animate gallery image
      anime({
        targets: targetImage,
        opacity: [0, 1],
        rotateX: [0, 360],
        scale: [0.5, 1],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          200,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
      //animate gallery item background
      anime({
        targets: targetItem,
        background: ["#000", "#d915b5", "#000"],
        direction: "normal",
        easing: "easeInOutSine",
        duration: 600,
        delay: anime.stagger(
          250,
          { grid: [5, 5], from: stagFrom },
          { start: "100" }
        ),
      });
    }
  });
});

divi 스태거링 애니메이션 이미지 갤러리

최종 결과

갤러리 및 코드 업데이트

갤러리 및 애니메이션 효과를 자신의 사이트에 맞게 변경할 때마다 염두에 두어야 할 몇 가지 팁이 있습니다. 먼저 갤러리 이미지 수를 25가 아닌 다른 값으로 변경하려면 해당 새 값을 반영하도록 코드를 업데이트해야 합니다. 예를 들어, 20으로 변경하면 다음 변수의 숫자도 변경해야 합니다. 

var fromNum = pageNum*25-25;

이에… 

var fromNum = pageNum*20-20;

두 애니메이션 모두에서 지연 속성의 그리드 값을 업데이트해야 할 수도 있습니다. 예를 들어, 데스크탑에 페이지당 20개의 이미지만 있는 경우 5개의 행 4개만 갖게 됩니다. 따라서 다음 값을 변경해야 합니다. 

grid: [5, 5]

이에… 

grid: [4, 5]

또한 필요에 따라 애니메이션 속성 값을 변경할 수 있습니다. 예를 들어 갤러리 항목 배경 애니메이션의 색상을 변경하려는 경우 다음을 업데이트할 수 있습니다. 

background: ["#000", "#d915b5", "#000"]

이에… 

background: ["#000", "#ffffff", "#000"]

이렇게 하면 애니메이션 중에 분홍색 배경색이 흰색으로 변경됩니다.

마지막 생각들

Divi 빌더를 사용하여 모든 디자인이 완료되면 이미지 갤러리에 놀라운 애니메이션을 추가하면 디자인을 한 단계 끌어올릴 수 있습니다. 애니메이션의 핵심은 여러 애니메이션을 수행하기 위해 이미지와 배경을 대상으로 하는 anime.js 라이브러리의 힘을 활용하는 것입니다. 웹사이트에서 Anime.js를 사용한 그리드 스태거링에 대해 자세히 알아보십시오. 코드의 속성과 값을 자유롭게 조정하여 디자인에 고유한 플레어를 추가하십시오.

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

건배!