Divi ile Scroll Animasyonlu Bar Sayaçları Nasıl Tasarlanır

Çubuk sayaçları, belirli bir değeri temsil eden ince renk animasyonuyla verileri veya metrikleri etkili bir şekilde göstermek için web genelinde kullanılır. Divi, kolaylıkla animasyonlu çubuk sayaçları oluşturmak için kullanılabilen özel bir çubuk sayacı modülüne sahiptir. Bunlar hakkında sayfalara, hizmet sayfalarına ve vaka çalışmalarına yapılan popüler eklemelerdir.

Çoğu bar tezgahı, göründükleri anda canlanıyor gibi görünür ve özelleştirilmesi zor olabilir. Bununla birlikte, bu eğitimde, size Divi kullanarak kaydırmada hareket eden tamamen özelleştirilebilir çubuk sayaçlarının (sıfırdan) nasıl oluşturulacağını göstereceğiz. Bunu yapmak için Divi'nin konum seçeneklerinden ve kaydırma efektlerinden yararlanacağız ve bunları benzersiz ve kesin şekillerde kullanacağız.

Başlayalım.

Gizlice Bakış

İşte bu eğitimde inşa edeceğimiz bar sayaçlarına hızlı bir bakış.

Düzeni ÜCRETSİZ İndirin

Ellerinizi bu eğitimdeki kaydırma efektleri düzenine sahip bar tezgahlarına 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.

Düzeni sayfanıza aktarmak için zip dosyasını çıkarmanız ve JSON dosyasını Divi Kitaplığından içe aktarmanız 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.

Bölüm 1: Bölüm, Satır ve Sütunu Optimize Etme

Satır ekle

T0 başlangıç, bölüme iki sütunlu bir satır ekleyin.

Bölüm Ayarları

Ardından bölüm ayarlarını açın ve aşağıdaki gibi bir arka plan rengi ekleyin:

• Arka Plan Col0r: #000545

Ardından, kaydırma efektlerini test etmek için bölüme bir miktar geçici kenar boşluğu ve aşağıdaki gibi bir miktar dolgu verin:

• Marj: 80vh üst, 80vh alt
• 10vw üst, 10vw alt dolgu

Satır Genişliği

Ardından, satır ayarlarını açın ve aşağıdaki genişliği ekleyin:

• Genişlik: %90
• Maksimum Genişlik: 700 piksel

Sütun Taşması

Satır içindeki iki sütunun taşmasını gizlediğinizden emin olun. Bunu yapmak için her bir sütunun ayarlarını açın ve aşağıdakileri güncelleyin:

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

Bölüm 2: Kaydırma Efektleri ile Bar Sayacı Oluşturma

Çubuk sayacı üç öğeden oluşacaktır: Bir çubuk arka planı (bölücü modül), Bir renk çubuğu (ayrıca bölücü modül) ve çubuk içeriği (bulanıklık modülü). Renkli çubuk öğesi, yatay hareket kaydırma efekti ofsetleriyle canlandırılacak olan şeydir.

Çubuk arka planıyla başlayalım.

Çubuk Arka Planı Oluşturma

Bölücü Modülü Ekle

Sütun 1'e yeni bir ayırıcı modül ekleyin.

Bölücü Ayarları

Bölücüyü Göster: HAYIR

• Arka Plan Rengi: rgba(255,255,255,0.1)

• Genişlik: 300 piksel
• Yükseklik: 70 piksel

Çubuk Sayaç Çubuğu Oluştur

Yinelenen Bölücü Modülü

Çubuk sayacı için renkli çubuk oluşturmak için, çubuğu arka plan yapmak için kullandığımız önceki bölücü modülü çoğaltın.

bölücü arka plan

Ardından arka planı yeni bir degrade arka plan rengiyle aşağıdaki gibi güncelleyin:

• Degrade Arka Plan Sol Renk: #fe7e1f
• Degrade Arka Plan Sağ Renk: #ffbc48
• Gradyan Yönü: 90deg

Bölücü Konumu

