Resme baktığınızda ne olduğunu anladığınıza eminim. Birçok websitesini ziyaret ettiğinizde bu animasyon ile karşılaşmışsınızdır. Websitesini tıkladığınızda ne kadar ağır olursa olsun hemen açılır ve divler içinde soldan sağa doğru kayan bir animasyon görürsünüz. Bu animasyon efekti de yükleniyormuş gibi bir his verdiği için ziyaretçi deneyimi açısından oldukça önemli bir detaydır. Sayfa yüklenme süreleri yüzünden ziyaretçileri boş bir ekran ile karşılamak yerine böyle bir sayfa soldan sağa yüklenme efekti ile karşılamak kullanıcı deneyimi açısından da oldukça önemli bir detay.
Büyük sitelerin neredeyse tamamında bu detay var ama nedense hiçbir yerde bunun ne olduğunu anlatan kimse yok. Neyse ki gördüğüm her detayı paylaşma konusunda kendimi tutan birisi değilim. Sayfanın her detayı için iskelet görüntüsü oluşturmak biraz zahmetli olabilir ayrıca sürekli değişen satır boyutları için de milim milim bir iskelet yapısı oluşturmak da olukça zor. Sabit boyutlu çerçeveler için yapılışı kolay diyebilirim ama sabit olmayan boyutları tutturmaya çalışmak sizi oldukça zorlar. İncelediğim çoğu websitesi de bu detaya takılmadan sadece sayfa yüklenmesi esnasında formaliteden doldurulmuş iskelet gösterdiklerini de gözlemledim. Kısacası sidebar ve post alanlarına uygun bir genişlikte iskelet yapısı oluşturmanız yeterli olabilir bunun için. Buraya kadar yazdıklarımdan belki neyi kastetiğimi anlamamış olabilirsiniz. O yüzden alttaki linkten demoyu inlemenizi tavsiye ediyorum. Demoya baktığınızda ne demek istediğimi anlayacaksınız.
Daha iyi anlayabilmeniz için üstteki demoda gerekli bütün detayları ekledim. Bu demoya ait renkleri kendinize göre düzenleyerek olduğu gibi kullanabilirsiniz. Yükleme süresi çok kısa olduğu için gözlemeleyemeyeceğinizi düşündüm. Bundan dolayı demo sayfasında, yükleme bittikten sonra sayfa yükleme animasyonunu kapatacak bir javascript bulunmuyor. Altta bulunan açıklamalarda javascript kodunu nasıl kullanacağınızı da ayrıca anlattım.
Bunu nasıl kullanacağız ?
Öncelikle websayfanızın tamamının bulunduğu en üst çerçeveye Css kullanarak display none eklemeniz gerekiyor. Farzedelim ki en üst çerçeveniz şu şekilde geçiyor. Örnek:
<main id="main"> site içeriğinin tamamı bu çerçevede ise </main>
<!-- yada -->
<div id="container"> site içeriğinin tamamı bu çerçevede ise </div>Bu id alanlarına display none eklemeniz gerekiyor. Ben örnek olarak main ve container id olanları ekledim, belki sizin websitenizdeki idler daha farklıdır. Kontrol etmeniz gerekiyor.
Css ile display none ayarladıktan sonra şu javascript kodunu sitenizin footer alanına ekleyin. Bu javascript kodu sayfa yüklenme işlemi bittikten sonra display none olarak ayarladığınız genel çerçeveyi display block olarak ayarlayacaktır. o zamana kadar container1 id olan sahte iskeleti ziyaretçilere gösterecektir.
Javascript:
<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("container1").style.display = "none";
document.getElementById("container").style.display = "block";
});
</script>Sayfa yüklenmesi sırasında ziyaretçilerinizin asıl göreceği html kodlar da bunlar gibi olacak. Burada belirlediğim id container1 olarak geçiyor. Yükleme bittiği zaman üstteki javascript kodu, id container1 olan genel çerçeveye display none kodunu otomatik ekleyerek gizleyeceği için asıl içerik görünmeye başlayacak.
<div id="container1">
<div class="navbar">
<div class="logo iskelet"></div>
<ul class="menu">
<li class="iskelet"></li>
<li class="iskelet"></li>
<li class="iskelet"></li>
<li class="iskelet"></li>
</ul>
</div>
<div class="content">
<div class="posts">
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
</div>
<div class="sidebar">
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
<div class="baslik iskelet"></div>
<div class="resim iskelet"></div>
</div>
</div>
</div>
Sıra geldi yükleniyor efekti gibi görülen Css kodlarına. Bu kodlar iskeletin yapısına ait blokların boyutlarını, renklerini ve geçiş efektlerini sağlar. Burada yapmanız gereken sitenizin renklerine ve çerçeve boyutlarına göre bir ayarlama yapmak.
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
.navbar {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 10px;
}
.logo {
width: 100px;
height: 40px;
background-color: #ddd;
}
.menu {
list-style-type: none;
display: flex;
}
.menu li {
margin-right: 20px;
width: 100px;
height: 30px
}
.content {
display: flex;
margin: 0 auto;
width: 70%;
padding: 20px
}
.posts {
display: flex;
flex-direction: column;
gap: 20px;
width: 70%;
padding: 0 20px;
}
.resim {
width: 100%;
height: 250px;
background-color: #ddd;
}
.sidebar {
width: 25%;
height: auto;
}
.baslik {
background-color: #ddd;
height: 30px;
width: 100%;
margin-bottom: 10px;
}
.sidebar .resim {
background-color: #ddd;
height: 200px;
width: 100%;
margin-bottom: 20px;
}
.iskelet {
position: relative;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.1);
}
.iskelet::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0));
animation: slideRight 1.5s infinite linear;
}
@keyframes slideRight {
to {
left: 100%;
}
}