CodeWatchers

Divi'de bölünmüş metin deklanşör görüntüsü animasyonu nasıl oluşturulur

Rifat Divi Tutorials May 16, 2021

Resim Kaplaması, web sitesi ziyaretçilerine çekici bir görüntüleme deneyimi sunmak için çok yaratıcı bir ortamdır. Özel animasyonlar ve vurgulama efektleri bir görüntüyü sergilemenin harika bir yoludur ve bugünlerde herkes tarafından çok popülerdir. Bugünün öğreticisinde, Divi'ya kadar bölünmüş metin animasyonu ile güzel görüntü kaplamalarının nasıl oluşturulacağını göreceğiz.

Divi'de bölünmüş metin deklanşör görüntüsü animasyonu nasıl oluşturulur

Bugünün öğretici üç bölüme ayırdık. İlk bölümde, özel bir görüntü kaplamasının nasıl oluşturulacağını göreceğiz ve bir sonraki bölümde tasarıma bazı kodlar ekleyeceğiz. Ve son olarak, Divi'ün yerleşik seçeneğini kullanarak benzersiz bir görüntü bindirme tasarımının nasıl oluşturulacağını göreceğiz.

Gecikmeden başlayalım.

Önizleme

Bugünün öğreticisine başlamadan önce, bugün öğreneceğimiz tasarımımıza bir göz atın.

Harika Web Siteleri Oluşturun

En iyi ücretsiz sayfa oluşturucu Elementor ile

Şimdi başla

Başlamadan Önce

Divi etkileyici özellikler sunan ve çok amaçlı bir WordPress temasının gerçek amacına hizmet eden harika bir WordPress temasıdır. Kullanımı kolay sayfa oluşturucu, harika tasarımlar oluşturabilecek birçok işlevselliğe sahiptir. Temayı alıp alın ve kurulumdan sonra etkinleştirin.

WordPress panosundan yeni bir sayfa oluşturun ve sayfayı Divi oluşturucu ile düzenlemek için açın. "Sıfırdan İnşa Et"i seçin ve çalışmaya hazırız!

Bölüm 1: Tasarımın İnşası

İlk bölümde tasarımımızın yapısını oluşturacağımızı daha önce belirtmiştik. Bölünmüş metin panjurları ile görüntü yer paylaşımının kurulumunu bitirdiğimiz anda, animasyonu bir sonraki bölüme yükleyeceğiz.

Ekle: Satır 1

Satır Ayarları

Bölüme normal 2 sütun satırı ekleyin ve başka modül eklemeden önce aşağıdaki ayarları değiştirin.

  • Oluk Genişliği: 2

Sütun Ayarları

Sütunlar görüntülerimizi ve deklanşör kaplama elemanlarımızı tutacak, bu yüzden bu bizim ana konteynerimiz olacak. Ayrıca, bu sütun deklanşör animasyonu vurgu efektlerini başlatır. Basitçe, bir fare bu sütunun içine girdiğinde - tüm animasyon başlayacak ve fare çıkar çıkmaz önceki duruma dönecektir.

Sütunumuzu "deklanşör sütunu" olarak seçmek ve daha sonra "vurgu üzerinde" hareketlendirmek için CSS Sınıfını sütuna ekleyin.

  • CSS Sınıfı: deklanşör sütunu üzerine

Ayrıca aşağıdaki ayarlamaları yapın.

  • Yatay Taşma: Gizli
  • Dikey Taşma: Gizli

Ekle: Görüntü Modülü

Şimdi bir görüntü modülü ile deklanşör yer paylaşımımızın arkasına oturacak ana görüntümüzü ekleyeceğiz.

Şimdi tasarım sekmesi altında hizalamada küçük bir değişiklik yapın.

  • Görüntü Hizalama: Ortala

Üst deklanşör bölme metni oluşturma

Görüntümüz yerleştirildikçe, üst deklanşör eklemek için görüntü modülünün altına bir metin modülü ekleyeceğiz.

Metin modülini bir metinle güncelleştirin.

