Web Sitesine Resimli Bekleme Ekranı Ekleme - Load Screen
2 Eylül 2023 | 275
Bir web sitesi yüklenirken, bazen içeriklerin tamamen yüklenmesi veya işlenmesi biraz zaman alabilir. Bu durumda, kullanıcılara yüklenme sürecini daha keyifli hale getirmek ve beklemelerini daha hoş bir şekilde geçirmelerini sağlamak için bir bekleme ekranı kullanmak faydalı olabilir. Bu blog yazısında, web sitenize resim şeklinde bir bekleme ekranı eklemenin nasıl yapılabileceğini adım adım anlatacağım.
Adım 1:
Bekleme Ekranı Resmi Seçme İlk adımda, web sitenizde kullanmak üzere bir bekleme ekranı resmi seçmelisiniz. Bu resim, kullanıcıların beklerken görmek istediğiniz hoş bir görsel olabilir. Örneğin, şirket logosu veya web sitenizin temalarına uygun bir arka plan resmi seçebilirsiniz. Resmi tercih ettikten sonra, onu web sitenizin sunucusuna yükleyin.
Adım 2:
CSS ile Bekleme Ekranı Stili Oluşturma İkinci adımda, bekleme ekranınızı CSS kullanarak stilize etmeniz gerekiyor. Bunun için, bir CSS dosyası oluşturun veya var olan CSS dosyanıza aşağıdaki kodu ekleyin:
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('bekleme_ekrani_resmi.jpg') center no-repeat;
background-size: cover;
z-index: 9999;
}
Bu CSS kodu, bekleme ekranının tam ekran boyutunda görüntülenmesini sağlar ve seçtiğiniz resmi arka plan olarak kullanır. background özelliği, resmin konumunu ve tekrarını ayarlar. z-index özelliği, bekleme ekranının diğer içeriklerin üzerinde görüntülenmesini sağlar.
Adım 3:
HTML'e Bekleme Ekranı Ekleme Son adımda, bekleme ekranını HTML dosyanıza eklemeniz gerekiyor. Bunun için, aşağıdaki HTML kodunu <body> etiketinin hemen altına ekleyin:
Bu HTML kodu, bekleme ekranını oluşturan bir <div> elementi ekler. id özelliği, CSS'de kullanacağımız stile atıfta bulunur.
Sonuç: Bekleme ekranı resmini seçmek, CSS ile bekleme ekranı stilini oluşturmak ve HTML'e bekleme ekranını eklemek, web sitenize hoş bir yüklenme deneyimi eklemenin temel adımlarıdır. Bu adımları takip ederek, kullanıcıların web sitenizin yüklenme sürecini daha keyifli bir şekilde geçirmelerini sağlayabilirsiniz.
Unutmayın, bekleme ekranı resmi ve stilini web sitenizin amacına ve tasarımına uygun olarak özelleştirebilirsiniz. Ayrıca, bu yöntemi JavaScript veya CSS animasyonlarıyla daha da geliştirebilirsiniz.
Umarım bu blog yazısı, web sitenize resimli bekleme ekranı eklemek isteyenlere yardımcı olur. Keyifli kullanıcı deneyimleri oluşturmanızı dilerim!
