Divi의 모든 요소에 호버 틸트 효과를 추가하는 방법

게시 됨: 2021-08-12

웹 디자인에 호버 틸트 효과를 추가하는 것은 Divi 웹사이트에 생기를 불어넣는 재미있고 매력적인 방법 중 하나입니다. 일반적으로 이러한 유형의 디자인에는 플러그인 또는 고급 코드(예: 이 튜토리얼)가 필요합니다. 그러나 이 프로세스는 Tilt.js(jQuery에 대한 가벼운 호버 기울기 효과)를 사용하면 훨씬 쉽습니다. Tilt.js를 사용하면 몇 분 안에 모든 항목에 호버 틸트 효과를 쉽게 적용할 수 있습니다.

이 튜토리얼에서는 Divi의 모든 요소에 호버 틸트 효과를 추가하는 방법을 보여 드리겠습니다. tilt.js jQuery 스니펫과 Divi 빌더의 조합을 사용하여 이미지, 모듈 열, 행 등에 인상적인 호버 기울기 효과를 추가하는 방법을 보여줍니다. 놀라운 3D 시차 효과를 추가하는 방법도 보여드리겠습니다.

시작하자!

엿보기

이 튜토리얼의 기능에 대한 라이브 데모를 보려면 이 codepen을 확인하십시오.

그리고 이 튜토리얼에서 만들 디자인을 간단히 살펴보겠습니다.

무료로 레이아웃 다운로드

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

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

무료로 다운로드

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

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

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

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

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

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

divi 알림 상자

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

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

시작하는 데 필요한 것

확장 코너 탭

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

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

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

Tilt.js 사용을 위한 기본 사항

Tilt.js는 jQuery를 위한 가벼운 시차 호버 틸트 효과입니다. jQuery 몇 줄만 있으면 페이지의 모든 요소에 호버 틸트 효과를 추가할 수 있습니다. 최대 10개의 옵션(문서 참조)이 제공되어 기울기 효과 디자인과 스케일 및 아름다운 눈부심 효과를 포함한 기능을 제어하기 위해 쉽게 추가할 수 있습니다.

가장 기본적인 수준에서, 일단 tilt.js 라이브러리에 접근하면, 호버에서 기울이고 싶은 요소에 CSS 클래스를 추가한 다음, 간단한 jQuery 스니펫을 사용하여 동일한 클래스를 가진 jQuery 객체에 기울이기 기능을 적용할 수 있습니다 .

예를 들어 "et-js-tilt"라는 이미지 모듈에 사용자 정의 CSS 클래스를 추가한다고 가정해 보겠습니다.

그런 다음 이미지에 호버 틸트 효과를 추가하기 위해 다음 jQuery 스니펫을 추가하기만 하면 됩니다. 

$(".et-js-tilt").tilt();

그런 다음 기울기 효과에 대한 추가 옵션을 설정할 수 있습니다. 예를 들어 다음 코드 스니펫을 사용하여 스케일 및 눈부심 효과를 추가할 수 있습니다. 

$(".et-js-tilt").tilt({
  glare: true,
  maxGlare: 0.7,
  scale: 1.1
});

결과는 이것이 될 것입니다 ...

고급 효과를 위해 자식 요소에 transform:translateZ()를 추가하여 3D 시차 효과를 얻을 수 있습니다. 나중에 더 자세히 설명합니다.

이제tilt.js를 사용하는 방법에 대한 기본 이해를 얻었으므로 Divi에서 사용하는 방법을 살펴보겠습니다.

Divi의 모든 요소에 호버 틸트 효과를 추가하는 방법

Divi 모듈에 틸트 호버 효과 추가하기

기본 일반 섹션에 3열 행을 추가합니다.

add-hover-tilt-effect-in-divi

이미지 모듈 추가

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

참고: 원하는 모듈을 사용할 수 있습니다. 이미지 모듈일 필요는 없습니다.

add-hover-tilt-effect-in-divi

원하는 이미지를 업로드하세요. 나는 집에서 만든 쿠키 레이아웃 팩에서 하나를 사용하고 있습니다.

add-hover-tilt-effect-in-divi

이미지 모듈 클래스 추가

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

  • CSS 클래스: et-js-tilt

이 클래스는 나중에 틸트 기능의 선택기로 사용됩니다.

add-hover-tilt-effect-in-divi

이미지 모듈 복사 및 붙여넣기

그런 다음 이미지 모듈을 복사하여 나머지 두 열에 하나씩 붙여넣습니다.

add-hover-tilt-effect-in-divi

원하는 경우 중복 이미지를 새 이미지로 교체할 수 있습니다. 각 이미지 모듈에 CSS 클래스 "et-js-tilt"가 있는지 확인하십시오.

tilt.js JQuery 추가

