Ana İçeriğe Geç

Divi ile kaydırırken canlanan daire sayaçları nasıl oluşturulur

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Animasyonlu daire sayaçları, bir web sayfasında eğlenceli etkileşimle bilgi (istatistikler veya metrikler gibi) sunmanın popüler bir yoludur. Aslında Divi'nin daire sayaç modülünü zaten biliyor olabilirsiniz, bu da Divi sitenize daire sayaçlarını hızlı ve kolay bir şekilde eklemenizi sağlar. 

Bununla birlikte, bu eğitimde, siz kaydırdıkça canlanan tamamen özel daire sayaçlarını nasıl oluşturacağınızı göstereceğiz! Bunları oluşturmak için herhangi bir harici özel CSS'ye ihtiyacımız olmayacak. İşin püf noktası, birkaç üst üste bindirilmiş ve animasyonlu modülü hassas bir şekilde yönetmek için Divi'nin Katmanlar işlevinden yararlanmaktır.

Olası Sonuç

İşte bu derste oluşturacağımız animasyonlu daire bölücülerine hızlı bir genel bakış.

kaydırma hareketli daire sayaçları

Divi ile gezinirken canlanan dört daire sayacının oluşturulması

Kesit ve çizgi konfigürasyonu

İlk olarak, varsayılan bölüme dört sütunlu bir satır ekleyin.

kaydırma hareketli daire sayaçları

Ardından, bölüm ayarlarını açın ve bir üst ve alt kenar boşluğu ekleyin, böylece oluşturacağımız daire sayaçlarının kaydırma etkilerini test etmek için yeterli alana sahip oluruz.

  • Kenar boşluğu: 85vh yüksek, 85vh düşük
kaydırma hareketli daire sayaçları

Ardından hat ayarlarını açın ve aşağıdakileri güncelleyin:

  • Oluk genişliği: 1
  • Genişlik:% 100
  • Maksimum genişlik: 1200 piksel
kaydırma hareketli daire sayaçları

Katmanlar görünümünü kullanma

Animasyonlu daire sayaçlarını oluşturmaya başlamadan önce Divi Layers işlevini dağıttığınızdan emin olun. Bunu, alt ayarlar menüsündeki gri katmanlar simgesine tıklayarak yapabilirsiniz.

kaydırma hareketli daire sayaçları

Çok sayıda örtüşen öğe (veya katman) oluşturacağımız için, katman kutusu gelecekte katmanlarımızı yönetmek için kesinlikle yararlı olacaktır.

Animasyonlu daire sayacının oluşturulması # 1 (% 25)

Bu ilk animasyonlu daire sayacı, kaydırma üzerindeki dairenin% 25'ine kadar hareketlendirecek ve kaydırma ile karışacak olan merkeze karşılık gelen yüzde metnine sahip olacaktır. Tam daire sayacı tasarımını oluşturmak için, birkaç örtüşen metin bölücü ve modül kullanacağız. İşte nasıl yapılacağı.

Arka Çember

Arka daireyi oluşturmak için daire şeklinde şekillendireceğimiz ve ona arka plan rengi vereceğimiz bir ayırıcı modül kullanacağız.

Bir ayırma modülü ekleyin
kaydırma hareketli daire sayaçları

Bölücüyü katman görünümünde yukarı çekin ve etiketi "backcircle" olarak değiştirin. Ardından ayırma modülünün ayarlarını açın ve aşağıdakileri güncelleyin:

  • Bölücüyü göster: HAYIR
  • Arka plan rengi: # c3e0e5
kaydırma hareketli daire sayaçları

Tasarım parametrelerini aşağıdaki gibi güncelleyin:

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

  • Genişlik: 250 piksel
  • Yükseklik: 250px
  • Kenar boşluğu: Üstte 25 piksel, altta 25 piksel, solda 25 piksel
  • Yuvarlatılmış köşeler:% 50
kaydırma hareketli daire sayaçları

Dönen renk çubuğu

Daire sayacının bir sonraki kısmı, dönen renk çubuğu olacaktır. Tasarımı yeniden başlatmak için önceki bölücüyü (arka daire) çoğaltın. Ardından yeni ayırıcıyı "renk çubuğu" etiketiyle güncelleyin.

kaydırma hareketli daire sayaçları

Dönen renk çubuğu efekti oluşturmak için, bu bölücüyü çubuk için kullanmak istediğimiz renge sahip yarım daireye çevirmemiz gerekiyor.

Renk çubuğu ayırıcı ayarlarını açın ve aşağıdakileri güncelleyin:

  • Arka plan rengi: yok
  • Sol renk gradyan arka planı: # 121b55
  • Sağdaki gradyan arka planı rengi: rgba (255,255,255,0)
  • Gradyan yönü: 90 derece
  • Başlangıç ​​konumu:% 50
  • Son mevki:% 0
kaydırma hareketli daire sayaçları

Bazı tarayıcılarda, katmanlar arasında istenmeyen rengi gösteren küçük bir örtüşme sorunu vardır. Bunu önlemek için, bu yarım daireyi biraz daha küçülteceğiz ve ofseti buna göre ayarlayacağız.

  • Genişlik: 248px
  • Yükseklik: 248px
kaydırma hareketli daire sayaçları

