Metin arka planı kaydırma animasyonu oluşturmak, metninize renkli animasyonlu dokular eklemenin benzersiz bir yoludur. Site Web kullanıcı sayfayı kaydırırken. İle birlikte Divi, birkaç temel tekniği öğrendikten sonra süreç şaşırtıcı derecede kolaydır.

Bu eğitimde, yalnızca yerleşik parametrelerin gücünü kullanacağız. Divi renkli bir metin arka planı kaydırma animasyonu içeren 3 benzersiz tasarım oluşturmak için. Hatta yepyeni bir görünüm için her tasarımın karanlık bir versiyonunu nasıl oluşturacağınızı göstereceğiz.

Başlayalım!

Olası Sonuç

Bugün inşa edeceğimiz tasarımlara bir göz atın.

Tasarım 1: Yatay kaydırma efektli metin arka plan gradyanı

Bu ilk tasarım, ekran filtreli bir metin modülünün arkasında renkli bir ayırma modülünü 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.

Divi sütun düzenini seçin

Metin modülü ekle

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

Divi metin modülü ekle

içindekiler

için içindekiler sütununa aşağıdaki HTML kodunu kutuya yapıştırın içindekiler:

Parça kodunu kaydedin

Metni biçimlendirme

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

  • Arka Plan Rengi: #ffffff
  • Metin Yazı Tipi Stili: TT
  • Metin rengi: # 000000
  • Metin boyutu: 100 piksel (masaüstü), 40 piksel (telefon)
  • Metin harf aralığı: 0.15em
  • Metin satırının yüksekliği: 1em
  • Metnin hizalanması: orta
Divi metin özelleştirme
  • Başlık Yazı Tipi: Merriweather
  • Başlık yazı tipi ağırlığı: kalın
  • Başlık yazı tipi stili: TT
  • Üstbilgi Metni Hizalama: Merkez
  • Üstbilgi Metin Rengi: # 000000
  • Üstbilgi Metin Boyutu: 200px (Masaüstü), 80px (Telefon)
  • Başlık harfi aralığı: 0.15em
  • Başlık satırının yüksekliği: 1em

Dolgu ve filtre

Şimdi metin modülüne biraz dolgu ve ekran filtresi eklememiz gerekiyor. Arka plan renklerinin / modlarının metnin arkasında gösterilmesine izin veren bu tasarımın çalışması için filtreye ihtiyaç vardır.

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

  • dolgu: 15 piksel yüksek, 20 piksel düşük
  • Karışım Modu: Ekran

Not: Ekran harmanlama modu en iyi beyaz arka plan üzerinde siyah metinle çalışır. Siyah bir arka plan üzerinde beyaz metin kullanmak istersek, Çarpma harmanlama modunu kullanırdık.

Divi metin modülü aralık yapılandırması

Üst ve alt ayırıcı

Metin modülümüz tamamlandığında, ek bir tasarım öğesi için bazı ayırıcılar (metin modülünün üstünde ve altında) ekleyelim.

Alt ayırıcı ekle

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

Divi ayırıcı modülü ekle
Daha yüksek ayırma ayarları

Ayırıcı ayarlarını açın ve ayırıcıyı görüntülemek için HAYIR'ı seçin.

divi metin arka plan kaydırma efektleri

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

  • Sol degrade arka plan rengi: # 000000
  • Sağdaki degrade arka plan rengi: #ffffff
  • Gradyan Yönü: 90deg
  • Başlama Konumu:% 48
  • Bitiş Pozisyonu:% 0
  • Karışım Modu: Ekran
Renk ayırıcı yapılandırması

Ardından, telefon ekranındaki bölücünün yüksekliğini şu şekilde güncelleyin:

  • Yükseklik: 15 piksel (telefon)
Divi ayırıcı yapılandırması

Üst ayırıcı ekle

Üst bölücüyü oluşturmak için, önceki alt bölücüyü çoğaltın ve katman görüntüleme alanını kullanarak metin modülünün üzerine sürükleyin.

Divi ayırıcı ekleme

Ardından renkleri degrade arka plan üzerinde ters çevirin.

Gradyan arka planı ekleme

Satır parametrelerini güncelleme

Üst ve alt ayırıcılarımız yerleştirildikten sonra, hat parametrelerini aşağıdaki gibi güncelleyin:

  • Oluk genişliği: 1 (modüller arasındaki düşük kenar boşluklarını kaldırmak için)
  • Maksimum genişlik: 600 piksel (masaüstünde ve tablette tutarlı bir tasarım tutmak için)
  • Çizgi hizalama: merkez
  • Dolgu: 0 piksel yüksek, 0 piksel düşük
  • Yatay taşma: gizli
  • Dikey taşma: gizli
Divi satırı parametresini özelleştirin

Animasyonlu metnin arka plan rengi için bir ayırıcı oluşturun

Bu ilk tasarımın son öğesi, kaydırma üzerindeki metnin 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 ayırma modülü ekleyin.

Ayırıcı yerleştirme

Ardından ayırıcıyı görüntülemek için HAYIR'ı seçin.

Divi ayırıcıyı göster

Arka plan ayırıcı ayarları

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

  • Sol degrade arka plan rengi: # e02b20
  • Doğru arka plan gradyan rengi: # 8300e9
  • Gradyan Yönü: 90deg
  • Başlama Konumu:% 30
  • Bitiş Pozisyonu:% 70
Divi arka bölücü

Ayırıcının yüksekliğinin, metin modülündeki tüm metnimizi ve üst ve alt ayırıcıları renklendirecek kadar yüksek olmasını istiyoruz. Bu tasarım için yüksekliği 400px olarak ayarlayın.

  • Yükseklik: 400px
Bölücü bölücü yüksekliği

Ardından, bölücüye, onu diğer modüllerin doğrudan üzerine konumlandırması için mutlak bir konum verin. Bölücüyü diğer modüllerin arkasına yerleştirmek için Z endeksini kullanın.

  • Pozisyon: Mutlak
  • Z endeksi: -1
Dizin ayırıcı
Arka plan bölücü kaydırma efektleri

Ayırıcı yerindeyken tek yapmamız gereken kaydırma efektlerini kullanarak ayırıcıyı metnin arkasına taşımaktır. Divi. Bu tasarım için kaydırmaya basitçe yatay hareket ekleyeceğiz.

Aşağıdaki öğeleri güncelleyin:

Yatay hareket sekmesinin altında ...

ofis

  • Yatay hareketi etkinleştir: EVET
  • Başlangıç ​​ofseti: 6 (% 20'de)
  • Ortalama ofset: 0 (% 40 -% 60'da)
  • Son ofset: -6 (% 80'de)

telefon

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

Ayrıca, klibin ortasındaki hareket efekti için tetiği ayarladığınızdan emin olun:

  • Hareket Efekti Tetikleyicisi: Elemanın Ortası
Animasyon yapılandırması

Bölüm aralığı ekle

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

  • Kenar boşluğu: 80vh yukarıda, 80vh aşağıda
Yapılandırma boyutu bölümü divi

Son düşünceler

Bu makalede gösterilen metin arka plan animasyon tasarımları, kaydırma üzerine ekleme hareketi olmadan statik bir tasarım olarak gerçekten iyi çalışır. Bununla birlikte, ek kaydırma efektleri tasarımı gerçekten tamamen yeni bir seviyeye taşır. Daha fazla renk ve efekt denemekten çekinmeyin!

Yorumlarda sizden haber almak için sabırsızlanıyorum.

Sağlığınıza!