산소 빌더 리피터를 위한 독특한 호버 효과

게시 됨: 2022-04-10

이 튜토리얼에서는 Oxygen Builder Repeaters에 표시되는 콘텐츠에 대한 고유한 호버 효과를 만들 것입니다. Codrops의 "왜곡 호버 효과"를 모델로 하고 해당 리소스의 소스 코드를 사용하는 이 효과는 방문자가 반복 레이아웃 셀을 가리킬 때 사용자 정의 이미지에 왜곡된 페이드를 생성합니다.

이 튜토리얼은 Oxygen Builder의 몇 가지 멋진 개념을 통합할 것입니다.

  • 고급 중계기 기술
  • ACF 필드 그룹 및 Oxygen Builder와의 수동 통합
  • 기본 CSS 그리드
  • 동적 속성
  • 코드 블록 사용 및 중급 JS

한 걸음 더 나아가 이 기능을 100% 동적 기능으로 만들 것입니다. 즉, 설정하고 잊어버릴 것입니다. 각 셀에 대해 특정 효과를 초기화할 필요가 없습니다!

Follow Follow(소스 다운로드):

참고: 이것은 개념 증명이며 프로덕션 사이트에서 사용하려면 최적화가 필요할 수 있습니다.

다른 두 가지:

  • Oxygen Builder 과정을 시작합니다. 여기에서 자세히 알아보고 대기자 명단에 합류할 수 있습니다.
  • 이것은 우리의 멋진 Facebook 그룹에서 요청한 자습서였습니다. 여러분의 참여를 원합니다!

효과 데모:

demo_iso_effect_oxygen_builder

1단계: ACF 필드

우리는 이것을 100% 동적으로 만들고 최종 사용자가 쉽게 편집할 수 있도록 ACF를 사용할 것입니다. 필드 그룹을 만들고 호버 이미지와 변위 이미지를 추가합니다. 초기 이미지는 게시물의 추천 이미지가 됩니다. 호버 이미지는 방문자가 리피터 게시물 위로 마우스를 가져갈 때 효과가 사라지는 것입니다.

변위 이미지는 두 이미지 간의 고유한 모프/페이드 애니메이션을 만드는 데 사용됩니다. 이 예에서는 변위에 대해 다음 이미지를 사용합니다.

7
8

실제로 모든 이미지를 사용할 수 있지만 일반적으로 질감이 좋은 흑백 이미지가 가장 좋습니다. 이 방법으로 실험하는 것은 쉽습니다!

등방성-2022-04-07-at-12-11-43
필드 그룹을 만들고 게시물 유형에 할당합니다.
등방성-2022-04-07-at-12-11-24
각 이미지 반환 형식은 이미지 URL이어야 합니다.

새 게시물을 추가할 때 필드 그룹 및 관련 이미지는 다음과 같습니다.

등방성-2022-04-07-at-12-53-46
세 개의 이미지 중 하나를 쉽게 교체할 수 있습니다.

2단계: 효과를 위한 구조 만들기

핵심적으로 우리는 Codrops 예제의 소스 코드를 약간 수정하여 복사하고 있습니다.

<div class="grid"> <!-- 이것은 리피터입니다 --> <div class="grid__item grid__item--bg"> <!-- 이것은 리피터의 div입니다 --> <div class=" grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- 이것은 "이미지 래퍼입니다. div" --> <img src="img/Img22.jpg" alt="이미지"/> <img src="img/Img21.jpg" alt="이미지"/> </div> <div 클래스=" grid__item-content"> <!-- "콘텐츠 래퍼 div> --> <span class="grid__item-meta">캘리포니아</span> <h2 class="grid__item-title">이동</h2 > <h3 class="grid__item-subtitle"> <span>캘리포니아의 마지막 빈 점프 지점</span> <a class="grid__item-link" href="#">자세히 알아보기</a> </h3> </ div> </div> </div>
등방성-2022-04-07-at-13-12-26

Oxygen Builder 요소를 사용하여 위의 HTML 구조를 복제하기만 하면 됩니다. 일부 CSS를 추가하고 JS가 특정 요소를 식별하는 데 사용하므로 위의 HTML 예제에서 클래스를 추가하는 것을 잊지 마십시오. 이러한 클래스를 변경하는 경우 그에 따라 CSS 및 JS를 업데이트해야 합니다.

리피터는 CSS 그리드를 사용하여 많은 작업 없이 모든 셀의 간격을 균일하게 합니다.

등방성-2022-04-07-at-13-25-06

3단계: 동적으로 만들기

동적으로 구성할 몇 가지 사항이 있습니다. 먼저 repeater가 WordPress Post 유형을 쿼리하도록 합니다.

다음으로 날짜와 게시물 제목을 동적으로 설정합니다.

등방성-2022-04-07-at-13-17-17

이제 3개의 이미지를 설정하겠습니다. 여기서 상황이 복잡해질 수 있습니다. 이미지 1의 URL을 추천 이미지 URL로 설정합니다.

등방성-2022-04-07-at-13-20-11

이미지 2의 URL을 ACF에서 설정한 hover 이미지로 설정합니다. 이 튜토리얼의 경우 ACF 필드가 "동적 데이터 삽입" 팝업에 표시되지 않았습니다(버그 Oxygen Builder 4.0 베타 2로 인한 것일 수 있음). 다음과 같은 경우가 발생하면 쉬운 해결 방법이 있습니다.