Tasarım sekmesini açın, bu ayarlamaları yapın.

  • Metin Yazı Tipi: Poppins
  • Metin Yazı Tipi Ağırlığı: Ağır
  • Metin Yazı Tipi Stili: TT
  • Metin Metni Rengi: #ffffff
  • Metin Metin Boyutu: 150 piksel (masaüstü), 20vw (tablet ve telefon)
  • Metin Harfi Aralığı: -0.03em
  • Metin Satırı Yüksekliği: 0em
  • Metin Hizalama: Ortala

Şimdi boyutlandırma ve aralık ayarlarını güncelleştirin.

  • Genişlik: 100%
  • Yükseklik: 50%
  • Kenar Boşluğu: 0px alt

Şimdi, gelişmiş sekmesinden aşağıdaki CSS sınıfını ekleyin.

  • CSS Sınıfı: üst deklanşör

Daha sonra, özel kodla dönüştürme animasyonunu değiştirmek ve kapatmak için sınıfı kullanacağız. Ardından, bu CSS kodunu Ana Öğeye ekleyin.

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

Metnimizi pozisyona getirmek için bu değişiklikleri yapmamız gerekir.

Alt deklanşör bölme metni oluşturma

Üst deklanşör bölme metnimiz bittiğinden, alt deklanşör bölünmüş metin oluşturmak için metin modülini çoğaltın. Herhangi bir CSS Sınıfı eklemeniz gerekmez; Önceki modülü klonladığımızdan, CSS Sınıfı zaten orada. Ama Ana Element'teki CSS kodunda bazı ayarlamalar yapmalıyız. 

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

"Flex-start" başvurusu, metin modülün üst kısmına dikey olarak hizalanır. Önceki metin modülünde satır yüksekliğini 0 olarak ayarladık, böylece tüm metnin alt yarısı görünür olacak.

Dikey uzaklık ile mutlak bir konum ekleyin.

  • Dikey Ofset: %50

Şimdi, bir sonraki bölümde kodlama ile animasyon yapacağımız bugünkü öğreticimizin yapısını başarıyla yaptık. Gelecekteki daha iyi anlayışlar için modülleri yeniden adlandıralım.

Bölüm 2: Kod

Yapımıza deklanşör animasyonu efekti getirmek için bazı CSS ve JS kodlarına ihtiyacımız var. Bunun için bir Kod modülü kullanacağız. Kod modülunu sağ sütunun üstüne ekleyin.

CSS kodu

Aşağıdaki CSS kodunu stil etiketinin içine yapıştırın. 

/* transition duration of shutter animation */
.top-shutter,
.bottom-shutter {
  transition: transform 1s;
}
/* disables all transform options created in
Divi Builder for both shutters */
.divi-transform-none .top-shutter,
.divi-transform-none .bottom-shutter {
  transform: none;
}
.on-click {
  cursor:pointer;
}

JS Kodu

Ardından, aşağıdaki JQuery kodunu bir komut dosyası etiketinin içine ekleyin. 

(function ($) {
  $(document).ready(function () {
    /*
  Toggle shutter transform animation on hover.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-hover divi-transform-none".
  */
    $ShutterColumnToHover = $(".shutter-column.on-hover");
 
    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });
 
    /*
  Toggle shutter transform animation on click.
  To work, Divi Column with shutters must include
  these CSS Classes: "shutter-column on-click divi-transform-none".
  */
    $ShutterColumnToClick = $(".shutter-column.on-click");
 
    $ShutterColumnToClick.on("click", function (e) {
      $(this).toggleClass("divi-transform-none");
      e.stopPropagation();
    });
 
    $(document).on("click", function (e) {
      if ($(e.target).is(".shutter-column.on-click") === false) {
        $ShutterColumnToClick.addClass("divi-transform-none");
      }
    });
  });
})(jQuery);

Bölüm 3: Bölünmüş Metin Deklanşör Animasyon Tasarımı

Şimdi, ilk deklanşör animasyonumuzu oluşturmak için tasarımımızın ilk bölümünü çoğaltacağız.

