Smart3D – Üç boyutlu banner

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>

Download

Demo