Divi ile Renkli Metin Arka Planı Kaydırma Animasyonu Nasıl Oluşturulur

Metin arka planı kaydırma animasyonu oluşturmak, kullanıcı sayfayı aşağı kaydırırken web sitenizdeki metne renkli hareketli dokular eklemenin benzersiz bir yoludur. Divi ile, birkaç temel tekniği öğrendikten sonra süreç şaşırtıcı derecede kolaydır.

Bu öğreticide, renkli metin arka plan kaydırma animasyonu içeren 3 benzersiz tasarım oluşturmak için Divi'nin yerleşik ayarlarının gücünden başka bir şey kullanacağız. Yepyeni bir görünüm ve his için her tasarımın karanlık bir versiyonunu nasıl oluşturacağınızı bile göstereceğiz.

Başlayalım!

Gizlice Bakış

İşte bugün inşa edeceğimiz tasarımlara hızlı bir bakış.

Metin Arka Planı Kaydırma Animasyon Düzenlerini ÜCRETSİZ olarak indirin

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.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Builder'a sürüklemeniz yeterlidir.

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.

Tasarım 1: Yatay Kaydırma Efektli Metin Arka Plan Gradyanı

Bu ilk tasarım, ekran filtreli bir metin modülünün arkasındaki renkli bir ayırıcı modülü canlandıran yatay bir kaydırma efektine sahip olacak.

Sütun Ekle

Başlamak için, varsayılan bölüme tek sütunlu bir satır ekleyin.

Metin Modülü Ekle

Ardından sütuna yeni bir metin modülü ekleyin.

İçerik

Sütun içeriği için aşağıdaki HTML'yi içerik kutusuna yapıştırın:

Metin Tasarımı

Ardından metin tasarımını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #ffffff
• Metin Yazı Tipi Stili: TT
• Metin Metin Rengi: #000000
• Metin Metin Boyutu: 100px (masaüstü), 40px (telefon)
• Metin Harf Aralığı: 0.15em
• Metin Satırı Yüksekliği: 1em
• Metin Hizalama: Merkez

• Başlık Yazı Tipi: Merriweather
• Başlık Yazı Tipi Ağırlığı: Kalın
• Başlık Yazı Tipi Stili: TT
• Başlık Metni Hizalama: Orta
• Başlık Metni Rengi: #000000
• Başlık Metni Boyutu: 200px (masaüstü), 80px (telefon)
• Başlık Harf Aralığı: 0.15em
• Yön Çizgisi Yüksekliği: 1em

Dolgu ve Filtre

Şimdi metin modülüne biraz dolgu ve ekran filtresi eklememiz gerekiyor. Bu tasarımın çalışması için filtre gereklidir, çünkü arka plan renklerinin/modüllerinin metnin arkasında görünmesini sağlayan şey budur.

Dolguyu ve filtreyi eklemek için aşağıdakileri güncelleyin:

• dolgu: 15 piksel üst, 20 piksel alt
• Karışım Modu: Ekran

Not: Ekran karışım modu, beyaz bir arka plan üzerinde siyah metinle en iyi sonucu verir. Siyah bir arka plan üzerinde beyaz metin kullanmak isteseydik Multiply blend modunu kullanırdık.

Üst ve Alt Bölücü

Metin modülümüz bittiğinde, ek bir tasarım öğesi için birkaç bölücü (metin modülünün üstüne ve altına) ekleyelim.

Alt Bölücü Ekle

Metin modülünün altına yeni bir ayırıcı modül ekleyin.

Üst Bölücü Ayarları

Ayırıcı ayarlarını açın ve ayırıcıyı göstermek için NOT'u seçin.

Ardından arka planı güncelleyin ve ayırıcıya metin modülüyle aynı karışım modunu aşağıdaki gibi verin:

• Degrade Arka Plan Sol Renk: #000000
• Degrade Arka Plan Sağ Renk: #ffffff
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %48
• Bitiş Konumu: %0
• Karışım Modu: Ekran

Ardından, telefon ekranındaki ayırıcının yüksekliğini aşağıdaki gibi güncelleyin:

• Yükseklik: 15 piksel (telefon)

Üst Bölücü Ekle

