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>
