Divi로 동적 3D Mousemove 애니메이션 효과를 만드는 방법

Rifat Oct 21, 2021

Divi Builder 의 도움으로 우리는 독특하고 창의적인 많은 디자인을 할 수 있습니다. 오늘 우리는 마우스 커서의 움직임과 상호 작용하는 Divi 비주얼 페이지 빌더를 사용하여 동적 3D 애니메이션을 만드는 방법을 볼 것입니다. 일반적으로 개체를 가리키거나 애니메이션을 클릭하지만 여기서는 마우스 움직임에 따라 다른 방향으로 움직이는 개체를 애니메이션합니다. 또한 대화형 애니메이션을 수행하고 디자인에 생명을 불어넣는 개체에 호버링 3D 효과를 추가하는 방법을 볼 수 있습니다!

디자인에 Divi 빌더 를 사용하고 나중에 CSS와 jQuery 코드를 추가하여 디자인을 살아있게 만드는 애니메이션 기능을 만들 것입니다! 이 디자인을 사용하여 방문자에게 새로운 방식으로 제품을 표시할 수 있습니다!

최종 디자인

계획한 대로 모든 것이 제대로 진행된다면 최종 디자인은 그렇게 보일 것입니다.

Divi에서 동적 3D 마우스 이동 효과 만들기

작업 1: 페이지 설정

웹 페이지에서 이 효과를 만들고 싶기 때문에 최신 버전의 Divi를 이미 설치했다고 생각합니다. 이제 대시보드에서 "페이지 추가"하고 필요에 따라 제목을 지정하고 Divi 빌더로 확장하십시오.

놀라운 웹사이트 만들기

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

지금 시작

이제 "처음부터 만들기"를 선택하고 조심스럽게 시작하십시오.

작업 2: 호버 컨테이너 및 카드 만들기

호버 시 3D 애니메이션을 활성화하기 위해 행을 대상으로 지정합니다. 우리는 그것을 "호버 컨테이너"라고 부를 것입니다. 반면에 열은 행 위로 마우스를 가져가는 동안 자식 요소와 함께 움직이는 카드 역할을 합니다.

섹션 스타일링

기본 섹션 설정을 열고 다음을 업데이트하십시오.

  • 배경색 - RGBA(68,55,99,0.1). 여기서 0.1은 불투명도입니다.
  • 상단과 하단에 "7vh" 패딩을 추가합니다.

호버 컨테이너

이제 준비된 섹션에 1열 행을 추가합니다.

이제 다음 변경 사항으로 행 설정을 업데이트하십시오.

  • "사용자 지정 거터 너비"를 활성화하고 값을 1로 변경합니다.
  • 폭 100%
  • 최대 너비: 70%(데스크톱), 60%(태블릿), 50%(모바일)
  • 패딩: 상단 및 하단에 7vh, 왼쪽 및 오른쪽에 5vw.

고급 탭에서 사용자 정의 CSS 클래스를 추가하십시오.

  • CSS 클래스: et-hover-container

또한 기본 요소에 CSS 코드를 추가합니다.

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

카드

행 업데이트를 마친 후 열에 대한 설정을 열어 카드의 스타일을 지정하십시오.

  • 배경색 #ffffff
  • 패딩: 상단 7vh, 하단 7vh, 왼쪽 5%, 오른쪽 5%
  • 둥근 모서리: 30px
  • 박스 섀도우: 스크린샷 참조
  • 상자 그림자 수직 위치: 0px
  • 상자 그림자 흐림 강도: 80px
  • 그림자 색상: rgba(0,0,0,0.2)

고급 탭에서 사용자 정의 CSS 클래스를 추가하십시오.

  • CSS 클래스: et-mousemove-card

또한 이 CSS 코드를 기본 요소 아래에 추가합니다.

max-width: 600px;

이제 가로 및 세로 오버플로에 대해 모두 표시되도록 오버플로 속성을 설정합니다.

작업 3: 카드 요소 만들기

로고와 함께 원형 배경

카드의 첫 번째 요소에 대해 기본 제품 이미지 뒤에 위치할 로고가 포함된 원형 배경을 추가할 것입니다.

이제 열에 "텍스트"를 추가하고 기본 텍스트를 제거하여 본문을 비워 두십시오.

그라디언트 배경을 추가할 시간입니다.

  • 그라데이션 배경 왼쪽 색상 #443763
  • 그라데이션 배경 오른쪽 색상 #EA3900
  • 그라디언트 방향을 90도로 설정

그라데이션 색상과 함께 로고를 배경 이미지로 추가합니다. 이미지 크기는 60x60픽셀이어야 하며 배경 이미지 크기 값을 "실제 크기"로 설정합니다.

"디자인" 탭에서 "크기 조정" 섹션에서 다음과 같이 값을 변경합니다. 너비 값을 데스크탑의 경우 160px, 태블릿의 경우 150px, 스마트폰의 경우 80px로 설정합니다.

또한 높이 값을 너비와 동일하게 설정합니다. 마지막으로 "테두리" 섹션에서 둥근 모서리를 값 80%로 설정합니다.

"고급" 탭에서 아래와 같이 위치를 업데이트합니다.

  • 위치 : 절대
  • 위치 : 탑센터
  • 수직 오프셋: 15%

카드 이미지

이제 로고 부분이 완성되었으므로 카드에 제품 이미지를 추가해 보겠습니다. 이전 텍스트 모듈 아래에 새 이미지 모듈을 추가합니다.

