HorizontalMenu with easing

0
167
views

yan
Bir önceki paylaştığım menüden esinlenerek birde  sizlere  üst menü örneği hazırlamak istedim. Aklımda  tasarladığım menü başlıklarından önce fade  efekti  ile  kaybolan bir resmin ardından  başlıkların ortaya çıkmasıydı. İşin aslı iyice beynim sulandıktan sonra  animasyonlar  arasındaki zamanlama  hatalarından dolayı ortaya  çokta iyi bir sonuç  çıkardım diyemem. Yapmaya çalıştığım animasyon şu anda menüde yok. Pek kullanışlı bir menü  örneğidir  diyemem  ama  belki  birilerinin işine yarar  diye paylaşmak istedim.

Menü örneğinin çalışma  şekli; mouse  linklerin üzerine  geldiğinde linklerin gri  renkli arkapaln çerçevesi  duration:700 hızında sol  tarafta  bulunan ikonun üzerine doğru kayıyor ardından duration:1000  hızıyla menü başlıkları dasol tarafa kayıyor. Menü  çerçevesinede  içten gölge efekti vererek  arkaplana  batmış  bir  efekt  vermeye  çalıştım bu kısmıda  maksat güzellik olsun demo güzel  görünsün. Başkada yaradığı  bir bölüm yok.

Kulanım

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

Js dosya adresleri : 

 JavaScript : 

 Css : 

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

Html : 

CEVAP VER

Please enter your comment!
Please enter your name here