CSS ile kaydırma çubuğu (scrollbar) oluşturma

Genellikle web sitelerinde bulunan kaydırma çubuklarını hepsi tarayıcıdan tarayıcıya farklılık gösterse bile aynıdır. Ancak anlatacağım basit bir yöntemle sitenizi diğerlerinden ayıracak ufak bir dokunuş yapmış olacaksınız. CSS ile kaydırma çubuğu oluşturma yazıma hoş geldiniz.

Eğer bu yazıda aradığınız şey sıfırdan kendi yazımınız olan bir kaydırma çubuğu oluşturmaksa yanlış yerdesiniz. Fatih Hayrioğlu'nun yazmış olduğu CSS ile kaydırma çubuğu özelleştirme yazısı ile gerekli bilgileri öğrenebilirsiniz.

Öncelikle bu işlemi kendiniz de yapmak isterseniz scrollbar generator şeklinde aratarak örnekleri inceleyebilir ve kendinizce düzenlemeler yapabilirsiniz. Ben ise bu yazıdaki anlatımı Webkit Scrollbar Generator üzerinden anlatacağım.

Bu siteye giriş yaptıktan sonra sizi aşağıdaki karışık bir ekran karşılayacaktır. Ben ise bu ekranı sizin için bölmelere ayırdım. Şimdi sırasıyla anlatıma geçebiliriz.

İlk bölmede yapacağınız değişiklikler kaydırma çubuğunun arka planında oynamalar yapacaktır. bg bölümü ile arka planın rengini  belirlerken, bgHover ile fare imleci arka plana geldiği zaman oluşacak renk belirlenir. bgActive ise imleç arka plana basılı tutuluyken alacağı rengi belirleyecektir.

İkinci bölmede yer alan bg bölümü, kaydırma çubuğunuzun rengini belirleyecek bölümdür. İlk bölümdeki gibi çubuğun arka planında bir değişiklik olmayacaktır. Seçtiğiniz renk çubuğunuzun rengidir.

bgHover bölümü ise, kullanıcıların fare imlecini kaydırma çubuğunun üzerine getirdiği anda alacağı renktir. bgActive bölümünden farkı ise bgHover imleç çubuğun üzerine gelirken renk değiştirirken bgActive ise kullanıcı kaydırma çubuğunun üzerine tıkladığı zaman renk değişimi gerçekleşecektir.

Birinci ve ikinci bölümlerde yer alan Size değeri boyutu ayarlarken, Curve ise çubuğun yuvarlaklık derecesini belirler.

Üçüncü bölümde herhangi bir değişiklik yapmanıza gerek yoktur. Program, site açıldığı zamandan beri varsayılan olarak bu bölümü kod üzerinde none olarak gösterir, yani istediğiniz değişikliği yapsanız bile kaydırma çubuğu tasarımında bir değişiklik olmayacaktır.

İşiniz bittikten sonra en altta yer alan kod editörü bölümü ile scrollbar kodlarınızı alıp sitenizde yer alan /head kodunun hemen üzerine ekledikten sonra sorunsuzca çalıştığını fark edeceksiniz. Benzer yazılar için Webmaster Aracı kategorisine göz atabilirsiniz.

Bu içeriği videolu anlatım olarak dinleyebilir, daha kaliteli ve açıklayıcı bir anlatım ile uygulayabilirsiniz. Keyifli seyirler. 

Siteye Yükleniyor Efekti Ekleme

Daha önce hiç yükleniyor animasyonu ile karşılaştınız mı? Bu kod sayesinde sitenize yükleniyor efekti verebilirsiniz.

Yükleniyor efekti nedir, ne için kullanılır?

Yükleniyor efekti, ilk resme benzer animasyonları siteniz yükleniyorken ziyaretçilere gösterir. Bu animasyon, web siteleri için oldukça faydalıdır. 

