Yazılım

Javascript ve CSS ile açılış animasyonu yapımı Yeni

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ılarresimler-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;

 

 

 

 

Click to comment

CEVAP BIRAKIN

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Copyright © 2018 Web Sitesi üzerinde yayınlanan tüm içerikler www.ogzblg.com sitesine aittir. Toplist 25

To Top