Lavalamp gibi mouseyi takip eden arkaplanlı nav menu

Lavalamp

Bu efekti kullanmak için yapılmış olan bir uygulama vardı Lavalamp adında ve halen de buna benzer örnekler yapıldığı zaman Lavalamp diye adlandırılıyor. Mouse ile herhangi bir linkin üzerine geldiğiniz zaman sol taraftan sağa doğru linkin arkaplan renginde bir çerçeve kayıyor. Her linkin butonuna ayrı ayrı arkaplan rengi eklendiği için hangi link üzerine getirirseniz mouseyi takip eden renk o olacaktır.  Ayrıca easing efektleri de eklendiği için çok değişik bir hareket oluşuyor bu örnekte. Eğer sitenizde hareketli örnekler olmasını istiyorsanız tam size göre bir çalışma olacak bu. Hem isterseniz bu efekti başka çalışmalarda da kullanabilirsiniz. Kullanım

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

Js ve still dosyaları :

<link media="screen" rel="stylesheet" type="text/css" href="assets/css/style.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/init.js"></script>
<script type="text/javascript" src="assets/js/easing.js"></script>
  • Body etiketleri arasına eklemeniz gereken bölüm.

Html :

     <div id="menu">
        <ul>
          <li>
            <a href="">a 1</a>
          </li>
          <li>
            <a href="">a 2</a>
          </li>
          <li>
            <a href="">a 3</a>
          </li>
          <li>
            <a href="">a 4</a>
          </li>
          <li>
            <a href="">a 5</a>
          </li>
          <li>
            <a href="">a 6</a>
          </li>
          <li>
            <a href="">a 7</a>
          </li>
          <li>
            <a href="">a 8</a>
          </li>
        </ul>
      </div>

 

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