Smart3D – Üç boyutlu banner

Smart3D

Daha önceki konularda Kotelnitskiy Evgeniy?nin  jQuery  için geliştirdiği  birkaç tane eklentiden biri olan  İmageView eklentisinden bahsetmiştik. Yine  aynı  geliştiriciye  ait olan  ve adam  akıllı kullanılmasa dahi  birçok  kişinin banner alanını  süsleyeceğine inanıyorum bu  eklentinin. Mouse ile  beraber hareket  eden bir özelliği var. Arka  arkaya  sıralanmış  2  resim 2 resminde  hızı  birbirinden farklı olduğu için ortaya  3   boyutlu bir görüntü çıkıyor.

Kullanım

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

Js dosya adresleri : 

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.smart3d.js"></script>

 Stil kodları : 

<style type="text/css">
#smartdemo {
    width: 660px;
    height: 170px;
    overflow: hidden;
    border:2px solid #444444;
    margin: 0;
}
#smartdemo li {
    width: 844px;
    height: 170px;
}
#smartdemo .content {
    padding: 0 105px;
    color: #fff;
    text-shadow: 0 0 8px #000000;
}
</style>

 JavaScript : 

<script type="text/javascript">
    $(document).ready(function() {
         $('#smartdemo').smart3d({ last_is_static: true });
    });
 </script>
  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

<ul id="smartdemo">
    <li><img src="mindscape/mindscape1.png" /></li>
    <li><img src="mindscape/mindscape2.png" /></li>
 </ul>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-01-26 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(Yorum yapılmamış)
Yükleniyor...