Eğer web sitenizin yükleme süresi çok uzunsa, ziyaretçiler web sitenizin kapalı olduğunu düşünebilir ve sitenizden ayrılabilir. Ancak bir yükleme efekti eklemeniz durumunda ziyaretçiler web sitenizin şu anda yüklenmekte olduğunu görecek ve beklemeye devam edecektir. 

Yükleme efekti eklemenin oldukça fazla yolu olsa dahi, size yazımızda anlatacağımız yöntem ile web sitenizin açılış hızında büyük değişiklikler olmadan bu kodu kullanabileceksiniz. 

Ayrıca bu efektlerden tercih alanınızı genişletmek için pek çok versiyonunu ekledik, seçtiğiniz animasyonu yorumlarda paylaşabilirsiniz. Şimdi, bu kodu sitenize nasıl ekleyebilirsiniz bundan bahsedelim.

Kodu paylaşmadan önce, bu kod en iyi şekilde jQuery 1.7.1 sürümü ile çalışır. Lütfen sitenizdeki jQuery kütüphanesi yerine aşağıdaki kütüphaneyi ekleyin.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'/> 

Eğer buraya kadarki işlemlerde sorun yaşamadıysanız, devam edebiliriz. Blogger panelinden Tema ve HTML'yi düzenle tuşuna basarak aşağıdaki kodu </body> kodunun hemen üstüne eklemelisiniz.

<script type='text/javascript'>
//<![CDATA[
// Preloader
$(window).load(function(){$(".spinner").fadeOut(),$("#preloader").delay(350).fadeOut("slow"),$("body").delay(350).css({overflow:"visible"})});
//]]> </script>

Üstteki kodu ekledikten sonra, aşağıdaki kodu </body> kodunun hemen altına ekleyin.

Örnek bir loading ekranı

<div id='preloader'>
<svg class='spinner' height='50px' viewBox='0 0 66 66' width='50px' xmlns='http://www.w3.org/2000/svg'>
   <circle class='path' cx='33' cy='33' fill='none' r='30' stroke-linecap='round' stroke-width='4'/>
</svg>
</div>

Daha sonra, CTRL+F yolu ile </head> kodunu aratıp hemen üstüne aşağıdaki kodu ekliyoruz.

<style type='text/css'>
/* Preloader */
#preloader{overflow:hidden;background:#fff;left:0;right:0;top:0;bottom:0;position:fixed;z-index:9999}
.spinner{position:absolute;top:calc(50% - 20px);left:calc(50% - 20px);animation:rotator 1.4s linear infinite}
@keyframes rotator{0%{transform:rotate(0deg)}100%{transform:rotate(270deg)}}
.path{stroke-dasharray:187;stroke-dashoffset:0;transform-origin:center;animation:dash 1.4s ease-in-out infinite,colors 5.6s ease-in-out infinite}
@keyframes colors{0%{stroke:#4285F4}25%{stroke:#DE3E35}50%{stroke:#F7C223}75%{stroke:#1B9A59}100%{stroke:#4285F4}}
@keyframes dash{0%{stroke-dashoffset:187}50%{stroke-dashoffset:46.75;transform:rotate(135deg)}100%{stroke-dashoffset:187;transform:rotate(450deg)}}
</style>

Bundan sonra Temayı kaydet diyoruz ve temamızı görüntülüyoruz. Ve tüm işlem bu kadardı sevgili dostlar. Web sitenize girdiğinizde kodun başarılı bir şekilde çalıştığını görebilir, sitenizin aynı hız ile açıldığını görebilirsiniz.

Bir hız farkının olmamasını kodların CSS ve SVG şeklinin oldukça saf olmasıdır. Eğer sadece yukarıda bahsettiğimiz yükleniyor kodunu beğenmediyseniz aşağıdaki bağlantıdan geri kalan yükleniyor kodlarını bulabilir ve sitenize ekleyebilirsiniz.

https://www.arlinadzgn.com/2018/08/memasang-efek-preloading-keren-di.html