gif使わずcssだけでアニメーションロールオーバー
すごい発想のcssネタを発見したので紹介したいと思う。
アニメーションgifもFlashも使用せずにスムーズな動きをするアニメーションロールオーバーを実現させている。但し、プロ仕事で実用的かといえば･･･多分効率的でない。その辺の理由は下を読んでいくと分かると思う。
CSS examples - Another Disjointed Rollover
まずは上記サイトを体験してほしいと思う。IEよりもFirefoxで見たほうがおすすめ。このサイトで紹介されている方法はアニメーション画像を使わずにcssだけでこの動きを実現させている。
まずxhtmlソース部分。
仕組としては、こんな感じでメニュー部分の各 li の中にspanをふんだん使用して、マウスが乗ったときに領域を細かく分ける。各liに対して、x2.x3などのクラス(cssでz-indexが指定されている)を指定しておく。
<ul class="crawler">
<li><a class="link">Home</a><a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a></li>
<li class="x2"><a class="link">Google </a><a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a></li>
<li class="x3"><a class="link">Home </a><a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a></li>
<li class="x4"><a class="link">Google </a><a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a></li>
<li class="x5"><a class="link">Home </a><a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a><a href="../index.htm"><span> </span></a> <a href="../index.htm"><span> </span></a></li>
<li class="x6"><a class="link">Google </a><a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a><a href="http://www.google.com"><span> </span></a> <a href="http://www.google.com"><span> </span></a></li>
</ul>
反転させると状態がわかりやすいかも。こんな感じになる。
そしてcss部分。
ul.crawler{
list-style:none;
margin:1em 0 1em 0;
padding:0;
float:left;
border:1px solid #000;
}
ul.crawler li {
position:relative;
float:left;
background:#d2da9c;
z-index:6;
cursor:pointer;
}
ul.crawler li.x2 {z-index:5}
ul.crawler li.x3 {z-index:4}
ul.crawler li.x4 {z-index:3}
ul.crawler li.x5 {z-index:2}
ul.crawler li.x6 {z-index:1}
ul.crawler li a{
float:left;
width:10px;
height:25px;
line-height:25px;
text-decoration:none;
z-index:2;
position:relative;
cursor:pointer;
background:transparent;
}
ul.crawler li a.link{
width:100px;
position:absolute;
left:0;
top:0;
text-align:center;
z-index:0;
text-decoration:underline;
}
ul.crawler li a:hover span{
position:absolute;
width:78px;
top:-12px;
left:auto;
margin-left:-30px;
z-index:3;
background:url(images/pointer.gif) no-repeat left top;
}
a:hover{visibility:visible;background:url(images/transparent.gif)}/* ie needs this*/
/* demo 2 below */
.crawler-wrap2 ul.crawler {
background:url(images/crawl-bg.gif) no-repeat left top;
}
.crawler-wrap2 ul.crawler li {
background:transparent;
z-indexとhoverをうまく組み合わせているのが分かると思う。
ul.crawler li a部分ではaは10ピクセル、z-indexは2。
ul.crawler li a.link部分でaは100ピクセル、z-indexは0。
考え方としては、aタグ関連の部分がフォトショップなどのレイヤーのようにz-indexの順序で重なっているイメージ。この矢印アニメーションのキモとしては、ul.crawler li a:hover spanのtop:-12px;部分とmargin-left:-30px;部分。ここでhover時の背景画像を12ピクセル上に上げて表示している。それだけではポインタの真ん中に矢印部分がこないので、margin-left:-30px;でちょうどポインタの中央に矢印がくるように調節している。
あと、ul.crawler li.x2あたりのz-index指定だが、そこも大きなポイントっぽくて、その記述がなければ、hover状態で隣のメニュー部分に移動する時に、一旦端まで行ってから次に移るみたいな形になってしまう。このz-index指定があると隣のメニューへ移動する時に一定の箇所まで移動するとhover時のブロックが横に伸びていく感じで移動できる。(また日本語変で申し訳ない･･･)
demo2(サイトのサンプルの下の方)は水平メニュー部分を背景画像として扱っているので、liの最初の<a class="link">Home</a>みたいな部分がいらなくなる。
一番上で仕事で使うのには実用的でないと述べた理由はやはりli内のソースがやたらめったら多くなるという点だ。必要なのは最初の1つのaタグなのだが、このcssテクニックを使うとなればaとspanの数がとんでもない事になるので効率的ではない。でも素直にすごい発想だなーとソースを見るたびに思う。すごい!
このサイト、他にも面白いテクニックをいろいろと紹介しているので、興味のある方はどうぞ。
CSS examples http://www.pmob.co.uk/
<< タイトル背景上で左右に何かを分けて入れたい | FOUC >>
トラックバック
このエントリーのトラックバックURL:
http://redline.hippy.jp/cgi/mt/mt-tb.cgi/64
コメント (3)
こんにちわ！
これはすごいですねー。
といっても、コードを見てもあまりわからないという僕のレベルなんですけど。でもCSSだけでこういのができるのかーと思うと、自分ももっと勉強しなきゃなーと思います。
またこういう解説楽しみにしてます！
投稿者: ごう | 2006年10月25日 16:58
>ごうさん、こんばんわ。
なんか発想がすごいですよね。普通に仕事でサイト作ってたらこういうやり方、思いつかないですもん･･･（私だけ？ｗ）
人のソースは本当に勉強になりますよね。私もまだまだ修行中の身なので、いろいろなやり方や工夫を発見するたびに自分なりに調べたりして日々勉強中です。
ごうさんも頑張ってくださいね。
投稿者: Red | 2006年10月25日 20:45
I've seen all the difference in races as to conceal an emotion, though from a chief, that I am a burden on myself as occasions offer.
投稿者: continuum game | 2007年01月03日 01:07