Oksijen Oluşturucu Tekrarlayıcılar İçin Benzersiz Hover Etkisi

Yayınlanan: 2022-04-10

Bu eğitimde, Oxygen Builder Tekrarlayıcılarda görüntülenen içerik için benzersiz bir vurgulu efekti oluşturacağız. Codrops "Distortion Hover Effect" modelinden yola çıkarak ve bu kaynaktan gelen kaynak kodunu kullanarak, bu efekt, bir ziyaretçi bir tekrarlayıcı hücrenin üzerine geldiğinde kullanıcı tanımlı bir görüntüde çarpık bir solma yaratacaktır.

Bu eğitim, Oxygen Builder'ın bazı harika kavramlarını içerecektir:

  • Gelişmiş tekrarlayıcı teknikleri
  • ACF saha grupları ve Oxygen Builder ile manuel entegrasyon
  • Temel CSS ızgarası
  • Dinamik nitelikler
  • Kod bloğu kullanımı ve ara JS

Bir adım daha ileri giderek, bunu %100 dinamik bir özellik haline getireceğiz, yani kurulacak ve unutulacak. Her hücre için belirli bir efekt başlatmaya gerek yok!

Birlikte Takip Edin (Kaynak İndirme):

Not: Bu bir kavram kanıtıdır ve büyük olasılıkla üretim tesislerinde kullanım için optimizasyon gerektirir.

Diğer iki şey:

  • Bir Oksijen Oluşturucu kursu başlatıyoruz. Buradan daha fazlasını öğrenebilir ve bekleme listesine katılabilirsiniz.
  • Bu, harika Facebook grubumuzda talep edilen bir eğitimdi. Katılmanızı çok isteriz!

Efekt Demosu:

demo_iso_effect_oxygen_builder

Adım 1: ACF Alanları

Bunu %100 dinamik hale getirmek ve son kullanıcının düzenlemesini kolaylaştırmak için ACF'yi kullanacağız. Bir alan grubu oluşturun ve bir vurgulu görüntü ve yer değiştirme görüntüsü ekleyin. İlk resim, gönderinin öne çıkan resmi olacaktır. Vurgulu görüntü, ziyaretçi tekrarlayıcı bir gönderi üzerine geldiğinde efektin kaybolacağı şeydir.

Yer değiştirme görüntüsü, iki görüntü arasındaki benzersiz biçim/solma animasyonunu yapmak için kullanılacaktır. Bu örnekte, yer değiştirme için aşağıdaki görüntüleri kullanıyoruz:

7
8

Aslında herhangi bir görüntüyü kullanabilirsiniz, ancak harika dokuya sahip siyah beyaz görüntüler genellikle en iyisidir. Bu yöntemle deneme yapmak çok kolay!

izotropik-2022-04-07-at-12-11-43
Alan grubu oluşturun ve gönderi tipine atayın.
izotropik-2022-04-07-at-12-11-24
Her resim döndürme biçimi, Resim URL'si olmalıdır.

Yeni bir gönderi eklerken alan grubu ve ilişkili resimler şöyle görünür:

izotropik-2022-04-07-at-12-53-46
Üç görüntüden herhangi birini değiştirmek kolaydır.

Adım 2: Efekt için yapıyı oluşturun

Özünde, kaynak kodunu Codrops örneğinden küçük değişikliklerle kopyalıyoruz.

<div class="grid"> <!-- bu tekrarlayıcı --> <div class="grid__item grid__item--bg"> <!-- bu tekrarlayıcıdaki div --> <div class=" grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- bu "görüntü sarmalayıcıdır" div" --> <img src="img/Img22.jpg" alt="Görüntü"/> <img src="img/Img21.jpg" alt="Görüntü"/> </div> <div class=" grid__item-content"> <!-- bu "içerik sarmalayıcı div> --> <span class="grid__item-meta">Kaliforniya</span> <h2 class="grid__item-title">Zıplamak</h2 > <h3 class="grid__item-subtitle"> <span>Kaliforniya'nın son boş atlama noktaları</span> <a class="grid__item-link" href="#">Daha fazlasını keşfedin</a> </h3> </ div> </div> </div>
izotropik-2022-04-07-at-13-12-26

Yukarıdaki HTML yapısını Oxygen Builder öğeleriyle çoğaltıyoruz. Yukarıdaki HTML örneğinden sınıfları eklemeyi unutmayın, çünkü biz biraz CSS ekleyeceğiz ve JS bunları belirli öğeleri tanımlamak için kullanıyor. Bu sınıfları değiştirirseniz, CSS ve JS'yi buna göre güncellemeniz gerekir.

Tekrarlayıcımız, fazla iş yapmadan tüm hücreleri eşit aralıklarla yerleştirmek için CSS ızgarasını kullanıyor:

izotropik-2022-04-07-at-13-25-06

3. Adım: Dinamik Yapın

Dinamik olacak şekilde yapılandırılacak birkaç şey vardır. İlk olarak, tekrarlayıcı sorgusunu WordPress Post türü yapın.

Ardından, tarihi ve gönderi başlığını dinamik olacak şekilde ayarlayın.

izotropik-2022-04-07-at-13-17-17

Şimdi, üç resmi ayarlayacağız. İşte bu noktada işler karmaşıklaşabilir. 1. görselin URL'sini öne çıkan görsel URL'si olacak şekilde ayarlayın.

izotropik-2022-04-07-at-13-20-11

