LavaLamp.js

LavaLamp.js Mouse menüdeki kategori linklerinin üzerine geldiğinde hemen mousenin üzerinde bulunduğu linkin altına doğru kayan border görünümlü bir alt çizginin yaklaştığı örneklerle belki karşılaşmışsınızdır. Ayrıca menü balıklarını içine alan balon tarzında da kayan animasyon örnekleri bulunuyor. Buna benzer menü tasarımları Lavalamp.js adı verilen uygulama ile yapılıyor. Kendi alanında en popüler olan çalışmalardan bir tanesidir.

Kullanımı :

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

Js ve stil dosyaları :

<link rel="stylesheet" href="lavalamp_test.css" type="text/css" media="screen">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.min.js"></script>
<script type="text/javascript" src="jquery.lavalamp.min.js"></script>

Javascript :

<script type="text/javascript">
        $(function() {
            $("#1, #2, #3").lavaLamp({
                fx: "backout", 
                speed: 700,
                click: function(event, menuItem) {
                    return false;
                }
            });
        });
</script>
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

Demo 1
<ul class="lavaLampWithImage" id="1">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>

Demo 2
<ul class="lavaLampNoImage" id="2">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>

Demo 3
<ul class="lavaLampBottomStyle" id="3">
    <li><a href="#">Home</a></li>
    <li><a href="#">Plant a tree</a></li>
    <li><a href="#">Travel</a></li>
    <li><a href="#">Ride an elephant</a></li>
</ul>

Demo :

 

 

 

 

 

 

 

 

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-01 tarihinde yayınlandı,Toplam 1514 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...