ile bir eğim efekti eklemek ister misiniz? Divi sayfanızın herhangi bir öğesinde?
Vurgulu tilt efektleri ekleme Site Web getirmenin eğlenceli ve ilgi çekici yollarından biridir. Site Web Divi. Genellikle bu tür bir tasarım, bir eklenti veya daha gelişmiş kod gerektirir. Ancak, bu işlem Tilt.js (jQuery için hafif bir vurgulu eğim efekti) kullanarak çok daha kolaydır. Tilt.js ile birkaç dakika içinde herhangi bir şeye vurgulu eğme efektlerini kolayca uygulayabilirsiniz.
Bu eğitimde size herhangi bir öğeye vurgulu eğim efektlerini nasıl ekleyeceğinizi göstereceğiz. Divi. jQuery tilt.js parçacıkları ve Divi oluşturucunun bir kombinasyonunu kullanarak, bir görüntüye, modül sütununa, satıra vb. harika vurgulu eğim efektlerini nasıl ekleyeceğinizi göstereceğiz.
Hatta size harika 3D paralaks efektlerini nasıl ekleyeceğinizi göstereceğiz.
Başlayalım!
anket
İşte bu eğitimde alacağımız sonuca hızlı bir genel bakış.
Ayrıca bakınız: Divi: Bölüm ayırıcının üzerine gelindiğinde içerik nasıl ortaya çıkar?
Başlamak için neye ihtiyacınız var?
WordPress kontrol panelinden şuraya gidin: Sayfalar> Yeni Ekle yeni bir sayfa oluşturmak için.
Size mantıklı gelen bir başlık verin ve tıklayın Divi Builder'ı kullanın
Ardından İnşaata Başla (Sıfırdan Oluşturun)
Bundan sonra, Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.
Divi'deki herhangi bir öğenin üzerine gelindiğinde eğim efektleri ekleyin
Divi modüllerine bir Tilt Hover efekti ekleyin
Varsayılan normal bölüme üç sütunlu bir satır ekleyerek başlayalım.
Bir Görüntü modülü ekleyin
İlk sütuna bir Görüntü modülü ekleyin.
Not: İstediğiniz modülü kullanabilirsiniz. Hiç bir Image modülü olmak zorunda değildir.
Seçtiğiniz bir resmi yükleyin.
Bir Görüntü modülü sınıfı ekleyin
Sekmenin altında gelişmiş, aşağıdaki CSS sınıfını ekleyin:
- CSS Sınıfı: et-js-tilt
Bu sınıf daha sonra tilt fonksiyonumuz için seçici olarak kullanılacaktır.
Önceki Resim Modülünü Kopyala ve Yapıştır
Ardından, Görüntü modülünü kopyalayın ve kalan iki sütunun her birine bir tane yapıştırın.
Dilerseniz yinelenen görüntüleri yenileriyle değiştirebilirsiniz. Her bir görüntü modülünün CSS sınıfına ait olduğundan emin olun "et-js-tilt".
“tilt.js” JQuery kitaplığını ekleyin
Kitaplığı eklemek için tilt.js ve resimlerimizi eğmek için gereken kod parçacığı için bir Kod modülü kullanacağız.
İlk olarak, mevcut satırın bir sütun altına yeni bir satır ekleyin.
Ardından yeni satıra bir Kod modülü ekleyin.
O zaman erişmemiz gerekiyor tilt.js kitaplığı tilt.js'yi CDN'lerinden içe aktaran bir komut dosyası ekleyerek (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Aşağıdaki betiği kod kutusuna yapıştırın.
Kitaplığı içe aktarmak için bir komut dosyası etiketinde aşağıdaki src kodunu kullanın:
src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"Şöyle görünmelidir:
ithal etmek önemli tilt.js onu kullanacak kodu eklemeden önce. Yani komut dosyası işaret ettikten sonra tilt.js, eklememiz gereken JQuery'yi sarmak için gerekli script etiketlerini ekleyin. Ardından aşağıdaki JQuery'yi script etiketleri arasına yapıştırın.
jQuery(document).ready(function ($) {
if ($(window).width() > 980) {
$(".et-js-tilt").tilt({
glare: true,
maxGlare: 0.7,
scale: 1.1,
perspective: 300,
});
}
});
tilt() işlevinin, tarayıcı genişliği 980 pikselden büyük olduğunda çalışacak bir if ifadesinin içinde olduğuna dikkat edin. Bu, efektin yalnızca bir masaüstü bilgisayarda gerçekleşmesini sağlayacaktır.
İşte sonuç.
Çizgiye eğim vurgulu efekti eklendi
Daha önce de belirttiğimiz gibi, bu vurgulu eğim efektini herhangi bir Divi öğesine ekleyebilirsiniz. Bu, tüm bir satırı içerir.
Ek olarak, sıra içindeki modüllerin her biri için eğim efektlerini korurken sıraya bir eğim efekti ekleyebilirsiniz.
İşte böyle.
Satırı çoğaltın ve satıra benzersiz CSS sınıfı ekleyin
Mevcut görüntü satırını çoğaltın, ardından yinelenen satır ayarlarını açın. sekmenin altında gelişmiş, satıra aşağıdaki gibi benzersiz bir CSS sınıfı verin:
- CSS Sınıfı: et-row-js-tilt
jQuery ekle
Ardından, satıra ayrı bir çarpıklık işlevi uygulamak için önceki eğriltme işlevinin altına aşağıdaki jQuery'yi ekleyin.
$(".et-row-js-tilt").tilt({
scale: 1,
perspective: 1200,
});Bu eğim efekti için ölçeği 1'e indirdiğimizi ve eğimin daha ince olması için perspektif değerini artırdığımızı unutmayın.
İşte sonuç.
Sıranın üzerine geldiğinizde etkinleşen bir eğim özelliğine sahip olduğuna ve Görüntü modüllerinin her birinin daha önce eklediğimiz aynı eğim efektine sahip olduğuna dikkat edin. İç içe eğim efekti örneklerini bu şekilde uygulayabilirsiniz.
Birkaç Divi modülü içeren bir sütuna Tilt Hover efekti ekleyin
Bazı durumlarda, bir modül sütununa eğriltme efekti eklemek yararlıdır. Bu, Divi ile bir sütunda birden fazla modül tasarlamanıza ve ardından tüm bu öğeleri tek bir birim olarak açılandırmanıza olanak tanır.
Size bunun nasıl yapılacağına dair bir örnek vermek için, bir Görüntü modülü, bir Metin modülü ve bir Düğme modülü içeren bir sütuna fareyle üzerine gelme efekti ekleyeceğiz.
Yeni bir satır ekle
Başlamak için aşağıdaki sütun yapısına sahip yeni bir satır oluşturun:
Bir Görüntü modülü ekleyin
2. sütunun (orta sütun) içine yeni bir Görüntü modülü ekleyin.
Modüle bir resim yükleyin.
Görüntünün hizalamasını merkeze ayarlayın.
Metin modülü ekleyin
Görüntü modülünün altına, aşağıdaki H2 başlığına sahip bir Metin modülü ekleyin:
<h2>Local Organic</h2>
Ardından, H2 başlık stillerini aşağıdaki gibi güncelleyin:
- Yazı Tipi: Berkshire Kıvrımı
- Metin Hizalama: Ortalanmış
- Metin Rengi: #000000
- Boyut: 60 piksel
- Satır Yüksekliği: 1,2 em
Düğme Modülü Ekle
Metin modülünün altına bir Düğme modülü ekleyin.
Düğme metnini "Daha fazla bilgi edinin..." şeklinde güncelleyin.
Kişiselleştirme ayarlarını aşağıdaki gibi güncelleyin:
- Düğme Hizalama: Merkez
- Düğme İçin Özel Stiller Kullan
- Düğme Metin Boyutu: 18px
- Metin Rengi: #fff
- Düğme Arka Planı: #000
- Düğme Kenar Genişliği: 0 piksel
- Sınır Yarıçapı: 100 piksel
- Düğme Yazı Tipi: Bataklık
- Yazı Ağırlığı: Kalın
- Dolgu (Üst ve Alt): 16 piksel
- Dolgu (Sol ve Sağ): 30 piksel
- Kutu Gölgesi: ekran görüntüsüne bakın
Sütun parametreleri
Üç modülün tümü tamamlandıktan sonra, bu modüllerin ana sütununun (sütun 2) ayarlarını açın ve aşağıdakileri güncelleyin:
- Arka plan: #f5cee6
- Dolgu (Üst ve Alt): 50 piksel
- Dolgu (Sol ve Sağ): 20 piksel
Sütuna CSS sınıfı ekleme
Gelişmiş sekmesinin altına aşağıdaki CSS sınıfını ekleyin:
- CSS Sınıfı: et-sütun-js-tilt
Sütuna eğim efekti uygulamak için jQuery eklendi
Sütuna skew efekti eklemek için CSS Class sütununu hedefleyen benzer başka bir jQuery snippet'i ekleyebiliriz.
Aşağıdaki kod parçacığını, satırı hedefleyen önceki kod parçacığının altına yapıştırın.
$(".et-column-js-tilt").tilt({
scale: 1.1,
perspective: 1000,
});
İşte son sonuç.
Dahili öğelere 3D paralaks efekti eklendi
Daha gelişmiş bir vurgulu eğim efekti için dahili sütun modüllerine 3D paralaks efekti ekleyebiliriz.
Perspektif ve transform:translateZ() kombinasyonunu kullanarak, fareyle üzerine gelme efekti etkinken sütun modüllerinin her birinin 3B alanda görünmesini sağlayabiliriz.
İşte böyle.
Önceki satırı çoğalt
İlk olarak, orta sütuna eklenen eğriltme efektiyle önceki satırı çoğaltın.
Tek bir sütun sınıfı ekleyin
Ardından orta sütunu (sütun 2) benzersiz bir CSS sınıfıyla aşağıdaki gibi güncelleyin:
- CSS sınıfı: et-column-js-tilt-3d
Özel CSS
Dahili modüllerin 3B efektini korumasını sağlamak için ana sütun öğesine aşağıdaki özel CSS'yi ekleyin:
transform-style: preserve-3d;
jQuery ve CSS ekleyin
Ardından, sütunu aşağıdaki gibi hedefleyen önceki skew işlevi snippet'inin altına biraz daha jQuery snippet'i ekleyin:
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");
});Bu jQuery, önceki örnekte olduğu gibi, sütuna başka bir temel eğme işlevi ekler.
.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);
}
Şimdi sonuca bakın. Tilt efekti sırasında dönerken üç modülün 3B alanda nasıl göründüğüne dikkat edin.
Ayrıca Oku: Divi: Bölüm ayırıcının üzerine gelindiğinde içerik nasıl ortaya çıkar?
Nihai sonuçlar
Örneklerimiz için nihai sonuçlara başka bir bakış.
DIVI'yı şimdi indirin!!!
Sonuç
tarafından sunulan vurgulu eğme efektleri Tilt.js denemek gerçekten eğlenceli.
Bu eğitimde birkaç temel örnek kullanmış olsak da, bu vurgulu eğme efektlerini önceden oluşturulmuş düzenlerimizden birine veya kendi sitenize uygulayarak kolayca bir tarla günü geçirebilirsiniz.
Bu eğitimin bir sonraki Divi projeleriniz için size ilham vereceğini umuyoruz. Herhangi bir endişeniz veya öneriniz varsa, bizi yorumlar bölümü bunu tartışmak için.
Ayrıca danışabilirsiniz kaynaklarımızİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma ya da Divi: Tüm zamanların en iyi WordPress teması.
Ama bu arada, bu yazıyı farklı sosyal ağlarda paylaş.
...
