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.
Metin modülü ekle
Ardından sütuna yeni bir metin modülü ekleyin.
içindekiler
için içindekiler sütununa aşağıdaki HTML kodunu kutuya yapıştırın içindekiler:
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
- 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.
Ü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.
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.
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
Ardından, telefon ekranındaki bölücünün yüksekliğini şu şekilde güncelleyin:
- Yükseklik: 15 piksel (telefon)
Ü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.
Ardından renkleri degrade arka plan üzerinde ters çevirin.
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
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.
Ardından ayırıcıyı görüntülemek için HAYIR'ı seçin.
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
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
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
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ı
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
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!