scroll-behavior Özelliği

Bu yazımda css 'de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim.
Bu yazımda css ‘de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim.
Bu yazımda css ‘de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsettim. Sitenize eklemek isterseniz yazımın devamını okuyabilirsiniz.

Merhabalar,

Bu yazımda css ‘de scroll-behavior ile scroll (kaydırma) işlevine verilen yumuşak bir kaydırma özelliğinden bahsedeceğim. Bazen böyle ufak bir animasyon bile sitenize oldukça hoş bir kullanım sağlayabiliyor.

Bildiğiniz üzere Bootstrap 5 Alpha versiyonu yayınlandı. Sitesindeki dökümantasyonu inceliyordum. Site içi linklere tıkladığımda diğer konuya geçiş yaparken yumuşak güzel bir animasyon benzeri bir geçiş kullanıldığını farkettim.

Acaba nasıl yapıldığını merak edip kaynak kodları incelemeye koyuldum. html tagına baktığımda içindeki stilde scroll-behavior özelliği ile karşılaştım. Araştırmalarım sonucu bu yumuşak geçişi scroll-behavior yapıyormuş. Hemen işimize yarayacak kodu aşağıya bırakıyorum;

html {
  scroll-behavior: smooth;
}

Sitenizde html tagına yukarıdaki gibi bir stil eklediğinizde site içindeki linklerde geçişin daha modern bir hal aldığını göreceksiniz. Oldukça basit bir özellik olup bence sitenize çok hava katacağını söyleyebilirim. Hatta bende ekleyeyim 🙂 

Nasıl yapıldığını merak ettiğiniz şeyleri tarayıcıların web geliştiricileri için sağladığı panel (Öğeyi Denetle) ile araştırmayı unutmayın bu alışkanlık size çok şey katacaktır.

Umarım işinize yarar.

Mutlu Kodlamalar 🙂

0 Shares:

Benimle yorumunu paylaş;

Bunlara da göz atabilirsin
CSS object-fit Kullanımı
Devamını Oku

object-fit Kullanımı

Css' de oldukça işe yarayan object-fit özelliği bir medya öğesinin verilen yüksekliğine ve genişliğine göre nasıl tepki vereceğini tanımlar. Detaylar için yazımı inceleyebilirsiniz.

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

Css ile Yazıya Arka Plan Vermek
Devamını Oku

Yazıya Arka Plan Verme

Bu yazımda çok popüler olmayan ama kullanışlı olduğunu düşündüğüm Yazıya Arka Plan verme özelliğinden bahsettim. Nasıl yapıldığına göz atmak için yazının devamını okuyabilirsiniz.

Devamını Oku