Mosaic.js

0
178
views

kayan resim açıklamaları

Mouse resimlerin üzerine geldiği  anda çerçeve içindeki elementlere değişik animasyonlar uygulayan çok güzel bir çalışma. Çoğu yerde gördüğünüz  tarzda bir örnektir bu. Bazı sitelerde mouse resmin üzerine gelince başlıklar ve açıklamalar kayar, bazılarında resimler kayar yada resim sayfasına gitmek için tıklamanız gereken mercek ikonu çıkar. jQuery Mosaic adlı eklenti sayesinde bu tarz örneklerin hepsini bir arada kullanabilirsiniz. Kayan resim, başlık, açıklama, aşağı inen resim, yukarı çıkan resim, arkasında açıklama gizli olan resim gibi türlü türlü örnekleri çok kolay bir şekilde hazırlayabilirsiniz. Hatta kendiniz de biraz değiştirerek bu tarz daha çok hover örnekleri yapabilirsiniz.

 Kullanım

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

Js ve css dosyasının url adresleri :

JavaScript :

(Bu bölümde  her sınıf için farklı ayarlama yaplımış. Circle, fade, bar, bar2 vs… )

Css :

  • Body  etiketlerinin  arasına eklenmesi gereken bölüm.

Html :

Yukarıdaki html kod içerisinde  sadece circle  ve fade örneğinin kodlarını verdim. Nasıl olsa indireceğiniz  dosya  içerisinde  bütün örnekler  hazır kurulu bulunuyor.

Bunu anlatmak ne kadar iyi  bilmiyorum ama eminim birilerinin işine yarayacaktır mutlaka. Aşağıdaki  resimlerde  html ve javascript  içinde bulunan circle  ve fade  sınıflarını kırmızı ile boyadım. Javascript ve html içinde sınıfları eşleştirmeniz gerekiyor. Hiçbirşey bilmiyorsanız  bile kopyala yapıştır  yöntemi ile  de olsa  örnekleri çoğaltabilirsiniz bu şekilde  yada  farklı sınıf isimleri  vererek farklı  örnekler oluşturabilirsiniz.

Html : 

class

JavaScript :

class1

 

CEVAP VER

Please enter your comment!
Please enter your name here