Letterize.js ve Anime.js ile Divi İçine Gelişmiş Metin Animasyonları Nasıl Eklenir

Divi'nin yerleşik animasyonları, web sitenize bu ekstra avantajı eklemek söz konusu olduğunda tonlarca olasılık sunar. Ancak bu animasyonlar, her seferinde bir kapsayıcıya bir animasyon eklemenize izin verir. Çoğu durumda bu genellikle fazlasıyla yeterli olsa da, ekstra yol kat etmek isteyeceğiniz projeler vardır. Örneğin, kendinizi gelişmiş metin animasyonları eklemek isterken bulabilirsiniz. Bu eğitimde, size bunu tam olarak nasıl yapacağınızı göstereceğiz. Bu eğitim, Divi'yi bir çerçeve olarak harici Javascript kitaplıklarıyla nasıl birleştireceğinizi öğrenmek istiyorsanız harika bir adımdır. Divi'nin yerleşik öğelerini ve seçeneklerini kullanarak tüm tasarımımızı oluşturacağız ve ardından gelişmiş metin animasyonları oluşturmak için letterize.js ve anime.js kitaplıklarıyla Metin Modülümüzü hedefleyeceğiz. Yaklaşımı anladıktan sonra, hayal edebileceğiniz her türlü gelişmiş metin animasyonunu oluşturabileceksiniz!

Hadi hadi bakalım!

Ön izleme

Eğiticiye dalmadan önce, farklı ekran boyutlarındaki sonuca hızlıca bir göz atalım.

masaüstü

Mobil

Gelişmiş Metin Animasyonları Düzenini ÜCRETSİZ İndirin

Ellerinizi ücretsiz gelişmiş metin animasyon düzenine koymak için önce aşağıdaki düğmeyi kullanarak 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!

1. Kahraman Bölüm Tasarımı Oluşturun

Yeni Bölüm Ekle

aralık

Yeni bir sayfa oluşturarak veya mevcut bir sayfayı açarak başlayın. Sayfanızın içine yeni bir bölüm ekleyin. Bölüm ayarlarını açın ve farklı ekran boyutlarında üst ve alt dolguyu değiştirin.

• Üst Dolgu: 180px (Masaüstü), 100px (Tablet), 50px (Telefon)
• Alt Dolgu: 180px (Masaüstü), 100px (Tablet), 50px (Telefon)

1. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak yeni bir satır ekleyerek devam edin:

aralık

Henüz herhangi bir modül eklemeden, satır ayarlarını açın ve tüm varsayılan alt dolguyu kaldırın.

• Alt Dolgu: 0px

Sütuna Metin Modülü #1 Ekle

H1 Kopyasını Ekle

Bu satırda ihtiyacımız olan tek modül bir Metin Modülüdür. Seçtiğiniz bazı H1 içeriğini ekleyin.

H1 Metin Ayarları

Modülün tasarım sekmesine gidin ve H1 metin ayarlarını aşağıdaki gibi değiştirin:

• Başlık Yazı Tipi: Montserrat
• Başlık Metni Rengi: rgba(232,232,232,0.41)
• Başlık Metni Boyutu: 80px (Masaüstü), 50px (Tablet), 40px (Telefon)
• Başlık Harf Aralığı: -10px (Masaüstü), -4px (Tablet), -3px (Telefon)
• Başlık Çizgisi Yüksekliği: 0,6em (Masaüstü), 0,7em (Tablet), 0,8em (Telefon)

2. Satır Ekle

Sütun Yapısı

Aşağıdaki sütun yapısını kullanarak bir öncekinin hemen altına başka bir satır ekleyin:

boyutlandırma

Satır ayarlarını açın ve boyutlandırma ayarlarında maksimum genişliği değiştirin.

• Maksimum Genişlik: 1680 piksel

aralık

Sonraki tüm alt kenar boşluğunu ve dolguyu çıkarın.

• Alt Kenar Boşluğu: 0px
• Alt Dolgu: 0px

Sütuna Resim Modülü Ekle

İllüstrasyon Yükle