Renk çubuğunun çemberini arka çemberin üzerine binmek için bölücüye aşağıdaki gibi mutlak bir konum verin:

  • Pozisyon: mutlak
  • Dikey ofset: 26 piksel
  • Yatay ofset: 26 piksel
kaydırma hareketli daire sayaçları

Ardından dairesel çubuğu 90 derece (veya dairenin% 25'i) döndürmek için aşağıdaki kaydırma efektini ekleyin.

Döner Efektler sekmesi altında ...

  • Başlangıç ​​rotasyonu: 0 derece (pencerenin% 15'inde)
  • Ortalama rotasyon: 90 derece (görüntü alanının% 20 -% 25'inde)
  • Dönme sonu: 90 derece (görüntü alanının% 30'unda)
kaydırma hareketli daire sayaçları

Buradaki dönme yüzdeleri ve değerleri bu noktada tam anlamıyla mantıklı görünmeyebilir. 180 derecede (dairenin% 50'si) biten bir sonraki daire sayacını oluşturduğumuzda dönüşü daha sonra güncellemeyi kolaylaştırıyoruz. Bu noktada önemli olan, dönüşün 90 derecede (veya% 25) bitmesidir.

Kalkan

Daire sayacımızın bir sonraki öğesi, renk çubuğu dairesinin dönerken sol tarafını gizleyen başka bir yarım daire olan kalkan dediğim şeydir.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

 Kalkanı oluşturmak için, daha önce oluşturduğumuz ilk Back Circle bölücü modülünü çoğaltın. Ardından bunu "Renk Çubuğu" ayırma modülünün altına sürükleyin ve kolay başvuru için etiketi "kalkan" olarak güncelleyin.

kaydırma hareketli daire sayaçları

Kalkan bölücü ayarlarını açın ve aşağıdakileri güncelleyin:

  • Arka plan rengi: yok
  • Sol degrade arka plan rengi: # c3e0e5 (arka daireyle aynı)
  • Sağdaki gradyan arka planı rengi: rgba (255,255,255,0)
  • Gradyan yönü: 90 derece
  • Başlangıç ​​konumu:% 50
  • Son mevki:% 0
kaydırma hareketli daire sayaçları

Şimdi modüle aşağıdaki gibi mutlak bir konum verin:

  • Pozisyon: mutlak
  • Dikey ofset: 25 piksel
  • Yatay ofset: 25 piksel
kaydırma hareketli daire sayaçları

Ön daire

Daire sayacının bir sonraki bölümü, önceki katmanların orta kısmını gizleyecek ve dış kenarı açığa çıkaracak olan ön dairedir.

Oluşturmak için, arka daire bölücüyü çoğaltın, kalkan bölücü modülünün altına bırakın ve etiketi "ön daire" olarak güncelleyin.

kaydırma hareketli daire sayaçları

Ön daire ayırma modülünün ayarlarını açın ve aşağıdakileri güncelleyin:

  • Arka Plan Rengi: #ffffff
  • Genişlik: 200px
  • Yükseklik: 200px
kaydırma hareketli daire sayaçları

Ardından mutlak konumu aşağıdaki gibi ekleyin:

  • Pozisyon: mutlak
  • Dikey ofset: 50 piksel
  • Yatay ofset: 50 piksel
kaydırma hareketli daire sayaçları

Renk değişikliği sayısı

Bu ilk daire sayacının son parçası, döner çubuk tarafından gösterilen değere karşılık gelen renk değişim sayısıdır.

Oluşturmak için, ön daire ayırma modülünün altına yeni bir metin modülü ekleyin.

kaydırma hareketli daire sayaçları

Katmanlar kutusunda, yeni metin modülünü "num1" olarak adlandırın. Ardından ayarları açın ve gövdeyi "% 25" olarak güncelleyin.

kaydırma hareketli daire sayaçları

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

  • Metnin yazı tipi ağırlığı: kalın
  • Metin boyutu: 25px
  • Metin satırının yüksekliği: 2em
  • Metnin hizalanması: orta
kaydırma hareketli daire sayaçları
  • Genişlik: 200px
  • Yükseklik: 200px
  • Yuvarlatılmış köşeler:% 50
kaydırma hareketli daire sayaçları
  • Dolgu: 75 pikselin üstünde
  • Pozisyon: mutlak
  • Dikey ofset: 50 piksel
  • Yatay ofset: 50 piksel
kaydırma hareketli daire sayaçları

Şimdi metin daire sayacında mükemmel bir şekilde ortalanmalıdır.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Solma efektini eklemek için aşağıdaki kaydırma efektlerini güncelleyin:

Fade In and Fade Out sekmesinin altında ...

  • Solmaya giriş ve çıkışı etkinleştir: EVET
  • Başlangıç ​​opaklığı:% 0 (pencerenin% 10'unda)
  • Ortalama opaklık:% 100 (pencerenin% 20'sinde)
  • Son Opaklık:% 100 (görüntü alanının% 100'ünde)
kaydırma hareketli daire sayaçları

Dairesel sayaç için bu kadar. Sonucu keşfedin.

kaydırma hareketli daire sayaçları

Şimdi yapmanız gereken tek şey, şimdiye kadar yaptığımız şeyi diğer sütunlarda çoğaltmak ve sayacı benzersiz kılmak için farklı değerleri değiştirmek.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
1 hisseleri
hisse1
cıvıltı
Enregistrer