Divi'de Bölünmüş Metin Deklanşörü Animasyon Tasarımları ile Görüntü Bindirme Nasıl Oluşturulur

Görüntü bindirmeleri, web sitenizde görüntüler görüntülerken popüler bir tasarım varlığı olmaya devam ediyor. Yalnızca görselleri sergilemek için yaratıcı bir yol sunmakla kalmaz, aynı zamanda özellikle görselin üzerine geldiğinizde veya tıkladığınızda özel animasyonlar eklediğinizde görselleri görüntülemeyi ziyaretçiler için daha eğlenceli ve ilgi çekici hale getirebilirler.

Bu eğitimde, size Divi'de bölünmüş metin deklanşör animasyonu ile bir görüntü bindirmesinin nasıl oluşturulacağını göstereceğiz. İlk olarak, bölünmüş metin panjurları ile özel görüntü bindirmesini nasıl oluşturacağınızı göstereceğiz. Ardından, tamamen benzersiz üç görüntü bindirmeli deklanşör animasyon tasarımı oluşturmak için Divi'nin yerleşik dönüştürme seçeneklerini nasıl kullanabileceğinizi göstereceğiz. Hatta bu yaratıcı meyve sularının akmasını sağlamak için size birkaç örnek tasarım daha göstereceğiz.

Hadi atlayalım ve başlayalım!

Gizlice Bakış

İşte bu eğitimdeki Görüntü bindirme tasarımlarına hızlı bir bakış.

Ve işte bu eğitimde kullanılan tasarımın aynısını gösteren bir kod kalemi.

Düzeni ÜCRETSİZ İndirin

Bu eğitimdeki görüntü bindirme bölünmüş metin deklanşör animasyon tasarımlarına el koymak için, önce aşağıdaki düğmeyi kullanarak bunları indirmeniz gerekir. İ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.

Bölüm 1: Bölünmüş Metin Panjurları ile Görüntü Bindirmesini Oluşturma

Eğitimin bu ilk kısmı için, bölünmüş metin perdeleriyle görüntü bindirmesinin ilk kurulumunu oluşturacağız. Bu yapıldıktan sonra panjurlara daha sonra animasyon ekleyebiliriz.

Sıra

Başlamak için normal bölüme iki sütunlu bir satır ekleyin.

Modül eklemeden önce, satır ayarlarını açın ve oluk genişliğini güncelleyin:

• Oluk Genişliği: 2

Sütunu Güncelleme

Sütun, resmimizi ve deklanşör bindirme öğelerini tutacak ana kap olacaktır. Ayrıca, fareyle üzerine gelindiğinde deklanşör animasyonunu başlatacak olan ana hedef olacaktır. Başka bir deyişle, imleç sütun içinde hareket ettiğinde, alt öğelerin (panjurlar) animasyonu açılır ve imleç sütunun dışına çıktığında animasyon kapanır.

Sütunumuzu "deklanşör sütunu" olarak atamak ve daha sonra "vurguluyken" canlandırmak için sütuna aşağıdaki CSS Sınıflarını ekleyin:

• CSS Sınıfı: fareyle üzerine gelindiğinde deklanşör sütunu

Ardından, animasyon sırasında sütun kabının ötesine geçtiklerinde dönüştürülmüş öğeleri görmememiz için taşmaları gizli olarak güncelleyin.

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

Ana Resmi Ekleme

1. sütunun içine bir görüntü modülü ekleyin. Bu, deklanşör kaplamasının arkasına oturacağımız ana görüntü görevi görecek.

Görüntü modülüne bir görüntü yükleyin.

Ardından görüntünün hizalamasını merkeze ayarlayın.

Bölünmüş Metin ile Üst Perde Oluşturma

Artık resmimiz yerinde olduğuna göre, bir metin modülü kullanarak üst deklanşörü ekleyeceğiz. Resmin altına yeni bir metin modülü ekleyin.

