Mouse ile üzerine gelince resimler dönsün – Flip-Images

17Okunma
1 Yorum

Mouse Css3 geçişler ve dönüşümler ile hazırlanmış bir galeri örneği. Bu galeri örneği ile çok güzel 3D dödnürme animasyonuna sahip resim galeriler oluşturabilirsiniz. İki tabakadan oluşan Css çerçevelerin birinci tabakasında resimler ikinci tabakasında ise resim açıklamaları bulunuyor mouse ile resmin üzerine geldiğinizde ise çerçeve 180 derece dönüyor ve resmin açıklaması görünüyor. Mouseyi geri çektiğinizde ise aynı işlem tam tersine çalışıyor bu sefer ve çerçeve tekrar 180 derece dönüp resimler görünüyor.

Aslında ilk başta  sadece   bir çevirme efekti hazırladım sağdan  soldan topladığım kodlar  ile. Böyle bir  efekt için  en kullanışlı olabilecek bölüm resim galeri bölümü olur diye  ufak bir resim galerisi  hazırladım. Biraz  daha uğraşıp arka tarafta  bulunan resim açıklamalarınada tıklanabilir  bir  buton eklemek  istedim ama o  kadar boş zamanı olan birisi değilim. Eh artık  onuda  siz  yaparsınız.

 

Kullanım

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

Css – Js dosya adresi :

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

Demo örneğinde  8 adet resim bulunuyor  yazı fazla uzamasın diye buraya sadece iki resmin kodunu ekliyorum. Kopyala yapıştır yaparak çoğaltabilirsiniz.

 

 

 

  • Mouse

 

  • Çevir

     

 

 

 

 

  • Mouse

 

  • Çevir

     

 

 

 

 

  • Mouse

 

  • Çevir

     

 

 

 

 

  • Mouse

 

  • Çevir

     

 

 

 

 

  • Mouse

 

  • Çevir

     

 

 

 

 

  • Mouse

 

  • Çevir

     

 

 

 


Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-06-12 tarihinde yayınlandı,Toplam 1150 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(1 Yorum)
Yükleniyor...
bünyamin Yorumcu LV.1
2015-05-14 23:42:16 回 Yanıtla

Teşekkurler güzel bi paylasım