Ekle: Üst Deklanşör Dönüştürme Özellikleri

Genellikle, CSS Dönüştürme Özellikleri'ni kullanarak bir şeyi hareketlendirme yaptığımızda, başlangıçta bu öğe için dönüştürme stili yoktur. Sonra öğenin üzerine durduktan sonra, bu stili görebiliriz. Divi'de tüm süreci tersine çevireceğiz. İlk olarak Divi Builder'ı kullanarak bu öğeyi dönüştüreceğiz. Bunun avantajı, her şeyi görsel olarak düzenleyebilmizdir. Daha sonra stil yapıldığında, başlangıçta bir CSS sınıfı kullanarak devre dışı bırakacağız. Ardından, kullanıcı kaplamayla etkileşime girdiğinde onu açık ve kapalı olarak kapatın.

Dönüştürme tasarımını üst deklanşöre eklemek için, üst deklanşör metin modülü ayarlarını açın ve aşağıdakileri güncelleştirin:

  • Dönüştürme Ölçeği (X ve Y): %150
  • Dönüştürme Çevirisi Y ekseni: -101%
  • Transform Origin: üst merkez

Her şeyi doğru düzenlerseniz, animasyon geçişinden sonra görüntünün tamamının ortaya çıkarılmasını istediğimiz için üst deklanşör metni artık görünmez.

Ekle: Alt Deklanşör Dönüştürme Özellikleri

Alt Deklanşör için aşağıdaki dönüştürme tasarım seçeneklerini güncelleştirin:

  • Dönüştürme Ölçeği (X ve Y): %150
  • Dönüştürme Çevirisi Y ekseni: 101%
  • Kaynağı Dönüştür: alt merkez

Ekle: Dönüştürme özelliğini devre dışı bırakmak için CSS sınıfı (başlangıçta)

Deklanşör animasyonu için dönüştürme özellikleri tasarladıktan sonra, küçük bir CSS sınıfı kullanarak dönüştürme tasarımlarını devre dışı bırakacağımızı zaten biliyoruz. Daha önce eklediğimiz özel CSS kodu nedeniyle, tasarım herhangi bir dönüştürme tasarımı olmadan görünecektir.

Ekle: Açık- Tıklama İşlevselliği

1. animasyonumuz hover efektindeydi. Bu nedenle, vurgulama aslında görüntünün ve metnin üzerinde fare imleci ile animasyonu tetikler. Şimdi bunu fare tıklamasıyla vurgulamadan nasıl yapabileceğimizi göreceğiz. Çok basit, "on-hover" komutunu atlayacağız ve bölüme "tıklama" komutunu ekleyeceğiz.

  • CSS Sınıfı: deklanşör sütunu tıklamayla böl-dönüştür-yok

Yani tasarım böyle görünecek.

Animasyonu Tersine Çevirme

Şimdi, istersek, tüm görüntünün açıkta kalacağı ve metnin gezindiğimizde geleceği bir animasyon yapabiliriz - yani şu anda sahip olduğumuzun tam tersi. "Divi-transform-none" CSS sınıfını kaldırarak bu tür animasyonları kolayca elde edebiliriz.

Başka Bir Tasarım

Burada başka bir tasarımımız var.

Panjurları Güncelleştir

Her deklanşör şablonundan üst ve alt metin modüllerini seçin. Ardından her ikisi için de öğe ayarlarını açın ve aşağıdakileri güncelleştirin:

  • Arka plan: #ffffff
  • Metin Metni Rengi: #000000
  • Karışım Modu: Ekran

Son Tasarım

Son tasarımımız böyle görünecek.

Son

Bölünmüş metin deklanşör tasarımı da dahil olmak üzere herhangi bir tasarım, Divi aracılığıyla çok kolay bir şekilde yapılabilir. Ziyaretçi çekmek için çok etkili bir yoldur. Umarım, bugünün öğreticisi web sitesi tasarımınıza yeni bir boyut katacaktır. Bu öğreticiyi beğendiyseniz, yorumlar kutusunda bize bildirmeyi unutmayın.

Divi WordPress Theme