1 - 동적 데이터 삽입

2 - PHP 함수 반환 값 선택

등방성-2022-04-07-at-13-20-47

3 - get_field('fieldname') 를 사용하여 ACF 필드 내용을 수동으로 삽입

등방성-2022-04-07-at-13-21-30

마지막으로 효과가 모프 전환에 사용할 왜곡 이미지를 설정해야 합니다. 이것은 JS가 읽고 효과에 통합하는 데이터 속성으로 HTML에 삽입됩니다. 위의 HTML에서 효과를 변경하기 위해 편집할 수 있는 여러 속성이 있음을 알 수 있습니다.

<div class="grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- 이 "이미지 래퍼 div" --> ... </div>입니다.

동적으로 만들 필요가 있는 중요한 것은 ACF를 사용하여 게시물에 설정된 이미지의 URL을 갖는 데이터 변위입니다. 다른 세 가지 속성을 하드 코딩했지만 아래에 설명된 동일한 방법을 사용하여 이러한 사용자도 편집 가능하게 만들 수 있습니다.

이미지 래퍼 요소(두 개의 동적 이미지 주변의 div)로 이동합니다. 고급 -> 속성을 ​​클릭하고 다음을 추가합니다.

등방성-2022-04-07-at-13-28-05

data-displacement 의 경우 콘텐츠에서 data+ 버튼을 클릭하고 해당 ACF 필드를 삽입하여 이를 동적으로 만들 것입니다.

프론트엔드 HTML은 다음과 같이 표시되며 JS는 이 모든 데이터(ACF를 통해 동적이며 사용자 편집 가능)를 사용하여 WordPress에서 멋진 변위 호버 효과를 생성합니다.

등방성-2022-04-07-at-13-46-39

4단계: CSS, 라이브러리 및 JS 추가

Universal CSS 스타일시트에 다음 CSS를 추가합니다. 모든 것이 제대로 작동하도록 하려면 추가 CSS 스타일을 사용해야 할 수도 있습니다.

.grid__item { 오버플로:숨김; 위치:상대적; } .grid__item-content { z-색인:5; } .grid__item-img { 표시: 블록; 높이: 100%; 너비: 100%; } .grid__item-img 캔버스 { 높이: 100%; 위치:절대; 상단:0; z-인덱스:1; } .grid__item-img img { 높이: 100%; 디스플레이: 블록; } /* 이것은 JS가 작동하지 않는 경우의 대체입니다. */ .grid__item-img img:nth-child(2) { position: absolute; 상단: 0; 왼쪽: 0; 불투명도: 0; 전환: 불투명도 0.3초; } .grid__item:hover .grid__item-img img:nth-child(2) { 불투명도: 1; } .js .grid__item-img img { 표시: 없음; }

마지막으로 필요한 JS 라이브러리와 코드를 로드합니다(코드 블록으로 수행).

<script src="https://cdn.statically.io/gh/robin-dela/hover-effect/15fc09f0/example/js/imagesloaded.pkgd.min.js"></script> <script src="https //cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest /TweenMax.min.js"></script> <script src="https://cdn.statically.io/gh/robin-dela/hover-effect/15fc09f0/dist/hover-effect.umd.js"> </script> <script> imagesLoaded( document.querySelectorAll('img'), () => { document.body.classList.remove('loading'); }); Array.from(document.querySelectorAll('.grid__item-img')).forEach((el) => { const imgs = Array.from(el.querySelectorAll('img')); new hoverEffect({ 부모: 엘, 강도: el.dataset.intensity || 정의되지 않음, speedIn: el.dataset.speedin || 정의되지 않음, speedOut: el.dataset.speedout || 정의되지 않음, 여유: el.dataset.easing || 정의되지 않음, hover: el.dataset 호버 || 정의되지 않음, 이미지1: imgs[0].getAttribute('src'), 이미지2: imgs[1].getAttribute('src'), displacementImage: el.dataset.displacement }); }); </스크립트>

예제에서는 Statically를 사용하고 있지만(GitHub에서 ImagesLoaded 및 Hover Effect 라이브러리 가져오기) Scripts Organizer 또는 Advanced Scripts와 같은 도구를 사용하여 사이트에서 이것을 이상적으로 호스팅해야 합니다.

또한 변위 효과를 생성하기 위해 작동하는 두 개의 기본 라이브러리인 Three.JS 및 TweenMax.JS를 로드합니다.

마지막으로 JS는 다음을 수행합니다. 이미지가 로드될 때를 식별하고 .grid__item-img 가 있는 모든 요소에 호버 효과를 적용하여 각 게시물에서 연결된 이미지와 변위 이미지를 가져옵니다. 완전히 동적이며 Oxygen Builder 리피터에서 반환된 게시물 수에 관계없이 작동합니다.

이 모든 것을 추가하면 효과가 작동해야 합니다!

이것은 Isotropic Facebook 그룹의 회원이 요청한 것입니다. 여기에 가입하도록 초대합니다.

구독 및 공유
이 콘텐츠가 마음에 들면 월간 WordPress 뉴스, 웹사이트 영감, 독점 거래 및 흥미로운 기사를 구독하십시오.
언제든지 구독을 취소하세요. 우리는 스팸 메일을 보내지 않으며 귀하의 이메일을 판매하거나 공유하지 않습니다.