이제 제품의 이미지를 업로드하십시오. 이미지가 투명하고 Png 형식인지 확인하십시오. 여기서는 레드 페라리의 이미지를 사용하고 있습니다.

"디자인" 탭에서 아래와 같이 값을 변경합니다.

  • 이미지 정렬: 중앙
  • 폭: 90%
  • 여백: 12vh 상단 및 5vh 하단(필요에 따라 값 조정)

"고급" 탭 섹션에서 이미지에 대한 사용자 정의 CSS 클래스를 추가하십시오.

  • CSS 클래스: et-card-image

자동차 제목

이제 우리는 카드의 제목을 만들 것입니다. 자동차 이미지를 제자리에 놓고 이미지 아래에 텍스트 모듈을 추가하여 카드 제목을 생성해 보겠습니다.

본문에서 기본 텍스트를 제거하고 아래 주어진 HTML의 H2 제목을 추가합니다.

>h2span style="color: #ea3900:"/span/h2

이제 디자인 섹션에서 다음 값을 변경합니다.

  • 제목 2 글꼴: Bebas Neue
  • 제목 2 텍스트 정렬 : 가운데
  • 제목 2 텍스트 색상: #443763
  • 제목 2 텍스트 크기: 데스크톱의 경우 75픽셀, 태블릿의 경우 60픽셀, 모바일의 경우 45픽셀.
  • 제목 2 글자 간격 : 0.05em
  • 여백 : 하단에서 4vh

"고급 섹션"에서 사용자 정의 CSS 클래스를 추가하십시오.

  • CSS 클래스: et-card-heading

카드 정보

이제 카드에 대한 정보를 추가하겠습니다. 정보를 위한 또 다른 텍스트 모듈을 추가할 것입니다. 그래야 각각에 다른 3D 애니메이션 효과를 추가할 수 있기 때문입니다. 제목 텍스트 모듈 아래에 새 텍스트 모듈을 추가해 보겠습니다.

이제 본문에 다음 텍스트 내용을 추가합니다.

>pbr/p

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

  • 텍스트 글꼴 두께: 반 굵게
  • 텍스트 크기 : 18px(데스크톱) 및 16px(태블릿 및 휴대폰)
  • 텍스트 줄 높이 : 1.8em
  • 텍스트 정렬 : 가운데
  • 마진 : 4vh

이제 이 모듈에 사용자 정의 CSS 클래스를 추가하십시오.

  • CSS 클래스: et-card-info

버튼

이제 정보 텍스트 모듈 아래에 새 버튼 모듈을 추가합니다. 그러면 카드에 버튼이 추가됩니다.

버튼 설정의 "콘텐츠" 탭에서 버튼 텍스트를 변경합니다.

  • 버튼 텍스트: 제안을 합니다.

"디자인" 탭에서 아래와 같이 버튼의 스타일을 지정합니다.

  • 버튼에 사용자 정의 스타일 사용: 예
  • 버튼 텍스트 크기: 25px(데스크톱), 20px(태블릿), 16px(휴대폰)
  • 버튼 텍스트 색상: #ffffff
  • 버튼 배경색: #443763
  • 버튼 테두리 너비: 0px
  • 버튼 테두리 반경: 30px
  • 버튼 문자 간격: 0.1em
  • 버튼 글꼴: Beba's Neue
  • 패딩(데스크톱): 위쪽 0.5em, 아래쪽 0.5em, 왼쪽 3em, 오른쪽 3em
  • 패딩(전화): 위쪽 0.5em, 아래쪽 0.5em, 왼쪽 2em, 오른쪽 2em

이제 사용자 정의 CSS 클래스를 추가하십시오.

  • CSS 클래스: et-card-button

지금까지의 결과

다음은 애니메이션이 없는 최종 디자인 출력입니다.

이제 이 디자인에 생명을 불어넣기 위해 몇 가지 사용자 지정 코드를 추가합니다.

작업 4: CSS 및 JQuery 사용자 정의 코드 추가

디자인이 완료되었으므로 이제 CSS 및 JQuery 코드를 추가하여 동적 3D 마우스 이동 애니메이션 효과를 주기 위해 새로 생성된 열과 카드 요소를 제공합니다.

이렇게 하려면 버튼 모듈 아래에 새 코드 모듈을 추가합니다.

상자에 지정된 사용자 정의 CSS 코드를 붙여넣고 "스타일" 태그에 코드를 래핑해야 합니다.

>style/style

CSS 코드는 코드 모듈의 콘텐츠 탭 아래에 다음과 같이 표시됩니다.

CSS 아래에 다음 JQuery를 추가하고 코드가 "Script" 태그 안에 있는지 확인합니다.

>script/script

다음 코드는 코드 패널에 다음과 같이 표시되어야 합니다.

이제 전체 작업을 저장하고 라이브 페이지에서 전체 작업을 확인하십시오.

최종 출력

따라서 전체 디자인은 다음과 같습니다. 멋져요!

마지막 단어

오늘 튜토리얼에서 본 3D 애니메이션은 매우 쉽고 재미있게 배울 수 있습니다. 이것은 마우스 움직임으로 제어할 수 있는 독특하고 고급 애니메이션 효과입니다. 간단한 CSS 및 JQuery 코딩을 통해 이를 디자인할 수 있습니다. 의심할 여지 없이 Divi 는 강력한 페이지 빌더이며 사용자 정의 코딩을 통해 웹 사이트에 마법 같은 디자인을 가져올 수 있습니다.

Divi WordPress Theme