2. resmin URL'sini, ACF'de ayarlanan vurgulu resim olacak şekilde ayarlayın. Bu öğretici için, ACF alanları "dinamik veri ekle" açılır penceresinde gösterilmiyordu (muhtemelen Oxygen Builder 4.0 Beta 2 hatası nedeniyle). Bunu yaşarsanız, kolay bir geçici çözüm vardır:

1 - Dinamik verileri ekleyin

2 - PHP İşlev Dönüş Değerini Seçin

izotropik-2022-04-07-at-13-20-47

3 - ACF alan içeriğini get_field('fieldname') ile manuel olarak ekleyin

izotropik-2022-04-07-at-13-21-30

Son olarak, morph geçişini yapmak için efektin kullanacağı bozulma görüntüsünü ayarlamamız gerekiyor. Bu, HTML'ye, JS'nin okuduğu ve efekte dahil ettiği bir veri niteliği olarak eklenir. Yukarıdaki HTML'den, efekti değiştirmek için düzenlenebilecek birkaç özellik olduğunu görebiliriz.

<div class="grid__item-img" data-displacement="img/displacement/8.jpg" data-intensity="-0.65" data-speedIn="1.2" data-speedOut="1.2"> <!-- bu "görüntü sarmalayıcı div" --> ... </div>

Dinamik hale getirmemiz gereken ana şey, ACF kullanılarak gönderide ayarlanan görüntünün URL'sine sahip olacak olan veri yer değiştirmesidir. Diğer üç özelliği sıkı bir şekilde kodladık, ancak bu kullanıcıları düzenlenebilir hale getirmek için aşağıda özetlenen yöntemin aynısını kullanabilirsiniz.

Görüntü sarmalayıcı öğesine gidin (iki dinamik görüntünün etrafındaki div). Gelişmiş -> Nitelikler'e tıklayın ve aşağıdakileri ekleyin.

izotropik-2022-04-07-at-13-28-05

data-displacement için içerikteki data+ butonuna tıklayıp ilgili ACF alanımızı ekleyerek bunu dinamik hale getireceğiz.

Ön uç HTML'si şöyle görünecek ve JS, WordPress'te havalı yer değiştirme vurgulu efekti oluşturmak için tüm bu verileri (dinamik ve ACF aracılığıyla kullanıcı tarafından düzenlenebilir) kullanacak:

izotropik-2022-04-07-at-13-46-39

4. Adım: CSS, kitaplıklar ve JS ekleyin

Aşağıdaki CSS'yi Universal CSS stil sayfamıza ekleyeceğiz. Her şeyin düzgün çalışmasını sağlamak için ek CSS stilleriyle oynamanız gerekebilir.

.grid__item { taşma:gizli; konum:göreceli; } .grid__item-content { z-index:5; } .grid__item-img { görüntü: blok; yükseklik: %100; genişlik: %100; } .grid__item-img canvas { yükseklik: %100; konum:mutlak; üst:0; z-endeksi:1; } .grid__item-img img { yükseklik: %100; Ekran bloğu; } /* JS çalışmazsa bu bir geri dönüş olur */ .grid__item-img img:nth-child(2) { position: mutlak; üst: 0; sol: 0; opaklık: 0; geçiş: opaklık 0,3 sn; } .grid__item:hover .grid__item-img img:nth-child(2) { opaklık: 1; } .js .grid__item-img img { görüntü: yok; }

Son olarak gerekli JS kitaplıklarını ve kodu yükleyeceğiz (bunu bir kod bloğu ile yaptık):

<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')); yeni hoverEffect({ parent: el, yoğunluk: el.dataset.intensity || tanımsız, speedIn: el.dataset.speedin || tanımsız, speedOut: el.dataset.speedout || tanımsız, hareket hızı: el.dataset.easing || tanımsız, vurgulu: el.dataset. üzerine gelin || tanımsız, görüntü1: imgs[0].getAttribute('src'), görüntü2: imgs[1].getAttribute('src'), deplasmanImage: el.dataset.displacement }); }); </script>

Örneğimiz için Statik olarak kullanıyoruz (GitHub'dan ImagesLoaded ve Hover Effect kitaplıklarını çekerek), ancak bunu ideal olarak Scripts Organizer veya Advanced Scripts gibi bir araç kullanarak sitenizde barındırmalısınız.

Ayrıca, yer değiştirme efekti oluşturmak için çalışan iki temel kitaplık olan Three.JS ve TweenMax.JS'yi de yükleriz.

Son olarak, JS aşağıdakileri yapar - görüntülerin ne zaman yüklendiğini belirler ve .grid__item-img öğesine sahip herhangi bir öğeye fareyle üzerine gelme efektini uygulayarak her gönderiden ilişkili görüntüleri ve yer değiştirme görüntülerini çeker. Tamamen dinamiktir ve Oxygen Builder tekrarlayıcı tarafından döndürülen gönderi sayısından bağımsız olarak çalışır.

Tüm bunları ekledikten sonra efektiniz çalışıyor olmalı!

Bu, İzotropik Facebook Grubumuzun bir üyesi tarafından talep edildi. Sizi buraya katılmaya davet ediyoruz.

Abone Ol ve Paylaş
Bu içeriği beğendiyseniz, aylık WordPress haberleri, web sitesi ilhamı, özel fırsatlar ve ilginç makalelere abone olun.
İstediğiniz zaman abonelikten çıkın. Spam yapmıyoruz ve e-postanızı asla satmayacağız veya paylaşmayacağız.