Ardından, bir Görüntü Modülü ekleyin ve bu yazının başında indirebileceğiniz klasörde bulabileceğiniz ücretsiz illüstrasyonu yükleyin.

boyutlandırma

Modülün tasarım sekmesine gidin ve görüntü üzerinde tam genişliğe zorlayın.

• Tam Genişliği Zorla: Evet

aralık

Sonra biraz negatif alt kenar boşluğu ekleyin.

• Alt Marj: -%12

Animasyon

Ve aşağıdaki animasyon ayarlarını ekleyerek modül ayarlarını tamamlayın:

• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 3000ms

3. Satır Ekle

Sütun Yapısı

Bir sonraki ve son satıra. Aşağıdaki sütun yapısını kullanın:

aralık

Satırın tasarım sekmesine gidin ve bazı özel dolgu değerleri ekleyin.

• Üst Dolgu: %10
• Alt Dolgu: 5%
• Sol Dolgu: %3
• Sağ Dolgu: %3

Kutu Gölge

Ardından, ince bir kutu gölgesini etkinleştirin.

• Kutu Gölge Bulanıklığı Gücü: 80px
• Gölge Rengi: rgba(0,0,0,0.06)

Animasyon

Ve aşağıdaki animasyonu ekleyerek satır ayarlarını tamamlayın:

• Animasyon Stili: Soluk
• Animasyon Gecikmesi: 3000ms

Sütuna Metin Modülü #2 Ekle

İçerik Ekle

Modül ekleme zamanı. İhtiyacımız olan ilk modül, bazı açıklama içeriğine sahip bir Metin Modülüdür.

Metin Ayarları

Modülün tasarım sekmesine gidin ve metin ayarlarını buna göre değiştirin:

• Metin Yazı Tipi: Lato
• Metin Boyutu: 18px
• Metin Harf Aralığı: 1px
• Metin Satır Yüksekliği: 2.7em

Sütuna Düğme Modülü Ekle

Kopya Ekle

İhtiyacımız olan son modül bir Düğme Modülü. Seçtiğiniz bir kopyayı girin.

Düğme Ayarları

Modülün tasarım sekmesine gidin ve düğme ayarlarını aşağıdaki gibi değiştirin:

• Düğme İçin Özel Stiller Kullan: Evet
• Düğme Metin Boyutu: 16px
• Düğme Metin Rengi: #171cff
• Düğme Kenar Genişliği: 0px
• Düğme Sınır Yarıçapı: 0px

• Düğme Yazı Tipi: Montserrat
• Düğme Yazı Tipi Stili: Büyük Harf

aralık

Ardından, boşluk ayarlarına aşağıdaki dolgu değerlerini uygulayın:

• Üst Dolgu: %2
• Alt Dolgu: %2
• Sol Dolgu: %5
• Sağ Dolgu: %5

Kutu Gölge

Aşağıdaki kutu gölgesini ekleyerek modül ayarlarını tamamlayın:

• Kutu Gölgesi Dikey Konumu: 5px
• Kutu Gölge Yayılma Gücü: -2px
• Gölge Rengi: #171cff

2. Başlığa CSS Sınıfı Ekleyin

Metin Modülü #1'i açın ve Metin Sekmesine tıklayın

Artık tüm tasarım öğelerini yerleştirdiğimize göre, gelişmiş metin animasyonlarını başlığımıza eklemenin zamanı geldi. H1 kopyasını içeren Metin Modülünü açın ve metin sekmesini seçin.

H1 Etiketine CSS Kimliği Ekle

H1'in içine özel bir CSS kimliği ekleyin.

• ID=”başlıkKopya”

3. Letterize ve Anime Kitaplıkları Ekleyin

Sütuna Kod Modülü Ekle

Animasyonları oluşturmak için letterize.js ve anime.js kitaplıklarını kullanıyoruz. Bu kitaplıkları eklemek için son satırınızın sütununa yeni bir Kod Modülü ekleyin.

Her İki Kitaplığı da Ekle

Ardından, kitaplıklara geri götüren aşağıdaki kaynakları içeren iki farklı komut dosyası etiketi ekleyin:

• src=”https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”
• src=”https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

4. Animasyon Kodu Ekle