Gövde alanına “divi” metnini ekleyerek metin modülü içeriğini güncelleyin.

Tasarım sekmesi altında metin stilini aşağıdaki gibi güncelleyin:

• Metin Yazı Tipi: Poppins
• Metin Yazı Tipi Ağırlığı: Ağır
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 200px (masaüstü), 30vw (tablet ve telefon)
• Metin Harf Aralığı: -0.03em
• Metin Satır Yüksekliği: 0em
• Metin Hizalama: Merkez

Ardından, boyutlandırma ve aralık seçeneklerini güncelleyin:

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

Gelişmiş sekmesi altında aşağıdakileri güncelleyin:

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

Dönüşüm animasyonunu daha sonra kodumuzla açıp kapatmak için CSS Sınıfını kullanacağız.

Ardından bu özel CSS'yi Ana Öğeye ekleyin:

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

Bu kod, metnin modülün altında dikey olarak hizalandığından emin olmak için esnek kullanır. Metnin satır yüksekliği 0 olduğundan, metin yalnızca üst yarısını gösteren bölünmüş olarak gösterilecektir.

Üst panjurumuzu konumlandırmak için önce metnin taşmasını gizlememiz ve ardından aşağıdaki gibi ona mutlak bir konum vermemiz gerekiyor:

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

Bu, deklanşörü görüntünün üst yarısında hareket ettirecektir.

Eşleşen Bölünmüş Metin ile Alt Perde Oluşturma

Artık üst panjurumuzu tamamladığımıza göre, üst panjur metin modülünü çoğaltarak alt panjurun oluşturulmasına hızlı bir şekilde başlayabiliriz.

Ardından yinelenen metin modülünü açın ve aşağıdakileri güncelleyin:

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

Hizalama öğeleri özelliği için "esnek ucu" "esnek başlangıç" ile değiştirerek Ana Öğe CSS'sini güncelleyin. İşte son CSS:

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

“Flex-start” ile metin, modülün üst kısmında dikey olarak hizalanır. Ve metnin satır yüksekliği 0 olduğundan, metin yalnızca alt yarısını gösteren bölünmüş olarak gösterilecektir.

Ardından, mutlak konumu dikey bir kayma ile aşağıdaki gibi güncelleyin:

• Dikey Ofset: %50

Bu, deklanşör metin modülünün görüntünün alt yarısının üzerine oturmasını sağlar.

Her iki panjurdaki bölünmüş metin şimdi mükemmel bir eşleşme olarak hizalanmalıdır.

Bu noktada, bölünmüş metin deklanşör görüntü bindirme kurulumumuzu başarıyla oluşturduk. Bu, kap olarak deklanşör sütunundan, ana görüntüden, görüntünün üst yarısında bulunan üst deklanşörden ve görüntünün alt yarısında bulunan alt deklanşörden oluşur.

Bunu, dönüştürme özelliklerini kullanan deklanşör efekti animasyonlarını içeren sonraki birkaç örnek için bir tür başlangıç ​​şablonu olarak kullanacağız.

Bölüm 2: Kod

Deklanşör animasyonunun işlevselliğini eklemek için bir Code modülü kullanarak birkaç CSS ve JS parçacığına ihtiyacımız var.

Sayfaya yeni bir kod modülü ekleyin. İlk bindirme oluşturmamız için kullandığımız ilk üst bölümün sağ sütununa ekleyebiliriz.

CSS

Aşağıdaki CSS'yi gerekli stil etiketleriyle sardığınızdan emin olarak kod kutusuna 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;
  }

Bu CSS gerçekten çok basit. Tek yaptığı, “divi-transform-none” sınıfıyla sütun içindeki panjurlara transform: none uygulamaktır. Animasyonu oluşturmak için bu sınıf JS ile açılıp kapatılacaktır. Geçiş: 1s dönüşümü , geçişin (veya animasyonun) süresini son 1 saniyeye ayarlar.

JS