Renkli çubuğun çubuk arka planının üzerine oturmasını sağlamak için, ona Z İndeksi 1 ile mutlak bir konum vermemiz gerekir:

• Pozisyon: Mutlak
• Z İndeksi: 1

Bölücü Kaydırma Efektleri

Artık bar sayacı çubuğuna hareketi eklemeye hazırız. Bunu yapmak için, ayırıcı modülü soldan sağa hareket ettiren yatay bir kaydırma efekti kullanacağız. Sütun taşması gizli olduğundan, sütunun sol tarafının ötesine uzandığı için çubuğu görmeyeceğiz. Ama sağa doğru hareket ettikçe görünür hale geldiğini göreceğiz.

Çubuk Sayacının Yüzde Değerlerini Belirlemek İçin Ofset Değerlerini Kullanma

Ayırıcıya/çubuğa yatay hareketi eklemeden önce, çubuk sayacında görüntülenecek yüzde değerinin nasıl belirleneceğini anlamamız gerekir. Başka bir deyişle, çubuk sayacında %25'i temsil etmek istiyorsak, çubuğu çubuk arka plan genişliğinin tam olarak %25'i kadar sağa hareket ettirecek yatay hareket ofsetini bilmemiz gerekir.

Bunu anlamak için basit bir matematik yapabiliriz.

Çubuğun toplam genişliği 300 pikseldir.

Her yatay ofset değeri 100 piksele göredir (1 eşittir 100 piksel, -2 eşittir -200 piksel vb…)

Çubuğu sola (görünüm dışında) hareket ettirmek için -3 (-300 piksel) bir başlangıç ​​ofseti eklememiz gerekir. Bu, görüntüyü soldaki 300 piksele kaydırır.

Ardından kaydırma animasyonunu tamamlamak için çubuğu 300 pikselin (75 piksel olan) %25'inin üzerine taşımamız gerekiyor.

Çubuğu 75 pikselin üzerine, çubuk sayfanın dikey merkezine ulaştığında sağa taşımak için, -2.25'lik bir orta kaymaya ihtiyacımız var (çünkü -300 artı 75, -225'e eşittir). Bu muhtemelen size ilkokulda kullandığımız sayı satırlarını hatırlatıyor.

Yatay Hareket ile %25 Göster

Yatay hareketle %25'i göstermek için yatay hareket sekmesini seçin ve aşağıdakileri güncelleyin:

• Yatay Hareketi Etkinleştir: EVET
• Başlangıç ​​Ofseti: -3
• Orta Ofset: -2.25
• Bitiş Ofseti: -2.25

Bar Sayacı İçeriği Oluştur

Çubuk içeriğini oluşturmak için bir tanıtıcı modül kullanacağız. Bulanıklıklar, bar sayacı için mükemmel olacak bir başlık ve gövde metni ile birlikte sola hizalı bir simgeyi kolayca eklememizi sağlar.

Renkli çubuk bölücü modülünün altına bir tanıtım modülü ekleyin.

Bulanık İçerik

Ardından içeriği aşağıdaki gibi güncelleyin:

• Başlık: %25
• Gövde: Optimizasyon
• Simge: ekran görüntüsüne bakın

bulanık tasarım

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Simge Rengi: #ffffff
• Resim/Simge Yerleşimi: Sol
• Simge Yazı Tipi Boyutunu Kullan: EVET
• Simge Yazı Tipi Boyutu: 40px

• Metin Rengi: Açık
• Gövde Yazı Tipi: Rubik
• Gövde Yazı Tipi Stili: TT
• Gövde Harf Aralığı: 0.2em
• Gövde Çizgisi Yüksekliği: 1em

• İçerik Genişliği: %100
• Genişlik: 300 piksel
• Yükseklik: 70 piksel
• Dolgu: 15 piksel üst, 15 piksel sol

• Pozisyon: Mutlak
• Z İndeksi: 2

Bölüm 3: Ek Çubuk Sayaçları Oluşturma