Üst bölücüyü oluşturmak için önceki alt bölücüyü çoğaltın ve katmanlar görünüm kutusunu kullanarak metin modülünün üzerine sürükleyin.

Ardından, degrade arka plandaki renkleri tersine çevirin.

Satır Ayarlarını Güncelle

Üst ve alt bölücülerimiz yerleştirildikten sonra, satır ayarlarını aşağıdaki gibi güncelleyin:

• Oluk Genişliği: 1 (modüller arasındaki alt boşlukları çıkarmak için)
• Maksimum Genişlik: 600 piksel (masaüstünde ve tablette tutarlı bir tasarım sağlamak için)
• Satır Hizalama: Merkez
• Dolgu: 0 piksel üst, 0 piksel alt
• Yatay Taşma: gizli
• Dikey Taşma: gizli

Animasyonlu Metin Arka Plan Rengi için Bölücü Oluştur

Bu ilk tasarımın son öğesi, kaydırma sırasında metin arka plan rengini canlandırmak için kullanacağımız bölücüdür. Bunu yapmak için alt bölücünün altına yeni bir bölücü modül ekleyin.

Ardından ayırıcıyı göstermek için NOT'u seçin.

Arka Plan Bölücü Ayarları

Ayırıcıyı degrade bir arka planla aşağıdaki gibi güncelleyin:

• Degrade Arka Plan Sol Renk: #e02b20
• Degrade Arka Plan Sağ Renk: #8300e9
• Gradyan Yönü: 90deg
• Başlangıç ​​Konumu: %30
• Bitiş Konumu: %70

Ayırıcının yüksekliğini, metin modülündeki tüm metnimizi ve üst ve alt ayırıcıları renklendirecek kadar yüksek olacak şekilde ayarlamak istiyoruz. Bu tasarım için yüksekliği 400 piksel olarak ayarlayın.

• Yükseklik: 400 piksel

Ardından ayırıcıya, onu doğrudan diğer modüllerin üzerine yerleştirmek için mutlak bir konum verin. Ayırıcıyı diğer modüllerin arkasına oturtmak için Z İndeksini kullanın.

• Pozisyon: Mutlak
• Z İndeksi: -1

Arka Plan Bölücü Kaydırma Efektleri

Ayırıcı konumundayken tek yapmamız gereken Divi'nin kaydırma efektlerini kullanarak ayırıcıyı metnin arkasına taşımak. Bu tasarım için kaydırma üzerine yatay bir hareket ekleyeceğiz.

Aşağıdakileri güncelleyin:

Yatay Hareket sekmesi altında…