CSS'den sonra, gerekli komut dosyası etiketleriyle sardığınızdan emin olarak kod kutusuna aşağıdaki JQuery'yi 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);

Kodun ilk kısmı, bir sütunda "deklanşör sütunu on-hover divi-transform-none" sınıflarına sahip olduğunda , fareyle üzerine gelindiğinde deklanşör dönüşümü animasyonlarını değiştiren işlevselliği ekler.

    $ShutterColumnToHover = $(".shutter-column.on-hover");

    $ShutterColumnToHover.hover(function () {
      $(this).toggleClass("divi-transform-none");
    });

Kodun ikinci kısmı, bir sütunda "deklanşör sütunu tıklamada bölme-dönüştürme-yok" sınıflarına sahip olduğunda , tıklamayla deklanşör dönüştürme animasyonlarını değiştiren işlevsellik ekler.

    $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");
      }
    });

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

Tasarım #1

İlk deklanşör animasyon tasarımımızı oluşturmak için, ilk bölümü çoğaltarak tasarım sürecini hızlı bir şekilde başlatacağız. Bu bize, bölünmüş metin kepenklerinin kullanıma hazır olduğu önceden oluşturulmuş bir görüntü bindirmesi ile yeni bir bölüm verecektir.

Üst Deklanşöre Dönüştürme Özellikleri Ekleme

Normalde, dönüştürme özelliklerine sahip bir şeyi canlandırmak için CSS kullandığınızda, öğenin başlangıçta dönüştürme stili olmaz ve daha sonra, kullanıcı öğenin üzerine geldiğinde veya tıkladığında dönüştürme stili uygulanır. Divi'de, işlemi tersine çevireceğiz ve önce Divi Builder'ı kullanarak öğeye dönüşüm stilini ekleyerek başlayacağız. Bu, tasarımı görsel olarak düzenlerken yerleşik dönüştürme seçeneklerini kullanmamızı sağlar. Ardından, tüm dönüşüm tasarım öğelerini eklemeyi bitirdikten sonra, bunları başlangıçta devre dışı bırakabilir (bir CSS sınıfı kullanarak) ve ardından kullanıcı kaplama ile etkileşime girdiğinde bunu açıp kapatabiliriz.

Dönüştürme tasarımını üst örtücüye eklemek için üst örtücü metin modülü ayarlarını açın ve aşağıdakileri güncelleyin:

• Dönüşüm Ölçeği (X ve Y): %150
• Dönüştür Y eksenini çevir: -101
• Kökeni Dönüştür: üst merkez

Doğru yaptıysanız, üst deklanşör artık görünmeyecektir, çünkü ana görüntünün tamamının animasyon geçişinden sonra gösterilmesini istiyoruz.

Alt Deklanşöre Dönüştürme Özellikleri Ekleme

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

• Dönüşüm Ölçeği (X ve Y): %150
• Y eksenini dönüştür: %101
• Kökeni Dönüştür: alt merkez

Tasarımları Başlangıçta Devre Dışı Bırakmak İçin Bir Sınıf Ekleyin

Daha önce de bahsettiğim gibi, deklanşör animasyonumuz için gerekli dönüşüm tasarımlarını eklemeyi bitirdiğimizde, bir CSS Sınıfı ekleyerek bu dönüşüm tasarımlarını başlangıçta devre dışı bırakabiliriz.

Daha önce eklediğimiz özel CSS kodu nedeniyle, tasarım herhangi bir dönüşüm tasarımı olmadan görünecektir.

Tek Bir Sınıfla Tıklamada İşlevsellik Ekleyin

Fareyle üzerine gelmek yerine tıklamayla tetiklenen aynı animasyonu elde etmek için tek yapmamız gereken sütundaki tek bir sınıfı değiştirmek.

İlk olarak, fareyle üzerine gelindiğinde ilk çalışma örneğimizle sütun 1'i çoğaltın. Ardından boş sütunu silin. Şimdi aynı sınıflara ve içeriğe sahip iki özdeş sütununuz olmalıdır.