Bireysel Düzeyde Mektup için Animasyon

Bu öğreticinin son bölümünde, letterize.js ve anime.js kitaplıklarının parçası olan animasyon kodunu ekleyeceğiz. Bu gönderinin önizlemesinde görebildiğiniz efekti elde etmek için iki tür animasyon uygulayacağız. İlk animasyon her harfe ayrı ayrı ve ardışık olarak uygulanır. Bu, letterize.js kitaplığı ile sağlanır. Bu kitaplık, aşağıdaki kodun ilk kısmıyla birlikte, kopyanızdaki her harfi ayrı bir yayılma alanına yerleştirir. Bu yayılma alanları, daha sonra, animasyon süreci boyunca ayrı ayrı hedeflenecektir. Aşağıdaki kodu script etiketleri arasına yerleştirdiğinizden emin olun.

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

Her ekleme işlevi, bir animasyon zaman çizelgesinde bir animasyonu temsil eder. Bu animasyonlar, her harf için ayrı bir düzeyde geçerlidir. Bu ekleme işlevlerini istediğiniz gibi değiştirebilir, yenilerini ekleyebilir veya mevcut olanları kaldırabilirsiniz, sadece son ekleme işlevinin bir ';' ile düzgün şekilde kapatıldığından emin olun. sonunda (yukarıdaki kodda görebileceğiniz gibi). Bu ekleme işlevlerinin içine farklı CSS özellikleri ekleyebilirsiniz. Anime.js belge örneklerinde özellikler ve bunların nasıl kullanıldığı hakkında daha fazla bilgi edinebilirsiniz. Bu öğreticide, zaman çizelgesinin nasıl çalıştığını göstermek için bilerek birden fazla animasyon ekledik, ancak muhtemelen kendi projeleriniz için daha ince veya daha kısa bir şeyle gitmek isteyeceksiniz.

Cümle için Animasyon

Her harfi ayrı ayrı hedefleyen animasyonun ilk bölümünü ekledikten sonra, animasyonumuzun ikinci bölümüne geçeceğiz. Bu kısım, bir bütün olarak tüm kopyayı hedefler. Animasyon yaklaşımı yukarıdakiyle aynıdır; tüm modülü bir zaman çizelgesi animasyonunun içine yerleştiriyoruz. Her ekleme işlevi, o zaman çizelgesi içinde farklı bir animasyonu temsil eder. Bu ekleme işlevlerini değiştirebilir, yenilerini ekleyebilir veya mevcut olanları kaldırabilirsiniz. Aşağıdaki yazdırma ekranında görebileceğiniz gibi, bu yeni kodu, komut dosyası kodunun bitiminden önce yerleştirdiğinizden emin olun.

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

Span için Özel CSS Ekle

Şimdi, harflerimizin her biri için ayrı bir yayılma alanı oluşturduğumuz için, harflerin yan yana görünmesini sağlamak için her bir yayılma alanının display özelliğini değiştirmemiz gerekecek. Bunu yapmak için kod modülümüze biraz CSS kodu ekleyeceğiz. Kodu stil etiketleri arasına yerleştirdiğinizden emin olun.

#headlineCopy span {
display: inline-block;
}

Ön izleme

Artık tüm adımların üzerinden geçtik, şimdi farklı ekran boyutlarındaki sonuca son bir göz atalım.

masaüstü

Mobil

Son düşünceler

Bu gönderide, başlığınıza nasıl gelişmiş metin animasyonları oluşturacağınızı gösterdik. Tüm tasarımı Divi içinde oluşturduk ve çerçeveyi letterize.js ve anime.js kitaplıkları ile birleştirdik. Herhangi bir sorunuz veya öneriniz varsa, aşağıdaki yorum bölümüne yorum bırakmaktan çekinmeyin!

Divi hakkında daha fazla bilgi edinmek ve daha fazla ücretsiz Divi almak istiyorsanız, e-posta bültenimize ve YouTube kanalımıza abone olduğunuzdan emin olun, böylece her zaman bu ücretsiz içeriği bilen ve bu ücretsiz içerikten yararlanan ilk kişilerden biri olursunuz.