AnimeBand

0
561
views

animatedband

jQuery ve Css3  kullanılarak hazırlanmış animasyonlu bir üst menü örneği. Bir  aralar  buna benzer  flash bir menü görmüştüm. Tamam olarak bu şekilde  değil de linklerin üstünde şeffaf  bir baloncuk olan flash menüydü. Nerden aklıma geldiyse  artık böyle  bir  örnek hazırlamak istedim.  İlk  önce  kategori  linklerinin üstüne  opacity değeri 0.5 olan yarı şeffaf bir  perde ekledim. Birde  bu perdeninin arasında kaybolacağı iki tane de çerçeve ekledim. Biri en sağda  diğeri de en solda duruyor. Perdenin genişliği 860px ve bu  boyutta  iki çerçevebin tam ortasını kapatacak genşlikte duruyor. Mouse üst menünün üstüne geldiği  anda  animate  devreye giriyor ve 860px olan perdenin genişliği  0px oluyor.  Perdenin küçülme  hızı 300 milisaniye, tekrar eski haline gelme hızını da 1000 milisaniye olarak ayarladım. Bu hızları js kodlarda  değiştirebilirsiniz.

Söyleme ihtiyacı duyduğum  bir diğer  konu son zamanlarda paylaştığım içeriklerde  arka plan için herhangi bir  resim kullanmadan eklediğim arkaplan desenleri. Menü örneğinin arka planına, sağına ve soluna da aynı desenleri  ekledim.  Bu  Css3  desenlerin listesine  buradan bakabilirsiniz. Bu listeden kendi sitenizin arkaplanına uygun desenleri  Css  kodlara  ekleyip kendi siteniz  için daha da  güzel bir hale getirebilirsiniz. Şuan IE10 sürümünü kullandığım için daha eski tarayıcılarda test edemedim. IE10 tarayıcısında  desenler  görünmüyor  ve kategori linklerinin 3D görünümü de  normal düz yazı gibi görünüyor. Bunların dışında  IE üzerinden siyah ve gri  renkli bir menü olarak görünüyor. Ayrıca  perde  animasyonu da çalışıyor IE tarayıcısında.

Kullanım

  • Head etiketleri arasına eklemeniz gereken bölümler.

Js adresi :

JavaScript kodu :

Css :

  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

 

CEVAP VER

Please enter your comment!
Please enter your name here