jQuery：LavaLamp

lavalamp

LavaLampと書いてもピンときませんよね。
グローバル・ナビゲーションで、マウスをもっていくと、ビヨーンと背景ブロックが追っかけてくるやつです。
こう書いてもきっとわかりませんね。
　
lavalamp1
こんなやつです。使い方。
頭で指定しておくのはお決まり。ULにメニューを書いていきます。
下の例は、ULの背景にメニュー画像を置いて、その上を透過パネル（少し斜がかかったもの）が移動するようにしたものです。
メニュー画像を載せられればわかりやすいんだけど、今制作中のお客様のやつなんでね。

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="/js/jquery.lavalamp.js">
<script type="text/javascript" src="/js/jquery.easing.1.1.js">
 
  jQuery(function($) {
    $("#nav1").lavaLamp(
      {
        fx: "backout",
        speed: 700
      }
    );
  });
1
2
3
4
5
6
<ul class="lavaLampNoImage">
    <li class="current"><a href="#">MENU</a></li>
    <li><a href="/party/">PARTY PLAN</a></li>
    <li><a href="/access/">ACCESS</a></li>
    <li><a href="/contact">CONTACT</a></li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
.lavaLampNoImage {
    background:#fff url(images/top-menu.png) no-repeat;
    width: 898px;
    height: 78px;
    position: relative;
    overflow: hidden;
    padding:1px;
    margin: 0;
    border: none;
}
.lavaLampNoImage li {
    margin:0;
    padding:0;
    float: left;
    list-style: none;
}
.lavaLampNoImage li.back {
    position: absolute;
    z-index: 8;
    height: 76px;
    background-color:#fff;
    opacity:0.2;
    filter:alpha(opacity=20);
    -ms-filter:"alpha( opacity=20 )";
}
.lavaLampNoImage li a {
    position: relative;
    z-index:10;
    display:block;
    overflow: hidden;
    float: left;
    height: 76px;
    font-size:8px;
    color:#C1955C !important;
    text-decoration:none;
}
.lavaLampNoImage li a:hover, .lavaLampNoImage li a:active, .lavaLampNoImage li a:visited {
    border:none;
}
#nav1l1, #nav1l1 a { width:152px;   }
#nav1l2, #nav1l2 a { width:197px; margin-left:2px;  }
#nav1l5, #nav1l5 a { width:121px; margin-left:2px;  }
#nav1l6, #nav1l6 a { width:123px; margin-left:2px;  }
/作成者: