Lava Lamp

Когда я впервые столкнулся с эффектом LavaLamp, то я честно подумал, что он сделан при помощи флеша. Но оказалось, что это чистый JavaScript, причем реализуется он очень просто и легко, и весит мало! 

Демо

Не правда ли красиво? :)

Read More

Все нужные для этого файлы находятся в архиве.  

Итак для начала просто подключаются все файлы.

<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>

Все, эффект готов! 

Тэги :

0 Комментариев

    Нет результатов.

Оставьте комментарий

Мы не опубликуем ваш email

Scroll To Top