Sütun 2 için ayarları açın ve "hover" sınıfını "tıklama" sınıfıyla değiştirin. İşte son üç sınıfın olması gerekenler:

• CSS Sınıfı: deklanşör sütunu tıklatıldığında bölme-dönüştürme-yok

Sonuç

Hover'da Deklanşör Animasyonunu Tersine Çevirme

Ana görüntünün başlangıçta açık olarak gösterilmesini ve ardından görüntünün üzerine geldiğinizde kaplamayı (şimdi nasıl çalıştığının tersi) eklemek istiyorsanız, deklanşör için kullanılan sütundaki "divi-transform-none" sınıfını kaldırabilirsiniz. . Bu size aşağıdaki etkiyi verecektir.

Tasarım #2

İkinci deklanşör animasyonunu oluşturmak için, ilk deklanşör animasyonumuzla önceki bölümü çoğaltabiliriz.

Panjurları Güncelle

Ardından, üst örtücü ve alt örtücü metin modüllerini seçmek için çoklu seçimi kullanın. Ardından, her ikisi için de öğe ayarlarını açın ve aşağıdakileri güncelleyin:

• Arkaplan: #ffffff
• Metin Metin Rengi: #000000
• Karışım Modu: Ekran

Sonuç

Tasarım #3

Üçüncü deklanşör animasyon görüntüsü bindirme tasarımını oluşturmak için önceki bölümü çoğaltın.

Yeni Resim Ekle

Ardından görüntü modülünü yeni bir görüntü ile güncelleyin.

Panjurları Güncelle

Hem üst panjur hem de alt panjur metin modüllerini seçmek için çoklu seçimi kullanın ve aşağıdakileri güncellemek için her ikisi için eleman ayarlarını açın:

• Gövde İçeriği: d

• Arka plan: rgba(0,0,0,0.9)
• Metin Metin Rengi: #ffffff
• Metin Metin Boyutu: 450px(masaüstü), 70vw (tablet ve telefon)
• Karışım Modu: Çarpma

Üst örtücü metin modülü ayarlarını açın ve aşağıdaki dönüştürme seçeneklerini güncelleyin:

• Dönüştürme Ölçeği (X ve Y): %100 (varsayılan)
• Dönüştür Y eksenini çevir: -101
• Dönüştür Döndür Z ekseni: -45deg
• Orijini dönüştür: sol üst

Ardından alt örtücü metin modülü ayarlarını güncelleyin ve aşağıdaki dönüştürme seçeneklerini güncelleyin:

• Dönüştürme Ölçeği (X ve Y): %100 (varsayılan)
• Y eksenini dönüştür: %101
• Dönüştür Döndür Z ekseni: -45deg
• Orijini dönüştür: sağ alt

Sonuç

Daha Fazla Örnek ve Olasılıklar

Burada aynı teknikleri kullanan birkaç örnek tasarım daha var.

İşte tasarım # 2'ye benzer, ancak panjurlarda dönüşüm ölçeği olmayan bir tane. Ayrıca ışık kutusu efektinin görüntü üzerinde nasıl çalıştığını da gösterir.

Ve işte panjurları yatay olarak kaydırmak için transform translate kullanan başka bir örnek.

Nihai sonuçlar

Son düşünceler

Divi'de bölünmüş metin deklanşör animasyonlarıyla görüntü bindirmeleri oluşturmak, görüntülerinizi öne çıkarmak ve ziyaretçilerin yeni bir şekilde ilgisini çekmek için etkili bir yaklaşım olabilir.

Umarım bu, kendi tasarımlarınızı eklemek ve farklı renkler, yazı tipleri, karışım modları vb. kullanarak animasyon efektlerini dönüştürmek için yaratıcılığınızı harekete geçirir. Olasılıklar sonsuz görünüyor.

Yorumlarda sizden haber bekliyorum.

Şerefe!