Addy Osmani tarafından geliştirilmiş olan Transitions.js uygulaması hakkında sizlere detaylı bilgi vermek isterdim ama kendi sitesindeki tanıtım yazısı puf olmuş. Ne Github üzerinden ne de JsFiddle üzerinden tam parametre ayarları ve genel amacı hakkında detaylı bilgiye ulaşamadım. Tek bulduğum açıklama ise jQuery Fallback ile Css3 geçişlerin kullanılması.
Örneğin demosunda da göreceğiniz üzere üç tane ilerleme çubuğu sayfa açılır açılmaz yüklenmeye başlıyor. 4 saniye, 5 saniye ve 7 saniye olmak üzere her bir çubuk için farklı yüklenme süreleri belirlenmiş. Bana işin garip gelen tarafı sadece Css3 kullanılarak ta bunun aynısı yapılamaz mıydı sorusu oluyor ? Tabi uygulama yaklaşık 4-5 yıl öncesinden yapılmış olduğu için tam olarak kestiremiyorum. Bu arada yazımın yayın tarihi 2012 diye geçiyor ve şu an görmüş olduğunuz anlatımları Nisan 2014 tarihinde ekliyorum. Zamanında ilerleme çubukları diye başlık atıp başımdan salmıştım. Eski yazıları tekrar düzenlemek için gözden geçirdiğimde ise çoğu kaynağın ortada olmadığını farketmiş bulunuyorum bu sayede.
Aradan 4-5 yıl geçti diye gereksiz bir uygulama diye adlandırmak mantıksız ve forumlarda hala buna benzer çalışmalar arayan insanlar görebiliyorum. Çoğu kişi hakkımda sayfasında yapmış olduğu çalışmalar ve deneyimlerinin kaç yıllık olduğunu göstermek amaçlı hakkımda sayfalarına ilerleme çubukları eklerler.
Örnek :
- Photoshop : 7 yıl
- Css : 5 yıl
- Javscript : 4 yıl
Gibi hakkımda sayfaları oluşturarak müşterilerine karşılarında nasıl birisi olduğunu daha kolay anlatmak için bir yoldur. Transitions.js uygulamasını kullanarak hiç yoktan buna benzer sayfalar hazırlayabilirsiniz.
Aşağıdaki demoda görünmeyen Js dosyaları. Bunları head etiketleri arasına eklemeniz gerekiyor.
<script type='text/javascript' src='https://code.jquery.com/jquery-1.5.2.js'></script> <script type='text/javascript' src="/css3transitions/js/modernizr-1.7.min.js"></script> <script type='text/javascript' src="/css3transitions/js/jquery.transition.js"></script>