Divi'deki Herhangi Bir Öğeye Hover Tilt Efektleri Nasıl Eklenir

Web tasarımınıza vurgulu eğme efektleri eklemek, Divi web sitenize hayat vermenin eğlenceli ve ilgi çekici yollarından biridir. Genellikle bu tür bir tasarım, bir eklenti veya daha gelişmiş kod gerektirir (bu eğitimdeki gibi). Ancak, bu işlem Tilt.js (jQuery için hafif bir vurgulu eğme 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 Divi'deki herhangi bir öğeye vurgulu eğim efektlerinin nasıl ekleneceğini göstereceğiz. tilt.js jQuery parçacıklarının ve Divi oluşturucunun bir kombinasyonunu kullanarak, bir görüntüye, bir modül sütununa, bir satıra ve daha fazlasına nasıl etkileyici vurgulu tilt efektleri ekleyeceğinizi göstereceğiz. Hatta size şaşırtıcı 3d paralaks efektlerini nasıl ekleyeceğinizi göstereceğiz.

Başlayalım!

Gizlice Bakış

Bu öğreticinin arkasındaki işlevselliğin canlı bir demosu için bu kod kalemine göz atın.

Ve işte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki tasarımlara el koymak için önce aşağıdaki düğmeyi kullanarak indirmeniz gerekecek. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Dosyaları İndirin

Ücretsiz İndir

Divi Bültenine katılın ve size nihai Divi Açılış Sayfası Düzen Paketinin bir kopyasını ve ayrıca tonlarca başka şaşırtıcı ve ücretsiz Divi kaynağı, ipucu ve püf noktası e-posta ile gönderelim. Takip edin ve kısa sürede bir Divi ustası olacaksınız. Zaten aboneyseniz, e-posta adresinizi aşağıya yazın ve düzen paketine erişmek için indir'i tıklayın.

İNDİRMEK

Başarıyla abone oldunuz. Aboneliğinizi onaylamak ve haftalık ücretsiz Divi düzen paketlerine erişmek için lütfen e-posta adresinizi kontrol edin!

Bölüm düzenini Divi Kitaplığınıza aktarmak için Divi Kitaplığına gidin.

İçe Aktar düğmesini tıklayın.

Taşınabilirlik açılır penceresinde, içe aktarma sekmesini seçin ve bilgisayarınızdan indirme dosyasını seçin.

Ardından içe aktar düğmesini tıklayın.

Tamamlandığında, bölüm düzeni Divi Builder'da mevcut olacaktır.

Hadi öğreticiye geçelim, olur mu?

Başlamak için Gerekenler

Başlamak için aşağıdakileri yapmanız gerekir:

1. Henüz yapmadıysanız Divi Temasını kurun ve etkinleştirin.
2. WordPress'te yeni bir sayfa oluşturun ve sayfayı ön uçta düzenlemek için Divi Builder'ı kullanın (görsel oluşturucu).
3. “Sıfırdan Oluştur” seçeneğini seçin.

Bundan sonra Divi'de tasarlamaya başlamak için boş bir tuvaliniz olacak.

Tilt.js Kullanmanın Temelleri

Tilt.js, jQuery için hafif bir paralaks vurgulu eğme efektidir. Yalnızca birkaç satır jQuery ile sayfadaki herhangi bir öğeye fareyle üzerine gelme eğim efektleri ekleyebilirsiniz. Ölçek ve güzel bir parlama efekti dahil olmak üzere eğim efekti tasarımını ve işlevselliğini kontrol etmek için kolayca eklenebilen 10 adede kadar seçenek (belgelere bakın) ile birlikte gelir.

En temel düzeyde, tilt.js kitaplığına eriştiğinizde, üzerine gelindiğinde eğmek istediğiniz öğeye bir CSS sınıfı ekleyebilir ve ardından aynı sınıfa sahip bir jQuery nesnesine tilt işlevini uygulamak için basit bir jQuery parçacığını kullanabilirsiniz. .

Örneğin, "et-js-tilt" adlı bir görüntü modülüne özel bir CSS Sınıfı eklediğinizi varsayalım.

Bundan sonra yapmanız gereken tek şey, görüntüye vurgulu eğim efektini eklemek için aşağıdaki jQuery snippet'ini eklemektir.

$(".et-js-tilt").tilt();

Ardından eğim efekti için ek seçenekler ayarlayabilirsiniz. Örneğin aşağıdaki kod parçası ile ölçek ve kamaşma efekti ekleyebilirsiniz.

$(".et-js-tilt").tilt({
  glare: true,
  maxGlare: 0.7,
  scale: 1.1
});

Sonuç bu olurdu…

Daha gelişmiş bir efekt için, 3B paralaks efekti elde etmek için herhangi bir alt öğeye transform:translateZ() ekleyebilirsiniz. Daha sonra.

Artık tilt.js'nin nasıl kullanılacağına dair temel bir anlayışa sahip olduğumuza göre, onu Divi'de nasıl kullanacağımızı keşfedelim.

Divi'deki Herhangi Bir Öğeye Hover Tilt Efektleri Nasıl Eklenir

Divi Modüllerine Tilt Hover Efekti Ekleme

Varsayılan normal bölüme üç sütunlu bir satır ekleyin.

Resim Modülü Ekle

İlk sütuna bir Görüntü Modülü ekleyin.

Not: İstediğiniz modülü kullanabilirsiniz. Bir görüntü modülü olmak zorunda değildir.

Seçtiğiniz bir resmi yükleyin. Homemade Cookies Layout Pack'ten bir tane kullanıyorum.

Resim Modülü Sınıfı Ekle

Gelişmiş sekmesinin altına 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.

Görüntü Modüllerini 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.

İsterseniz yinelenen görüntüleri yenileriyle değiştirebilirsiniz. Her görüntü modülünün CSS Sınıfı “et-js-tilt” olduğundan emin olun.

tilt.js JQuery'yi ekleyin

Resimlerimizi eğmek için gerekli olan tilt.js kitaplığını ve kod parçacığını eklemek için bir kod modülü kullanacağız.

İlk olarak, mevcut satırın altına yeni bir tek sütunlu satır ekleyin.

Ardından yeni satıra bir kod modülü ekleyin.

Ardından, tilt.js'yi CDN'lerinden içe aktaran bir komut dosyası ekleyerek tilt.js kitaplığına erişmemiz gerekiyor (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). Aşağıdaki komut dosyasını kod kutusuna yapıştırın.

Kitaplığı içe aktarmak için bir komut dosyası etiketi içinde aşağıdaki src'yi kullanın:

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

Şöyle görünmelidir:

Tilt.js'yi kullanacak kodu eklemeden önce içe aktarmak önemlidir. Yani script tilt.js'ye işaret ettikten sonra, eklememiz gereken JQuery'yi sarmak için gerekli script etiketlerini ekleyin. Ardından aşağıdaki JQuery'yi komut dosyası 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 yürütülecek bir if ifadesinin içinde olduğuna dikkat edin. Bu, efektin yalnızca masaüstünde gerçekleşmesini sağlayacaktır.

İşte sonuç.

Satıra Tilt Hover Efekti Ekleme

Daha önce bahsettiğimiz gibi, bu vurgulu eğim efektini Divi'deki herhangi bir öğeye ekleyebilirsiniz. Bu, tüm satırı içerir. Ayrıca, sıranın içindeki modüllerin her biri için eğim efektlerini korurken sıraya bir eğim efekti ekleyebilirsiniz.

İşte nasıl yapılacağı.

Satırı Çoğalt ve Satıra Benzersiz CSS Sınıfı Ekle

Mevcut görüntü satırını çoğaltın ve ardından yinelenen satırın ayarlarını açın. Gelişmiş sekmesi altında, 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 eğim işlevi uygulamak için önceki eğim 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 tekrar 1'e getirdiğimize ve eğimin daha ince olması için perspektif değerini artırdığımıza dikkat edin.

İşte sonuç.

Sıranın üzerine gelindiğinde etkinleşen bir eğme işlevine sahip olduğuna ve görüntü modüllerinin her birinin daha önce eklediğimiz aynı eğme etkisine sahip olduğuna dikkat edin. İç içe eğim efekti örneklerini bu şekilde uygulayabilirsiniz.

Birden Çok Divi Modülüyle Bir Sütuna Tilt Hover Efekti Ekleme

Bazı durumlarda, bir modül sütununa bir eğim efekti eklemek yararlıdır. Bu, Divi ile bir sütun içinde birden fazla modül tasarlamanıza ve ardından tüm bu öğelerin tek bir birim olarak eğilmesine 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 bir eğim vurgulu efekti ekleyeceğiz.

Yeni Satır Ekle

Başlamak için, önceki resim satırının altında yeni bir altıda bir üçte iki altıda bir sütun satırı oluşturun.

Resim Modülü Ekle

2. sütunun (orta sütun) içine yeni bir görüntü modülü ekleyin.

Modüle bir görüntü yükleyin ve görüntü hizalamasını merkeze ayarlayın.

Metin Modülü Ekle

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 başlık 2 stilini aşağıdaki gibi güncelleyin:

• Başlık 2 yazı tipi: Berkshire Swash
• Başlık 2 Metin Hizalama: Orta
• Başlık 2 Metin Rengi: #000000
• Başlık 2 Metin Boyutu: 60px (masaüstü), 32px (tablet), 20px (telefon)
• Başlık 2 Çizgi Yüksekliği: 1.2em

Düğme Modülü Ekle

Metin Modülünün altına bir düğme modülü ekleyin.

“Hakkımızda” okumak için düğme metnini güncelleyin ve tasarım ayarlarını aşağıdaki gibi güncelleyin:

• Düğme Hizalama: ortalayıcı
• Düğme Metin Boyutu: 18px
• Düğme Metin Rengi: #fff
• Düğme Arka Plan Rengi: #000
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 100 piksel
• Düğme Yazı Tipi: Bataklık
• Düğme Yazı Ağırlığı: Kalın
• Dolgu: 16 piksel üst, 16 piksel alt, 30 piksel sol, 30 piksel sağ
• Kutu Gölgesi: ekran görüntüsüne bakın

Sütun Ayarları

Üç modül tamamlandığında, bu modüllerin ana sütununun (sütun 2) ayarlarını açın ve aşağıdakileri güncelleyin:

• Arka Plan Rengi: #f5cee6

• Dolgu: 50 piksel (üst ve alt), 20 piksel (sol ve sağ)

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 Ekleme

Sütuna eğim efekti eklemek için, CSS Sınıfı sütununu hedefleyen benzer başka bir jQuery snippet'i ekleyebiliriz. Aşağıdaki parçacığı, satırı hedefleyen önceki parçacığın altına yapıştırın.

    $(".et-column-js-tilt").tilt({
      scale: 1.1,
      perspective: 1000,
    });

İşte nihai sonuç.

İç Elemanlara 3D Paralaks Efekti Ekleme

Daha gelişmiş bir vurgulu eğim efekti için sütunun iç modüllerine 3B paralaks efekti ekleyebiliriz. Perspektif ve transform:translateZ() kombinasyonunu kullanarak, fareyle üzerine gelme eğim efekti etkinken sütun içindeki modüllerin her birinin 3B uzayda çıkmasını sağlayabiliriz.

İşte nasıl yapılacağı.

Önceki Satırı Çoğalt

İlk olarak, orta sütuna eklenen eğim efektiyle önceki satırı çoğaltın.

Benzersiz Sütun Sınıfı Ekle

Ardından orta sütunu (sütun 2) benzersiz bir CSS Sınıfı ile aşağıdaki gibi güncelleyin:

• CSS Sınıfı: et-column-js-tilt-3d

Özel CSS

İç modüllerin 3d efektini koruduğundan emin olmak için Sütunun Ana Öğesine aşağıdaki Özel CSS'yi ekleyin:

transform-style: preserve-3d;

jQuery ve CSS ekleyin

Ardından, sütunu hedefleyen önceki tilt işlevi snippet'inin altına birkaç jQuery snippet'i daha 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. Ancak, eğim efekti etkin olduğunda kod, sütuna yeni bir sınıf ("tilt-active") da değiştirir. Bu yeni sınıfı, sütunun üzerine geldiğinizde modüllerin her birine bir transform: translateZ() değeri uygulamak için kullanabiliriz. Bu, açılır 3d paralaks efektini yaratacaktır.

Bunu yapmak için, CSS'yi gerekli stil etiketlerine sardığınızdan emin olarak kod kutusunun/içeriğin üstüne aşağıdaki Özel CSS'yi ekleyin.

  .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 nihai sonucu kontrol edin. Eğim efekti sırasında dönerken üç modülün 3 boyutlu uzayda nasıl ortaya çıktığına dikkat edin.

Nihai sonuçlar

Örneklerimiz için nihai sonuçlara başka bir bakış.

Son düşünceler

Tilt.js tarafından sunulan fareyle üzerine gelme eğme efektlerini denemek gerçekten eğlencelidir. Bu eğitimde bazı temel örnekler kullanmama rağmen, bu vurgulu eğme efektlerini önceden hazırlanmış düzenlerimizden herhangi birine veya kendi sitenize uygulayarak kolayca bir saha günü geçirebilirsiniz. Eğlence!

Yorumlarda sizden haber bekliyorum.

Şerefe!