Когда я впервые столкнулся с эффектом LavaLamp, то я честно подумал, что он сделан при помощи флеша. Но оказалось, что это чистый JavaScript, причем реализуется он очень просто и легко, и весит мало!
Не правда ли красиво? :)
Все нужные для этого файлы находятся в архиве.
Итак для начала просто подключаются все файлы.
<script type="text/javascript" src="/path_to/jquery-1.4.1.min.js"></script> <script type="text/javascript" src="/path_to/jquery.easing.min.js"></script> <script type="text/javascript" src="/path_to/jquery.lavalamp.min.js"></script>
Потом делается контейнер для LavaLamp в виде ненумерованного списка:
<ul class="lavaLamp"> <li><a href="#">Главная</a></li> <li><a href="#">Примеры работ</a></li> <li><a href="#">Статьи</a></li> <li><a href="#">Об авторе</a></li> </ul>
Элементы li - это отдельные пункты меню. Сам эффект достигается тем, что скриптом создается еще один элемент ли такого вида:
<li class="back"><div class="left"></div></li>
Затем создаем обработчики для hover и click.
Hover при наведении на пункт меню изменяет параметры left и width, таким образом, чтобы наш новый li подстроился под выбранный пункт меню.
Click просто выставляет значение параметра left таким, чтобы пункт меню казался выделенным.
Теперь дальше. Пишем CSS.
.lavaLamp
{
position: relative;
height: 29px; width: 421px;
background: url("../image/bg.gif") no-repeat top;
padding: 15px; margin: 10px 0;
overflow: hidden;
}
/* Чтобы список выстраивался горизонтально */
.lavaLamp li
{
float: left;
list-style: none;
}
/* Стиль для генерируемого элемента */
.lavaLamp li.back {
background: url("../image/lava.gif") no-repeat right -30px;
width: 9px; height: 30px;
z-index: 8;
position: absolute;
}
.lavaLamp li.back .left
{
background: url("../image/lava.gif") no-repeat top left;
height: 30px;
margin-right: 9px;
}
/* Стили для каждого пункта меню. */
.lavaLamp li a
{
position: relative; overflow: hidden;
text-decoration: none;
text-transform: uppercase;
font: bold 14px arial;
color: #fff;
outline: none;
text-align: center;
height: 30px; top: 7px;
z-index: 10; letter-spacing: 0;
float: left; display: block;
margin: auto 10px;
}
Теперь надо просто подключить плагин к контейнеру.
<script type="text/javascript">
$(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 700 })});
</script>
Все, эффект готов!