CodeWatchers

Divi에서 분할 텍스트 셔터 이미지 애니메이션을 만드는 방법

Rifat Divi Tutorials Oct 19, 2021

이미지 오버레이는 웹사이트 방문자에게 매력적인 시청 경험을 제공하는 매우 창의적인 매체입니다. 사용자 정의 애니메이션과 호버링 효과는 이미지를 보여줄 수 있는 좋은 방법이며 요즘 모든 사람들에게 매우 인기가 있습니다. 오늘의 튜토리얼에서는 Divi를 통해 분할 텍스트 애니메이션으로 아름다운 이미지 오버레이를 만드는 방법을 알아봅니다.

Divi에서 분할 텍스트 셔터 이미지 애니메이션을 만드는 방법

오늘의 튜토리얼을 세 부분으로 나누었습니다. 첫 번째 부분에서는 사용자 지정 이미지 오버레이를 만드는 방법을 살펴보고 다음 부분에서는 디자인에 몇 가지 코드를 추가합니다. 그리고 마지막으로 Divi 의 내장 옵션을 이용하여 독특한 이미지 오버레이 디자인을 만드는 방법을 알아보겠습니다.

지체 없이 시작합시다.

시사

오늘의 튜토리얼을 시작하기 전에 오늘 배울 디자인을 살펴보십시오.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

시작하기 전에

Divi 는 인상적인 기능을 제공하고 다목적 WordPress 테마의 진정한 목적을 제공하는 훌륭한 WordPress 테마입니다. 사용하기 쉬운 페이지 빌더에는 멋진 디자인을 만들 수 있는 많은 기능이 있습니다. 테마를 다운로드 하고 설치 후 활성화하십시오.

WordPress 대시보드에서 새 페이지를 만들고 Divi 빌더로 편집할 페이지를 엽니다. "처음부터 만들기"를 선택하면 작업 준비가 완료됩니다!

섹션 1: 디자인 구축

우리는 첫 번째 부분에서 디자인의 구조를 만들 것이라고 앞서 언급했습니다. 분할 텍스트 셔터가 있는 이미지 오버레이 설정이 완료되는 즉시 다음 부분에서 애니메이션을 로드합니다.

추가: 1행

행 설정

섹션에 일반 2열 행을 추가하고 모듈을 더 추가하기 전에 다음 설정을 변경합니다.

  • 거터 폭: 2

열 설정

열은 이미지와 셔터 오버레이 요소를 포함하므로 이것이 기본 컨테이너가 됩니다. 또한 이 열은 셔터 애니메이션 호버 효과를 시작합니다. 간단히 말해서, 마우스가 이 열 안에 들어오면 전체 애니메이션이 시작되고 마우스가 나오면 바로 이전 상태로 돌아갑니다.

열에 CSS 클래스를 추가하여 열을 "셔터 열"로 선택하고 나중에 "호버링할 때" 애니메이션을 적용합니다.

  • CSS 클래스: 셔터 열 on-hover

또한 다음 조정을 수행합니다.

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

추가: 이미지 모듈

이제 이미지 모듈이 있는 셔터 오버레이 뒤에 위치할 기본 이미지를 추가합니다.

이제 디자인 탭에서 정렬을 약간 변경합니다.

  • 이미지 정렬: 중앙

상단 셔터 분할 텍스트 만들기

이미지가 배치되면 이미지 모듈 아래에 텍스트 모듈을 추가하여 상단 셔터를 추가합니다.

텍스트로 텍스트 모듈을 업데이트합니다.

디자인 탭을 열고 다음과 같이 조정합니다.

  • 텍스트 글꼴: Poppins
  • 텍스트 글꼴 두께: 무거움
  • 텍스트 글꼴 스타일: TT
  • 텍스트 텍스트 색상: #ffffff
  • 텍스트 텍스트 크기: 150px(데스크톱), 20vw(태블릿 및 휴대폰)
  • 텍스트 문자 간격: -0.03em
  • 텍스트 줄 높이: 0em
  • 텍스트 정렬: 가운데

이제 크기 조정 및 간격 설정을 업데이트합니다.

  • 폭: 100%
  • 높이: 50%
  • 여백: 0px 하단

이제 고급 탭에서 다음 CSS 클래스를 추가합니다.

  • CSS 클래스: 탑 셔터

나중에 클래스를 사용하여 사용자 정의 코드로 변환 애니메이션을 켜고 끌 것입니다. 그런 다음 이 CSS 코드를 Main Element에 추가합니다.

display:flex;
align-items:flex-end;
justify-content:center;

텍스트를 제자리에 가져오려면 이러한 변경이 필요합니다.

하단 셔터 분할 텍스트 만들기

상단 셔터 분할 텍스트가 완료되었으므로 텍스트 모듈을 복제하여 하단 셔터 분할 텍스트를 만듭니다. CSS 클래스를 추가할 필요가 없습니다. 방금 이전 모듈을 복제했기 때문에 CSS 클래스가 이미 있습니다. 그러나 Main Element의 CSS 코드를 약간 조정해야 합니다. 

display:flex;
align-items:flex-start;
justify-content:center;

