Okuma İlerleme Çubuğu Yapımı

Bazı blog, haber sitelerinde karşılaşabileceğiniz olan okumaya göre artıp, azalan ilerleme çubuğu (progress bar) yapımından bahsettim. Nasıl yapılır merak ediyorsanız yazının devamını okuyabilirsiniz

Merhabalar,

Bu yazımda bazı blog, haber sitelerinde karşılaşabileceğiniz olan okumaya göre artıp, azalan ilerleme çubuğu (progress bar) yapımından bahsedeceğim.

Html, Css, Javascript üçlüsünü kullanarak bu işlemi gerçekleştireceğiz. Yine sayfanın tüm yüksekliğini ölçme, yüzde kaçında olduğu gibi tüm event işlemlerini Javascript tarafında yapacağız. Temel yapıdan başlayarak Html’ de çubuğu göstereceğimiz bir div oluşturalım.

<div id="cubuk"></div> 

İlerleme çubuğumuzu göstereceğimiz div elementini Html tarafına yerleştirdik. Şimdi sıra geldi bu ilerleme çubuğunun tasarımına. Güzel görünmek her ilerleme çubuğunun hakkı 🙂

#cubuk {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 5px;
    z-index: 1000;
    background: #a2214d;
} 

Sayfanın en üstüne sabit 5px yüksekliğe sahip olacak bir şekilde özel bir arka plan rengi vererek çubuğumuzu yerleştirdik. Şuanda hiçbir şey görünmeyecektir çünkü bir genişliği bulunmamaktadır. 

O yüzden Javascript tarafına geçme zamanımız geldi.

function guncelle(){

// scroll neredeyse sayfanın yüksekliğine oranla 
// çubuğumuzun genişliğini ayarlayacak fonksiyonu tanımlıyoruz
let cubuk = document.getElementById('cubuk'), // id'si cubuk olan elementi alıp cubuk degişkenine atıyoruz
    elem = document.documentElement,// document uzerinden documentelement objesine daha hızlı ulaşmak için onu da degişkene atıyoruz
    yukseklik = elem.scrollHeight, // tüm sayfanın yüksekliğini alıp yukseklik değişkenine atıyoruz
    docBody = document.body, // document üzerinden body elementini değişkene atıyoruz
	scrollTop = elem['scrollTop'] || docBody['scrollTop'], // element veya body'nin dikey olarak pozisyonu
	scrollBottom = (elem['scrollHeight'] || docBody['scrollHeight']) - window.innerHeight, // tüm sayfanın yüksekliğinden pencerenin yüksekliğini çıkart
	scrollPercent = scrollTop / scrollBottom * 100 + '%'; // çubuğun genişliğini ayarlayan bölme işlemi
	
	
    cubuk.style.width = scrollPercent // cubuk id'li elemente genişlik yüzdesini ver
};
// her scroll eventi olduğunda yukarıda tanımladığımız guncelle fonksiyonunu çağırıyoruz
window.addEventListener('scroll', guncelle);

Javascript tarafında da işlemimiz yukarıdaki gibi olmaktadır. Her satırın ne işlev gördüğünü kod içerisinde yorum satırında özetle anlatmaya çalıştım. Yazı, haber paylaştığınız veya sizden yapılması istenen bir sitede bu özelliği kolaylıkla yukarıdaki kodlar sayesinde kullanabilirsiniz.

Codepen üzerinden de canlı olarak test edebilmeniz için paylaşım yaptım inceleyebilirsiniz.

[codepen_embed height=”265″ theme_id=”dark” slug_hash=”yLaXwWa” default_tab=”html,result” user=”furkangiray_com”]See the Pen Okuma İlerleme Çubuğu Yapımı by furkangiray.com (@furkangiray_com) on CodePen.[/codepen_embed]

Umarım anlaşılır olmuştur ve bir gün işinize yarar.

Mutlu Kodlamalar 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
Javascript Metni Kopyala Butonu
Devamını Oku

Input Metni Kopyala Butonu

Bu yazımda Javascript ile input, textarea gibi form elemanları içindeki veriyi kopyalayan bir buton yapımı örneğinden bahsettim. Detaylar için yazımı kontrol edebilirsiniz.

Devamını Oku

Butona Dalga Efekti Verme
Devamını Oku

Butona Dalga Efekti Verme

Çoğunlukla android cihazlarda veya materializecss.com üzerinde görebileceğiniz butona tıklandığında oluşan dalga efektinden bahsettim. Merak edenler için yazının devamını okuyabilirsiniz.

Devamını Oku