이미지를 기울이는 데 필요한 tilt.js 라이브러리와 코드 스니펫을 추가하기 위해 코드 모듈을 사용할 것입니다.

먼저 기존 행 아래에 새 1열 행을 추가합니다.

add-hover-tilt-effect-in-divi

그런 다음 새 행에 코드 모듈을 추가합니다.

add-hover-tilt-effect-in-divi

다음으로 CDN(https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.js)에서 tilt.js를 가져오는 스크립트 를 추가하여 tilt.js 라이브러리에 액세스해야 합니다. min.js). 코드 상자에 다음 스크립트 를 붙여넣습니다.

라이브러리를 가져오려면 스크립트 태그 내에서 다음 src를 사용하십시오. 

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

다음과 같이 표시되어야 합니다.

add-hover-tilt-effect-in-divi

이를 사용할 코드를 추가하기 전에 tilt.js를 가져오는 것이 중요합니다. 따라서 스크립트 가 tilt.js를 가리키는 뒤에 추가해야 하는 JQuery를 래핑하는 데 필요한 스크립트 태그를 추가합니다. 그런 다음 스크립트 태그 사이에 다음 JQuery를 붙여넣습니다. 

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {

    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });

  }
});

add-hover-tilt-effect-in-divi

틸트() 함수는 브라우저 너비가 980px보다 클 때 실행되는 if 문 안에 있습니다. 이렇게 하면 효과가 데스크탑에서만 발생하는지 확인합니다.

결과는 다음과 같습니다.

행에 틸트 호버 효과 추가

앞서 언급했듯이 이 호버 기울기 효과를 Divi의 모든 요소에 추가할 수 있습니다. 여기에는 전체 행이 포함됩니다. 또한 행 내부의 각 모듈에 대한 기울기 효과를 유지하면서 행에 기울기 효과를 추가할 수 있습니다.

방법은 다음과 같습니다.

행 복제 및 행에 고유 CSS 클래스 추가

기존 이미지 행을 복제한 다음 복제 행의 설정을 엽니다. 고급 탭에서 다음과 같이 행에 고유한 CSS 클래스를 지정합니다.

  • CSS 클래스: et-row-js-tilt

add-hover-tilt-effect-in-divi

jQuery 추가

그런 다음 이전 틸트 기능 아래에 다음 jQuery를 추가하여 행에 별도의 틸트 기능을 적용합니다.

    $(".et-row-js-tilt").tilt({
      scale: 1,
      perspective: 1200,
    });

이 틸트 효과의 경우 스케일을 다시 1로 가져오고 틸트가 더 미묘하도록 원근 값을 늘렸습니다.

add-hover-tilt-effect-in-divi

결과는 다음과 같습니다.

행에 마우스를 가져갈 때 활성화되는 기울기 기능이 있고 각 이미지 모듈에도 이전에 추가한 동일한 기울기 효과가 있습니다. 이것이 중첩된 기울기 효과 인스턴스를 적용하는 방법입니다.

여러 Divi 모듈이 있는 열에 틸트 호버 효과 추가하기

어떤 경우에는 모듈 열에 기울기 효과를 추가하는 것이 도움이 됩니다. 이렇게 하면 Divi를 사용하여 한 열 내에서 여러 모듈을 설계한 다음 이러한 모든 요소를 ​​하나의 단위로 기울일 수 있습니다. 이를 수행하는 방법에 대한 예를 제공하기 위해 이미지 모듈, 텍스트 모듈 및 버튼 모듈이 있는 열에 틸트 호버 효과를 추가할 것입니다.

새 행 추가

시작하려면 이전 이미지 행 아래에 새로운 1/6 2/3 1/6 열 행을 만듭니다.

add-hover-tilt-effect-in-divi

이미지 모듈 추가

2열(가운데 열) 내부에 새 이미지 모듈을 추가합니다.

add-hover-tilt-effect-in-divi

모듈에 이미지를 업로드하고 이미지 정렬을 중앙으로 설정합니다.

add-hover-tilt-effect-in-divi

텍스트 모듈 추가

이미지 모듈 아래에 다음 H2 제목이 있는 텍스트 모듈을 추가합니다. 

<h2>Local Organic</h2>

그런 다음 다음과 같이 제목 2 스타일을 업데이트합니다.

  • 제목 2 글꼴: Berkshire Swash
  • 제목 2 텍스트 정렬: 가운데
  • 제목 2 텍스트 색상: #000000
  • 제목 2 텍스트 크기: 60px(데스크톱), 32px(태블릿), 20px(휴대전화)
  • 제목 2 줄 높이: 1.2em

add-hover-tilt-effect-in-divi

버튼 모듈 추가

텍스트 모듈 아래에 버튼 모듈을 추가하십시오.