"flex-start"를 참조하면 텍스트가 모듈 상단에 수직으로 정렬됩니다. 이전 텍스트 모듈에서 줄 높이를 0으로 설정했으므로 전체 텍스트의 아래쪽 절반이 표시됩니다.

수직 오프셋으로 절대 위치를 추가합니다.

  • 수직 오프셋: 50%

이제 다음 부분에서 코딩으로 애니메이션을 수행할 오늘의 자습서 구조를 성공적으로 만들었습니다. 더 나은 미래 이해를 위해 모듈의 이름을 바꾸겠습니다.

섹션 2: 강령

구조에 셔터 애니메이션 효과를 가져오려면 CSS 및 JS 코드가 필요합니다. 이를 위해 Code 모듈을 사용할 것입니다. 오른쪽 열 상단에 코드 모듈을 추가합니다.

CSS 코드

스타일 태그 안에 다음 CSS 코드를 붙여넣습니다. 

/* transition duration of shutter animation */
.top-shutter,
.bottom-shutter {
  transition: transform 1s;
}
/* disables all transform options created in
Divi Builder for both shutters */
.divi-transform-none .top-shutter,
.divi-transform-none .bottom-shutter {
  transform: none;
}
.on-click {
  cursor:pointer;
}

JS 코드

그런 다음 스크립트 태그 안에 다음 JQuery 코드를 추가합니다. 

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");
 
    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });
 
    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");
 
    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });
 
    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

섹션 3: 분할 텍스트 셔터 애니메이션 디자인

이제 디자인의 첫 번째 섹션을 복제하여 첫 번째 셔터 애니메이션을 만듭니다.

추가: 상단 셔터 변환 속성

일반적으로 CSS Transform 속성을 사용하여 애니메이션을 만들 때 처음에는 해당 요소에 대한 변형 스타일이 없습니다. 그런 다음 요소 위로 마우스를 가져가면 해당 스타일을 볼 수 있습니다. Divi에서는 전체 프로세스를 역순으로 수행합니다. 먼저 Divi Builder를 사용하여 해당 요소를 변환합니다. 이것의 장점은 모든 것을 시각적으로 편집할 수 있다는 것입니다. 그런 다음 스타일 지정이 완료되면 처음에는 CSS 클래스를 사용하여 비활성화합니다. 그런 다음 사용자가 오버레이와 상호 작용할 때 켜거나 끕니다.

상단 셔터에 변형 디자인을 추가하려면 상단 셔터 텍스트 모듈 설정을 열고 다음을 업데이트하십시오.

  • 변환 배율(X 및 Y): 150%
  • 변환 Y축 변환: -101%
  • 변환 원점: 상단 중앙

모든 것을 올바르게 편집하면 애니메이션 전환 후 전체 이미지가 노출되기를 원하기 때문에 상단 셔터 텍스트가 더 이상 표시되지 않습니다.

추가: 하단 셔터 변환 속성

하단 셔터의 경우 다음 변환 디자인 옵션을 업데이트합니다.

  • 변환 배율(X 및 Y): 150%
  • Y축 변환: 101%
  • 변환 원점: 하단 중앙

추가: Transform 속성을 비활성화하는 CSS 클래스(초기)

셔터 애니메이션에 대한 변형 속성을 디자인한 후에는 작은 CSS 클래스를 사용하여 변형 디자인을 비활성화할 것임을 이미 알고 있습니다. 이전에 추가한 사용자 정의 CSS 코드로 인해 디자인은 변환 디자인 없이 표시됩니다.

추가: 온 클릭 기능

첫 번째 애니메이션은 호버 효과였습니다. 따라서 호버링은 실제로 이미지와 텍스트 위로 마우스 커서를 사용하여 애니메이션을 트리거합니다. 이제 호버링 없이 마우스 클릭으로 이 작업을 수행하는 방법을 살펴보겠습니다.
매우 간단합니다. "on-hover" 명령을 생략하고 "on-click" 명령을 섹션에 추가합니다.

  • CSS 클래스: 셔터 열 클릭 시 divi-transform-none

따라서 디자인은 다음과 같이 보일 것입니다.

애니메이션 반전

이제 원하는 경우 전체 이미지가 노출된 상태로 유지되고 마우스를 가져가면 텍스트가 표시되는 애니메이션을 만들 수 있습니다. "divi-transform-none" CSS 클래스를 제거하여 이러한 애니메이션을 쉽게 얻을 수 있습니다.

또 다른 디자인

여기에 또 다른 디자인이 있습니다.

셔터 업데이트

각 셔터 템플릿에서 상단 및 하단 텍스트 모듈을 선택합니다. 그런 다음 둘 다에 대한 요소 설정을 열고 다음을 업데이트합니다.

  • 배경: #ffffff
  • 텍스트 텍스트 색상: #000000
  • 혼합 모드: 화면

최종 디자인

최종 디자인은 다음과 같습니다.

결론

분할 텍스트 셔터 디자인을 포함한 모든 디자인은 Divi를 통해 매우 쉽게 수행할 수 있습니다. 그것은 방문자를 유치하는 매우 효과적인 방법입니다. 오늘의 튜토리얼이 웹사이트 디자인에 새로운 차원을 더해주기를 바랍니다. 이 튜토리얼이 마음에 들면 댓글 상자에 알려주는 것을 잊지 마십시오.

Divi WordPress Theme