Divi: 요소 위로 마우스를 가져갈 때 기울기 효과를 추가하는 방법

년부터 에 탕 | Divi, Divi 자습서

틸트 효과를 추가하시겠습니까? Divi 페이지의 모든 요소에?

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

이 튜토리얼에서는 요소에 호버 틸트 효과를 추가하는 방법을 보여줍니다. Divi. jQuerytil.js 스니펫과 Divi 빌더의 조합을 사용하여 이미지, 모듈 열, 행 등에 멋진 호버 틸트 효과를 추가하는 방법을 보여 드리겠습니다. 

놀라운 3D 시차 효과를 추가하는 방법도 보여드리겠습니다.

시작하자!

측량

다음은 이 자습서에서 얻을 결과에 대한 간략한 개요입니다.

또한보십시오: Divi: 섹션 구분선 위로 마우스를 가져갈 때 콘텐츠를 표시하는 방법

시작하려면 무엇이 필요합니까?

WordPress 대시보드에서 페이지> 새로 추가 새 페이지를 만듭니다.

Divi

이해하기 쉬운 제목을 지정하고 클릭하십시오. Divi Builder 사용

그런 다음 클릭 건물 시작 (처음부터 구축)

그 후에 Divi에서 디자인을 시작할 빈 캔버스가 생깁니다.

Divi에서 모든 요소의 호버에 기울기 효과 추가

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

기본 일반 섹션에 XNUMX열 행을 추가하여 시작하겠습니다.

이미지 모듈 추가

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

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

원하는 이미지를 업로드하세요. 

이미지 모듈 클래스 추가

탭 아래 Advnaced, 다음 CSS 클래스를 추가합니다.

  • CSS 클래스: et-js-tilt

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

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

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

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

JQuery 라이브러리 "tilt.js" 추가

라이브러리를 추가하려면 틸트.js 이미지를 왜곡하는 데 필요한 코드 조각에 대해 Code 모듈을 사용합니다.

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

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

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

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

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

다음과 같아야 합니다.

수입하는 것이 중요 틸트.js 사용할 코드를 추가하기 전에. 따라서 스크립트가 가리키는 후 틸트.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,
    });
 
  }
});

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

결과는 다음과 같습니다.

라인에 틸트 호버 효과 추가

이전에 언급했듯이 이 호버 틸트 효과를 모든 Divi 요소에 추가할 수 있습니다. 여기에는 전체 라인이 포함됩니다. 

또한 행 내의 각 모듈에 대한 기울기 효과를 유지하면서 행에 기울기 효과를 추가할 수 있습니다.

방법은 다음과 같습니다.

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

기존 이미지 행을 복제한 다음 복제 행 설정을 엽니다. 탭 아래 Advnaced, 다음과 같이 라인에 고유한 CSS 클래스를 지정하십시오.

  • CSS 클래스: et-row-js-tilt
#이미지_제목

jQuery 추가

그런 다음 이전 스큐 함수 아래에 다음 jQuery를 추가하여 라인에 별도의 스큐 함수를 적용합니다.

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

이 틸트 효과를 위해 스케일을 1로 줄이고 원근 값을 높여 틸트가 더 미묘하다는 점에 유의하십시오.

결과는 다음과 같습니다.

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

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

어떤 경우에는 모듈 열에 기울이기 효과를 추가하는 것이 유용합니다. 이렇게 하면 Divi를 사용하여 한 열에 여러 모듈을 디자인한 다음 이러한 모든 요소를 ​​단일 단위로 각도를 지정할 수 있습니다. 

이 작업을 수행하는 방법에 대한 예를 제공하기 위해 이미지 모듈, 텍스트 모듈 및 버튼 모듈이 포함된 열에 마우스 오버 시 기울이기 효과를 추가합니다.

새 행 추가

시작하려면 다음 열 구조로 새 행을 만듭니다.

이미지 모듈 추가

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

모듈에 이미지를 업로드합니다.

#이미지_제목

이미지의 정렬을 중앙으로 설정합니다.

텍스트 모듈 추가

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

<h2>Local Organic</h2>
#이미지_제목