masaüstü

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 6 (%20'de)
• Orta Ofset: 0 (%40-60'ta)
• Bitiş Ofseti: -6 (%80'de)

Telefon

• Başlangıç ​​Ofseti: 3
• Bitiş Ofseti: -3

Hareket efekti tetikleyicisini öğenin ortasına da ayarladığınızdan emin olun:

• Hareket Efekti Tetikleyicisi: Elemanın Ortası

Bölüm Aralığı Ekle

Tasarımı test etmek üzere geçici kaydırma alanı oluşturmak için bölüme aşağıdakileri ekleyin:

• Marj: 80vh üst, 80vh alt

Sonuç

İşte ilk tasarımın nihai sonucu.

Tasarım 2: Dönen Kaydırma Efektli Metin Arka Plan Gradyanı

Bu ikinci tasarım için, metin için dönen bir gradyan arka planı oluşturacağız. Ayrıca bir solma giriş ve çıkış elemanı da ekleyeceğiz.

Yinelenen Bölüm

Bir sonraki tasarımı oluşturmak için, oluşturduğumuz ilk tasarımı içeren bölümün tamamını çoğaltın.

Arka Plan Bölücü Ayarları

Ardından, metin arka planı için kullanılan Bölücü ayarlarını aşağıdaki gibi güncelleyin:

• Genişlik: 600 piksel (masaüstü), 300 piksel (telefon)
• Yükseklik: 600 piksel (masaüstü), 300 piksel (telefon)

Ardından yuvarlatılmış köşeleri aşağıdaki gibi güncelleyin:

• Yuvarlatılmış Köşeler: %50

Bu, bölücüye ekleyeceğimiz döndürme kaydırma efekti için istediğimiz dairesel bir şekil verecektir.

Ardından, daireyi metin içeriğinin arkasına konumlandırmak için dikey ofseti aşağıdaki gibi ayarlayın:

• Dikey Ofset: -100 piksel (masaüstü), -50 piksel (telefon)

Üst ve Alt Bölücü Güncellemeleri

Ayırıcı yerleştirildikten sonra, üst ayırıcı arka planını aşağıdaki gibi güncelleyin:

• Degrade Arka Plan Sağ Renk: şeffaf

Ardından alt ayırıcı arka planını aşağıdaki gibi güncelleyin:

• Degrade Arka Plan Sol Renk: şeffaf

Arka Plan Bölücü Kaydırma Efektlerini Güncelle

Üst ve alt bölücüler güncellendikten sonra, arka plan bölücüye yeni kaydırma efektleri eklememiz gerekiyor. Arka plan ayırıcı için ayarları açın ve aşağıdakileri güncelleyin:

Fading In ve Out sekmesinin altında…

• Soldurmayı ve Yavaşlamayı Etkinleştir: EVET
• Orta Opaklık: %100 (%40-60'ta)
• Bitiş Opaklığı: %0

Yukarı ve Aşağı Ölçekleme sekmesi altında…

• Yukarı ve Aşağı Ölçeklendirmeyi Etkinleştir: EVET
• Başlangıç ​​Ölçeği: %105
• Orta Ölçek: %115
• Bitiş Ölçeği: %105

Dönen sekmenin altında…

• Döndürmeyi Etkinleştir: EVET
• Başlangıç ​​Döndürme: 360deg
• Biten Rotasyon: -360deg

Yatay Hareket efektini de devre dışı bıraktığınızdan emin olun.

Sonuç

İşte tasarımın sonucu 2.

Tasarım 3: Birden Çok Hareketli Daire içeren Metin Arka Planı

Bu üçüncü ve son tasarım için, kaydırmada güzel bir animasyon için metnin arkasına hareket eden birden çok dairesel bölücü ekleyeceğiz.

Bölüm 2'yi Kopyala

Bunu yapmak için önce bölümü çoğaltın.

Üst ve Alt Bölücü Güncellemeleri

Ardından yeni/üçüncü bölümdeki üst ayırıcının ayarlarını açın ve siyah rengi degrade arka planına aşağıdaki gibi ekleyin:

• Degrade Arka Plan Sağ Renk: #000000

Alt ayırıcı için ayarları açın ve arka planı da güncelleyin.

• Degrade Arka Plan Sol Renk: #000000

Arka Plan Bölücü 1 Oluşturma

İlk arka plan bölücü önceki tasarımdan zaten var, onu küçülteceğiz ve farklı şekilde canlandıracağız.

Arka Plan Bölücü 1 Ayarları

Arka plan ayırıcı için ayarları açın ve aşağıdakileri güncelleyin:

• Genişlik: 250 piksel (masaüstü ve tablet), 125 piksel (telefon)
• Yükseklik: 250 piksel (masaüstü ve tablet), 125 piksel (telefon)
• Dikey Ofset: 0px (masaüstü, tablet ve telefon)

Arka Plan Bölücü 1 Kaydırma Efektleri

Ardından, kaydırma efektleri seçenek grubuna sağ tıklayıp "Kaydırma Dönüşüm Efektlerini Sıfırla" öğesini seçerek önceki tasarımdan aktarılan dönüştürme efektlerini sıfırlayın.

Şimdi aşağıdaki gibi yeni kaydırma efektleri ekleyebiliriz:

Dikey Hareket sekmesi altında…

masaüstü

• Dikey Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: -2
• Orta Ofset: 2 (%60'ta)
• Bitiş Ofseti: 4

Telefon

• Başlangıç ​​Ofseti: -1
• Orta Ofset: 1 (%60'ta)
• Bitiş Ofseti: 2

Yatay Hareket sekmesi altında…

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: 0
• Orta Ofset: 2 (%45-65'te)
• Bitiş Ofseti: 0 (%80'de)

Arka Plan Bölücü 2 Oluşturma

İkinci arka plan bölücüyü oluşturmak için ilk arka plan bölücüyü çoğaltın.

Arka Plan Bölücü 2 Güncellemeleri

Arka plan

Ardından, ikinci/yinelenen arka plan ayırıcının ayarlarını açın ve aşağıdaki arka plan rengini güncelleyin:

• Arka Plan Gradyanı Sol Renk: rgba(224,153,0,0.9)
• Arka Plan Gradyanı Sağ Renk: rgba(255,243,71,0.9)

Boy

Ardından boyutu aşağıdaki gibi güncelleyin:

• Genişlik: 300 piksel (masaüstü ve tablet), 150 piksel (telefon)
• Yükseklik: 300 piksel (masaüstü ve tablet), 150 piksel (telefon)

Kaydırma Efektleri

Ardından kaydırma efektlerini aşağıdaki gibi güncelleyin:

Dikey Hareket sekmesi altında…

masaüstü

• Başlangıç ​​Ofseti: 5
• Orta Ofset: 0
• Bitiş Ofseti: -5

Telefon

• Başlangıç ​​Ofseti: 2
• Orta Ofset: 0
• Bitiş Ofseti: -2

Yatay Hareket sekmesi altında…

masaüstü

• Başlangıç ​​Ofseti: 0
• Orta Ofset: 3
• Bitiş Ofseti: 2

Telefon

• Orta Ofset: 1.5
• Bitiş Ofseti: -1

Arka Plan Bölücü 3 Oluşturma

Üçüncü ve son arka plan bölücüyü oluşturmak için arka plan bölücü 2'yi çoğaltın.

Arka Plan Bölücü 3 Güncellemeleri

Arka plan

Ardından arka plan gradyan renklerini aşağıdaki gibi güncelleyin:

• Arka Plan Gradyanı Sol Renk: rgba(124,218,36,0.9)
• Arka Plan Gradyanı Sağ Renk: rgba(12,113,195,0.9)

Boy

Ardından, boyutlandırmayı aşağıdaki gibi güncelleyin:

• Genişlik: 200 piksel (masaüstü ve tablet), 100 piksel (telefon)
• Yükseklik: 200 piksel (masaüstü ve tablet), 100 piksel (telefon)

Kaydırma Efektleri

Ardından kaydırma efektlerini aşağıdaki gibi güncelleyin:

Dikey Hareket sekmesi altında…

• Başlangıç ​​Ofseti: 0
• Orta Ofset: 0
• Bitiş Ofseti: 4

Yatay Hareket sekmesi altında…

masaüstü

• Başlangıç ​​Ofseti: 6 (%20'de)
• Orta Ofset: 0 (%40-60'ta)
• Bitiş Ofseti: 6 (%80'de)

Telefon

• Başlangıç ​​Ofseti: 3
• Bitiş Ofseti: 3

İşte tasarımın nihai sonucu 3.

Nihai sonuçlar

Şimdi üç tasarımın tümü için nihai sonuçlara bakalım.

Ve işte mobildeki tasarım.

Karanlık Sürümler

Bu tasarımların koyu bir versiyonunu oluşturmak için siyah için kullanılan beyaz rengi ve beyaz için kullanılan siyah renkleri de değiştirmeniz gerekecektir. Ardından metin modülü ve üst ve alt bölücüler için Çarpma karıştırma modunu kullanın.

Tasarım 3 için bunu nasıl yapacağınız aşağıda açıklanmıştır.

İlk olarak, bölümün arka planını siyah olarak değiştirin.

Ardından metin modülü ayarlarını aşağıdaki gibi güncelleyin:

• Arka Plan Rengi: #000000
• Metin Metin Rengi: #ffffffff
• Başlık Metni Rengi: #ffffff
• Karışım Modu: Çarpma

İşte sonuç.

Ve işte karanlık versiyon uygulandığında tasarımların geri kalanı nasıl görünecek.

Son düşünceler

Bu makalede sunulan metin arka plan animasyonu tasarımları, kaydırmada ekleme hareketi olmadan statik bir tasarım olarak gerçekten harika çalışır. Ancak, ek kaydırma efektleri tasarımı gerçekten tamamen yeni bir düzeye taşıyor. Daha fazla renk ve efektle deneme yapmaktan çekinmeyin!

Yorumlarda sizden haber bekliyorum.

Şerefe!