Lavalamp

Незнаю в силу каких обстоятельств сложилось что при поиске данного эффекта все ссыки рано или позно заканчиваються тут. Возможно потому что этот плагин был первым, возможно потому что потому что эффект действительно похож на лавовую лампу. В обoем это не важно моя статья тоже веден на этот плагин ;)

Так вот есть у этого плагина большой недостаток — он однострочный и все похожие плагины тоже, тоесть если у меня менюшка в две строки то хрен мне. Надо было срочно исправить недоразумение и я написал свой.

  • Один
  • Два
  • Три
  • Четыре
  • Пять
  • Шесть
  • Семь

Код такой


<ul id="lavalamp" class="ui-corner-all">
	<li style="top:60px;left:20px" class="active"><span class="text">Один</span></span></li>
	<li style="top:40px;left:150px"><span class="text">Два</span></li>
	<li style="top:10px;left:50px"><span class="text">Три</span></li>
	<li style="top:60px;left:100px"><span class="text">Четыре</span></li>
	<li style="top:120px;left:10px"><span class="text">Пять</span></li>
	<li style="top:10px;left:150px"><span class="text">Шесть</span></li>
	<li style="top:100px;left:100px"><span class="text">Семь</span></li>
</ul>
<div id="lava" class="ui-corner-all"></div>

#lavalamp {
	display: block;
	height: 150px;
	border: 5px solid #FF7F04;
	background: #ff7f04; /* old browsers */
	background: -moz-linear-gradient(top, #ff7f04 0%, #ffb76b 99%); /* firefox */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff7f04), color-stop(99%,#ffb76b)); /* webkit */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff7f04', endColorstr='#ffb76b',GradientType=0 ); /* ie */
}

    #lavalamp li {
		color: #808080;
		cursor: pointer;
		display: block;
		float: left;
		height: 25px;
		position: relative;
		z-index: auto;
		padding: 0;
    }

        #lavalamp li span {
			display: block;
			font-size: 14px;
			font-weight: bold;
			line-height: 25px;
			position: relative;
			text-decoration: none;
			z-index: 200;
			padding: 0 5px;
        }

#lava {
	background-color: #e57807;
	position:absolute;
	left:0;
	top:0;
	height:0;
	width:0;
	z-index:100;
}

Градиент сделан при помощи тулзы Ultimate CSS Gradient Generator


jQuery(function ($) {

	$("#lavalamp")
		.on("mouseenter", "li", null, function () {
			var self = $(this);
			$("#lava").stop().animate({
				top: self.offset().top,
				left: self.offset().left,
				width: self.outerWidth(true),
				height: self.outerHeight(true)
			})
		})
		.on("click", "li", function () {
			alert($(this).text());
		})
		.on("mouseleave", function () {
			$(".active", this).eq(0).trigger("mouseover");
		})
		.trigger("mouseout");

});

Комментарий “Lavalamp

Комментарии закрыты