다음으로 H2 제목 스타일을 다음과 같이 업데이트합니다.

  • 글꼴: Berkshire Swash
  • 텍스트 정렬: 가운데
  • 텍스트 색상: #000000
  • 크기: 60px
  • 줄 높이: 1,2em
#이미지_제목

버튼 모듈 추가

Text 모듈 아래에 Button 모듈을 추가합니다.

"자세히 알아보기..."를 읽도록 버튼 텍스트를 업데이트합니다.

#이미지_제목

다음과 같이 개인화 설정을 업데이트합니다.

  • 버튼 정렬: 중앙
  • 버튼에 사용자 정의 스타일 사용
  • 버튼 텍스트 크기: 18px
  • 텍스트 색상: #fff
  • 버튼 배경: #000
#이미지_제목
  • 버튼 테두리 너비: 0픽셀
  • 테두리 반경: 100px
  • 버튼 글꼴: Quicksand
  • 글꼴 두께: 굵게
#이미지_제목
  • 패딩(상단 및 하단): 16px
  • 패딩(좌우): 30px
#이미지_제목
  • 박스 섀도우: 스크린샷 참조
#이미지_제목

열 매개 변수

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

  • 배경: #f5cee6
#이미지_제목
  • 패딩(상단 및 하단): 50px
  • 패딩(좌우): 20px
#이미지_제목

열에 CSS 클래스 추가

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

  • CSS 클래스: et-column-js-tilt
#이미지_제목

열에 기울기 효과를 적용하는 jQuery 추가

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

행을 대상으로 하는 이전 코드 조각 아래에 다음 코드 조각을 붙여넣습니다.

$(".et-column-js-tilt").tilt({
  scale: 1.1,
  perspective: 1000,
});
#이미지_제목

최종 결과는 다음과 같습니다.

내부에 3D 시차 효과 추가

고급 호버 틸트 효과를 위해 내부 열 모듈에 3D 시차 효과를 추가할 수 있습니다. 

Perspective 와 transform:translateZ() 의 조합을 사용하여 틸트-온-호버 효과가 활성화될 때 각 열의 모듈이 3D 공간에 나타나도록 할 수 있습니다.

방법은 다음과 같습니다.

이전 줄 복제

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

#이미지_제목

단일 열 클래스 추가

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

  • CSS 클래스: et-column-js-tilt-3d
#이미지_제목

맞춤 CSS

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

transform-style: preserve-3d;
Divi를 사용한 기울기 효과

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는 이전 예제와 마찬가지로 열에 또 다른 기본 기울기 기능을 추가합니다. 

.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);
}
Divi를 사용한 기울기 효과

이제 최종 결과를 확인하십시오. 3개의 모듈이 틸트 효과 동안 회전할 때 XNUMXD 공간에 어떻게 나타나는지 확인하십시오.

읽기 : Divi: 섹션 구분선 위로 마우스를 가져갈 때 콘텐츠를 표시하는 방법

최종 결과

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

지금 DIVI를 다운로드하세요!!!

결론

에서 제공하는 호버 틸트 효과 틸트.js 실험하는 것이 정말 재미있습니다. 

이 튜토리얼에서 몇 가지 기본 예제를 사용했지만 이러한 호버 틸트 효과를 사전 제작된 레이아웃 중 하나 또는 귀하의 사이트에 적용하면 쉽게 야외 활동을 할 수 있습니다.

이 튜토리얼이 다음 Divi 프로젝트에 영감을 주기를 바랍니다. 우려 사항이나 제안 사항이 있으면 다음에서 저희를 찾으십시오. 댓글 섹션 그것을 논의하기 위해.

상담도 가능합니다 우리의 자원, 인터넷 사이트 제작 프로젝트를 수행하는 데 더 많은 요소가 필요하면 워드 프레스 블로그 제작 또는 Divi : 역대 최고의 워드 프레스 테마.

그러나 그동안, 이 기사를 다른 소셜 네트워크에서 공유하십시오.

...

포스터 르 논평

귀하의 이메일 주소는 공개되지 않습니다. 필수 필드는 표시됩니다 *

이 사이트는 원하지 않는 것을 줄이기 위해 Akismet을 사용합니다. 댓글 데이터 사용 방법에 대해 자세히 알아보기.