Email ile aldığım soruların cevaplarını birer makale olarak yayınlıyorum.

İlginç sorulardan biri, ‘Bir html sayfasının açılışını nasıl animatif hale getirebilirim?’ idi.

Bu makalede önce bir html sayfası oluşturacağız, javascript ve css kullanarak bu sayfanın açılışına 1200 ms‘lik fade (yavaşça belirme) animasyonu ekleyeceğiz.

Benim de yaptığım gibi Visual Studio Code editorünü veya başka favori editorünüzü açarak index.html isimli bir dosya oluşturalım ve aşağıdaki html şablonunu yazalım.

Sayfaya ekleyeceğimiz fade animasyonunu görebilmek için sayfada yazılar-resimler-vs olması gerekiyor. Lorem Ipsum sitesinde istediğimiz kadar rastgele yazı oluşturabilmeye yarayan bir sayfa var.

Ayrıca Lorem Ipsum Generator sayfasında reklamsız/ücretsiz Lorem Ipsum oluşturucu bulabilirsiniz. Türkçe desteği ile birlikte benim favorim oldu :)

Ben 10 paragraflık rastgele yazı oluşturdum ve html sayfasının body taglarının arasına aşağıdaki şekilde ekledim;

Artık sayfanın açılışına fade animasyonu ekleyebiliriz, öncelikle body taglarımıza fade css class‘ını ve head tag’ının içerisine aşağıdaki stili yazdığımız style tagını ekleyelim;

Böylece body tag’ında fade css class‘ı var olduğunda sayfa ekranda gözükmeyecek (opacity özelliği 0 olduğu için), fade css class‘ını kaldırdığımızda sayfa 1200 ms içerisinde görünür olacak (opacity özelliği 1 olduğu için)

Şimdi tek yapmamız gereken sayfa yüklendiğinde fade css class‘ını body tag‘ından kaldırmak, bunu aşağıdaki javascript kodu ile gerçekleştirebiliriz;

Böylece sayfayı açtığımızda 1200ms içerisinde fade animasyonu ile görünür olacak;