Divi 이미지 갤러리 는 웹사이트 내에서 모든 기능을 갖춘 갤러리를 만드는 데 유용한 모듈입니다. 패션 애호가나 사진 작가라면 웹사이트에 프로젝트를 선보일 갤러리가 필요할 수 있습니다. Divi에 이미지 갤러리에서 뛰어난 애니메이션 효과를 가져오는 데 필요한 모든 내장 장비가 있는지 모를 수도 있습니다. 오늘 우리는 Divi 빌더와 함께 anime.js를 사용하여 잔물결 애니메이션을 가져오고 창의적인 이미지 갤러리 애니메이션을 보려고 합니다. 더 이상 시간을 낭비하지 않고 시작하겠습니다.
시사
전체 튜토리얼을 마친 후 갤러리가 어떻게 생겼는지 알 수 있습니다.
Divi 이미지 갤러리에 애니메이션 추가
1부: 갤러리 페이지 레이아웃 디자인
그 부분
먼저 초기 섹션에 대한 설정을 열고 언급된 수정을 수행합니다.
- 배경 그라데이션 왼쪽 색상: #15d6c2
- 배경 그라데이션 오른쪽 색상: #000000
- 시작 위치: 50%
- 최종 위치: 25%
디자인 탭에서 패딩 설정을 업데이트합니다.
놀라운 웹사이트 만들기
최고의 무료 페이지 빌더 Elementor와 함께
지금 시작- 패딩: 위쪽 0px, 아래쪽 0px, 왼쪽 0px, 오른쪽 0px
그런 다음 고급 탭의 가시성에서 오버플로 설정을 업데이트합니다.
- 수평 오버플로: 숨김
- 수직 오버플로: 숨김
행 1 추가
페이지 제목을 포함할 1열 행을 추가합니다.
그런 다음 행 설정에서 패딩을 업데이트하겠습니다.
- 패딩: 상단 15px, 하단 15px
텍스트 모듈 추가
다음 단계는 행에 텍스트 모듈을 추가하는 것입니다. 이 모듈은 페이지 제목으로 작동합니다.
이제 원하는 콘텐츠를 추가하고 그림에 표시된 메뉴에서 제목 1을 선택합니다.
그런 다음 디자인 섹션으로 이동하여 제목에 대한 다음 설정을 업데이트합니다.
- 제목 글꼴: Poppins
- 제목 텍스트 정렬: 가운데
- 제목 텍스트 색상: #ffffff
- 제목 텍스트 크기: 100px(데스크톱), 80px(태블릿), 60px(휴대폰)
행 2 추가
같은 섹션에 다른 행을 추가합니다. 갤러리 모듈로 작동합니다.
행 설정에서 행에 검정색 배경색을 추가합니다.
- 배경색: #000000
디자인 탭을 많이 업데이트해야 합니다. 따라서 주의 깊게 따르십시오. 먼저 크기 설정으로 이동합니다.
- 사용자 지정 거터 너비 사용: 예
- 거터 폭: 1
- 폭: 95%
- 최소 높이: 80vh
이제 행에 패딩을 추가합니다.
- 패딩: 0px 상단, 0px 하단
이제 상자 그림자를 추가할 차례입니다.
- 박스 섀도우: 스크린샷 참조
- 상자 그림자 수직 위치: 0px
- 상자 그림자 수평 위치: 0px
- 상자 그림자 확산 강도: 70px
- 그림자 색상: #000000
2부: 갤러리 모듈 디자인
이제 디자인에 갤러리 모듈을 추가할 차례입니다.
갤러리 모듈의 콘텐츠 탭에서. 최소 25개의 이미지를 추가하세요. 이것은 이미지에 뛰어난 애니메이션 효과를 주기에 꽤 좋은 양입니다.
이미지를 업로드한 후 다음 변경을 수행합니다.
- 이미지 수: 25
- 제목 및 캡션 표시: 아니요
- 페이지 매김 표시: 예
오버레이 및 페이지 매김 디자인
디자인 탭에서 오버레이 설정 업데이트:
- 오버레이 아이콘 색상: #ffffff
- 오버레이 배경색: rgba(22,215,195,0.55)
- 오버레이 아이콘: 더하기 아이콘(스크린샷 참조)
페이지 설정을 할 차례입니다.
- 페이지 매김 텍스트 정렬: 가운데
- 페이지 매김 텍스트 크기: 2em
- 페이지 매김 줄 높이: 2em
- 패딩: 상단 10픽셀, 하단 10픽셀, 왼쪽 5픽셀, 오른쪽 5픽셀
고급 스타일링
이제 갤러리에 대한 고급 스타일 지정을 수행합니다. 먼저 다음과 같이 갤러리 항목에 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
갤러리 페이지 매김 상자에 다음 CSS 코드를 추가합니다.
border-top: 0px !important;
padding-top: 20px; 또한 페이지 매김 활성 페이지 상자에 이 CSS 코드를 넣으십시오.
color: #15D6C2 !important;
font-weight: bold;
이제 저장하기 전에 갤러리 모듈에 CSS 클래스를 추가합니다.
- CSS 클래스: et-anime-gallery
3부: JQuery 및 Anime.js로 애니메이션 효과 추가하기
우리는 우리의 디자인을 마쳤습니다. 간단한 코딩을 추가하여 더욱 매력적으로 만들 차례입니다. 이것이 갤러리 모듈 아래에 코드 모듈을 추가하는 이유입니다.
CSS
이제 Style 태그 내의 콘텐츠 상자 안에 다음 CSS 코드를 붙여넣습니다.
/*hide prev and next pagination links*/
.et-anime-gallery li.prev, .et-anime-gallery li.next {
display:none !important;
} 
Anime.js 라이브러리
CSS 코드 아래에서 이 소스를 스크립트 태그에 추가하여 디자인에 Anime.js 라이브러리를 추가합니다.
src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"
jQuery 코드
이제 스크립트 태그 안에 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,
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", "#15D6C2", "#000"],
direction: "normal",
easing: "easeInOutSine",
duration: 600,
delay: anime.stagger(
250,
{ grid: [5, 5], from: stagFrom },
{ start: "100" }
),
});
}
});
});저장하고 닫습니다.
최종 모습
이것이 우리 갤러리의 모습입니다. 아름답지 않습니까?
마지막 단어
방문자에게 더 나은 사용자 경험을 제공하기 위해 갤러리의 기본 애니메이션을 사용하는 것보다 몇 가지 사소한 변경으로 최상의 애니메이션 효과를 얻을 수 있다면 그러한 작은 작업을 수행하는 것이 좋습니다. 오늘 튜토리얼을 통해 Divi 의 내장 시스템과 약간의 가벼운 코드를 사용하여 아름답고 매혹적인 갤러리 애니메이션을 만드는 방법을 확인했습니다. 이 튜토리얼이 마음에 들면 Divi Lover 친구들과 공유하십시오.