Bir sonraki bölümde, aynı tekniği kullanarak daha fazla bar tezgahı yapmaya devam edeceğiz. Düzenin tasarımını tamamlamak için %50, %75 ve %100 bar sayacı oluşturacağız. Bu, kendi başınıza daha fazlasını yapmak için size iyi çalışma örnekleri vermelidir.

%50 Bar Sayacı Oluşturma

Çubuk Sayaçlı Kopya Sütun

Sütun 1'de oluşturulan ilk çubuk sayacına sahip olduğunuzda, tüm sütunu çoğaltabiliriz veya çubuk sayacı oluşturan üç modülü kopyalayıp sütun 2'ye yapıştırabiliriz. Şimdi her biri aynı çubuk sayaçlarına sahip iki sütununuz olmalıdır.

Çubuk Bölücü Ayarlarını Güncelle

Arka plan

2. sütunun içinde, renkli çubuk bölücü ayarlarını açın ve degrade arka plan renklerini güncelleyin:

• Degrade Arka Plan Sol Renk: #4c75f8
• Degrade Arka Plan Sağ Renk: #57a1ff

Kaydırma Efektleri

Ardından yatay hareket kaydırma efektini kaydırma sırasında çubuğun %50'sini dolduracak şekilde güncelleyin:

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

Bulanık İçeriği Güncelle

Ardından, 2. sütundaki tanıtım yazısı ayarlarını açın ve içeriği güncelleyin:

• Başlık: %50
• Simge: ekran görüntüsüne bakın

%75 Bar Sayacı Oluşturma

Satırı Çoğalt

Sonraki iki çubuk sayacımızın tasarımını hızlı bir şekilde başlatmak için, altında başka bir özdeş satır oluşturmak için tüm satırı çoğaltın.

Çubuk Arka Planını Güncelle ve Kaydırma Efektleri

Renkli çubuk ayırıcı modülün ayarlarını açın ve aşağıdaki arka plan renklerini güncelleyin:

• Degrade Arka Plan Sol Renk: #4c75f8
• Degrade Arka Plan Sağ Renk: #57a1ff

Ardından yatay hareket ofsetlerini aşağıdaki gibi güncelleyin:

• Orta Ofset: -.075
• Bitiş Ofseti: -0.75

Bulanık İçerik

Tanımlayıcı ayarlarını açın ve içeriği aşağıdaki gibi güncelleyin:

• Başlık: %75
• Simge: ekran görüntüsüne bakın

%100 Bar Sayacı Oluşturma

Çubuk Rengini ve Kaydırma Efektlerini Güncelle

%100 çubuk sayacı oluşturmak için 2. sütuna gidin ve renkli çubuk ayırıcı modülünün arka plan rengini aşağıdaki gibi güncelleyin:

• Degrade Arka Plan Sol Renk: #f449b4
• Degrade Arka Plan Sağ Renk: #fc845b

Ardından yatay hareket ofsetlerini aşağıdaki gibi güncelleyin:

• Orta Ofset: 0
• Bitiş Ofseti: 0

Bulanık İçeriği Güncelle

Son olarak, tanıtıcı içeriği güncelleyin:

• Başlık: %100
• Simge: ekran görüntüsüne bakın

Son sonuç

İşte nihai sonucun bir ekran görüntüsü. Son bir dokunuş olarak beşinci tema oluşturucu paketimizden özel bir arka plan resmi ekledim.

Şimdi ne kaydırma hareketi iş başında.

Son düşünceler

Umarım, bu kaydırma animasyonlu çubuk sayaçları gelecekteki bir proje için kullanışlı olacaktır. Böyle özel bir tasarıma sahip olmanın dezavantajı, renkli çubuğu belirli bir yüzde için ne kadar uzağa taşıyacağınızı hesaplamak için biraz matematik yapmanız gerekmesidir. Ancak bunun iyi tarafı, daha da benzersiz ve yaratıcı tasarımlar için daha fazla fırsatınız olmasıdır.

İlgileniyorsanız, kaydırmada da hareket eden özel daire sayaçları oluşturma konusundaki yayınımıza göz atın.

Yorumlarda sizden haber bekliyorum.

Şerefe!