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