Açılış sayfaları siteye il girişte kullanıcıya büyüleyen o sitenin daimi bir üyesi yapma yolunda atılan ilk adım olmaktadır. Şık ve estetik bir açılış sayfası daha geniş bir kullanıcı kitlesine ulaşmak için iyi bir yöntem olmaktadır. Css,Javascript,Parallax vs. gibi yapıların kullanımı ile beraber daha iyi açılış sayfalarına sahip olunacaktır. Açılış sayfaları için ifade edilecek bir durum vardır ki oda açılış sayfalarının performansları olmaktadır. Kullanıcı ilk girişte karşısında performanssız bir yapı görürse site hakkında olumsuz yargılarda bulunabilir. Yani siteye çok iyi bir açılış sayfası kazandırılmış olabilir fakat kasmalar ve donmaların yanında açılış sayfaların öğeleri tam olarak verimli bir şekilde kullanılmaz ise bu sorunlu bir durumu ifade edecektir. Onun için kullanılan öğelere ve tasarım sürecine dikkat edilmelidir. Ne kadar verimli bir çalışma süreci o kadar kaliteli bir çalışmayı ortaya çıkaracaktır.
Açılış sayfası oluştururken 3 aşamadan geçilecektir. Bu aşamalardan ilki modül templateleri olmaktadır.
Resimde görüldüğü gibi sağ sol veya alt üst çizgi hizalanan çizgiler ile çalışmalarınız daha iyi ve verimli olacaktır. Bu sürecin devamında sırada Css ve Javascript ortaya çıkacaktır. Css ve javascript ile bu öğeler görsel yönden daha da zenginleştirilecektir. Görsellerin daha fazla iyi bir hale gelmesinin yanında birde animasyon gibi yapılarda ortaya çıkacaktır. Bu tip öğelerin estetik ve performanslı bir şekilde kullanılması için Css ve Javascript ideal bir yapıya sahip olmaktadır.
CSS
.YourClassName{
background-image:url(images/…’);
height:100vh;
position:fixed;
background-size:cover;
}
Kod yapısı yukarıda görüldüğü gibi Css te hazırlanarak kullanılabilir. Modül aşamasından sonra bu kodlara da ihtiyaç duyulacağından süreç daha da iyileştirilecektir. Bu kodun tam olarak yaptığı şeyler;
-Arka plan görüntüsü ayarlanıyor. Bu sayede arka plan için herhangi bir kod yapısına gerek kalmıyor. Css içinde direkt olarak atanan resim sayesinde bu mümkün oluyor
-Görüntünün yüksekliğini ve güvenliğini tarayıcı göre tam ayarlayıp viewport yapmak. Tarayıcıda oranlı bir görüntü olduğundan çirkin görüntüler ortadan kalkmaktadır. Tarayıcı ile uyumlu öğeler bu sayede yapılmaktadır.
-Sabit pozisyon ayarlamaları ile kayma gibi durumlar ortadan kalkmaktadır. Görüntülerin kayması ile site kullanılırken tasarımda sorunlar çıkabilir fakat bu yapı sayesinde böyle bir şeye izin verilmemektedir.
-Arka plan görüntüsü tüm sayfayı kapsayan bir duruma getirilmesi
JAVASCRİPT
Açılış sayfasına son olarak eklenmesi gerekenler ise yukarıda ki resim içerisinde ki kod yapısında mevcut olmaktadır. Bu kod yapısı sayesinde öğeler parallax etkisi kazanacaktır. Parallax javascript öğelerinde daha gerçekçi ve daha şık görseller için ideal çözümler sunmaktadır. Script etiketi içerisine yazılan kodlarda gerekli işlemler ve fonksiyon yazılmıştır. Bu fonksiyon sayesinde yapılması gereken iş tek bir bölgede yoğunlaştırılıp gerekli değer atamaları yapılmaktadır.