"회사 소개"를 읽도록 버튼 텍스트를 업데이트하고 다음과 같이 디자인 설정을 업데이트합니다.

  • 버튼 정렬: 중앙
  • 버튼 텍스트 크기: 18px
  • 버튼 텍스트 색상: #fff
  • 버튼 배경색: #000
  • 버튼 테두리 너비: 0px
  • 버튼 테두리 반경: 100px
  • 버튼 글꼴: Quicksand
  • 버튼 글꼴 두께: 굵게
  • 패딩: 상단 16픽셀, 하단 16픽셀, 왼쪽 30픽셀, 오른쪽 30픽셀
  • 박스 섀도우: 스크린샷 참조

add-hover-tilt-effect-in-divi

열 설정

세 개의 모듈이 완료되면 해당 모듈의 상위 열(2열)에 대한 설정을 열고 다음을 업데이트합니다.

  • 배경색: #f5cee6

add-hover-tilt-effect-in-divi

  • 패딩: 50px(상단 및 하단), 20px(좌우)

add-hover-tilt-effect-in-divi

열에 CSS 클래스 추가

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

  • CSS 클래스: et-column-js-tilt

add-hover-tilt-effect-in-divi

기둥에 기울기 효과를 적용하기 위해 jQuery 추가하기

열에 기울기 효과를 추가하기 위해 열 CSS 클래스를 대상으로 하는 또 다른 유사한 jQuery 스니펫을 추가할 수 있습니다. 행을 대상으로 하는 이전 스니펫 아래에 다음 스니펫을 붙여넣습니다.

    $(".et-column-js-tilt").tilt({
      scale: 1.1,
      perspective: 1000,
    });

add-hover-tilt-effect-in-divi

다음은 최종 결과입니다.

내부 요소에 3D 시차 효과 추가

보다 발전된 호버 틸트 효과를 위해 기둥의 내부 모듈에 3D 시차 효과를 추가할 수 있습니다. Perspective 와 transform:translateZ() 의 조합을 사용하면 호버 틸트 효과가 활성화될 때 열 내의 각 모듈이 3D 공간에서 튀어나오도록 할 수 있습니다.

방법은 다음과 같습니다.

이전 행 복제

먼저 중간 열에 기울기 효과를 추가하여 이전 행을 복제합니다.

add-hover-tilt-effect-in-divi

고유한 열 클래스 추가

그런 다음 다음과 같이 고유한 CSS 클래스로 중간 열(2열)을 업데이트합니다.

  • CSS 클래스: et-column-js-tilt-3d

add-hover-tilt-effect-in-divi

맞춤 CSS

내부 모듈이 3d 효과를 유지하도록 하려면 열의 기본 요소에 다음 사용자 정의 CSS를 추가하십시오. 

transform-style: preserve-3d;

jQuery 및 CSS 추가

그런 다음 다음과 같이 열을 대상으로 하는 이전 기울기 함수 스니펫 아래에 jQuery 스니펫을 몇 개 더 추가합니다.

    const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
      scale: 1.1,
      perspective: 1000,
    });
    columnTilt3d.on("tilt.mouseEnter", function (e) {
      $(e.target).addClass("tilt-active");
    });
    columnTilt3d.on("tilt.mouseLeave", function (e) {
      $(e.target).removeClass("tilt-active");
    });

이 jQuery는 이전 예제와 마찬가지로 열에 또 다른 기본 기울기 기능을 추가합니다. 그러나 코드는 기울기 효과가 활성화될 때마다 새 클래스("기울기 활성")를 열로 전환합니다. 열 위로 마우스를 가져갈 때 이 새 클래스를 사용하여 각 모듈에 transform: translateZ() 값을 적용할 수 있습니다. 이렇게 하면 팝아웃 3D 시차 효과가 생성됩니다.

이렇게 하려면 다음 사용자 정의 CSS를 코드 상자/콘텐츠 상단에 추가하고 CSS를 필요한 스타일 태그로 감싸야 합니다.

  .et-column-js-tilt-3d.tilt-active .et_pb_image {
    transform: translateZ(100px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_text {
    transform: translateZ(40px);
  }
  .et-column-js-tilt-3d.tilt-active .et_pb_button {
    transform: translateZ(50px);
  }

add-hover-tilt-effect-in-divi

이제 최종 결과를 확인하십시오. 3개의 모듈이 틸트 효과 동안 회전할 때 3D 공간에서 튀어나오는 것을 확인하십시오.

최종 결과

다음은 예제의 최종 결과를 다시 한 번 살펴보겠습니다.

마지막 생각들

Tilt.js가 제공하는 호버 틸트 효과는 실험하는 것이 정말 재미있습니다. 이 튜토리얼에서 몇 가지 기본 예제를 사용했지만 이러한 호버 틸트 효과를 사전 제작된 레이아웃이나 귀하의 사이트에 적용하는 필드 데이를 쉽게 가질 수 있습니다. 즐기다!

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

건배!