Home > 技術 > JavaScriptでロールオーバーアニメーション

JavaScriptでロールオーバーアニメーション

2009-01-15 (木)
技術

trick7 - ロールオーバー効果へのこだわりを見て、うわ～最後のほうをTweenさせるだけでこんなに気持ちいのかとJavaScript版を作ってみました。

しかし、やっぱりFlashとJavaScriptの違い顕著に出てしまったのですがそれっぽくなったと思います。

JavaScriptソースコード

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
<script type="text/javascript">
//![CDATA[

$(function(){
	for(var i = 1; i <= 5; i++){
		$("#tweenFrame" + i)
			.bind("mouseover", {index: i}, mouseOver)
			.bind("mouseout", {index: i}, mouseOut);
	}
	
	function mouseOver(event){
		$("#tween" + event.data.index)
			.css("width", "200px")
			.animate(
				{width: 250 + "px"},
				{queue: true, duration: "slow", easing: "easeOutExpo", complete: function(){}}
			);
	}
	
	function mouseOut(event){
		$("#tween" + event.data.index)
			.animate(
				{width: 0 + "px"},
				{queue: true, duration: "slow", easing: "easeOutExpo", complete: function(){}}
			);
	}
});

//]]
</script>
<style>
<!--

.tweenFrame {
width: 250px;
height: 20px;
margin: 3px;
position: relative;
}

.tweenbg {
width: 250px;
height: 20px;
background-color: #C8FFE3;
position: absolute;
top: 0;
left: 0;
z-index: 1;
filter:alpha(opacity=50);	/*IE*/
-moz-opacity:0.5;	 		/*Firefox*/
opacity:0.5;				/*Safari*/
margin: 0px;
padding: 0px;
}

.tween {
width: 0px;
height: 20px;
background-color: #00F9BB;
position: absolute;
top: 0;
left: 0;
z-index: 0;
margin: 0px;
padding: 0px;
}

-->
</style>
<div id="frame">
	<div id="tweenFrame1" class="tweenFrame">
		<div id="tweenbg1" class="tweenbg"></div>
		<div id="tween1" class="tween"></div>
	</div>
	<div id="tweenFrame2" class="tweenFrame">
		<div id="tweenbg2" class="tweenbg"></div>
		<div id="tween2" class="tween"></div>
	</div>
	<div id="tweenFrame3" class="tweenFrame">
		<div id="tweenbg3" class="tweenbg"></div>
		<div id="tween3" class="tween"></div>
	</div>
	<div id="tweenFrame4" class="tweenFrame">
		<div id="tweenbg4" class="tweenbg"></div>
		<div id="tween4" class="tween"></div>
	</div>
	<div id="tweenFrame5" class="tweenFrame">
		<div id="tweenbg5" class="tweenbg"></div>
		<div id="tween5" class="tween"></div>
	</div>
</div>

2つのdiv要素を用意しておいて、1つ目の要素にマウスが乗ったときに2つ目の要素をアニメーションさせています。
1つ目の要素を覆うように2つ目の要素が重なるので、そのタイミングでmouseoverが発生してしまうためz-indexでアニメーションする要素を後ろ側に隠しています。

それとanimateメソッドでwidth:0pxからアニメーションするのではなく、いったんcssメソッドを使ってwidth:200pxまで進めておいて、最後の50pxをアニメーションするようにしています。
このひと手間でオモロ～になりました。

続きで動作確認。

追記：
ごめんなさい、ブログのデフォルトスタイルが効いてIE6で変なところにサンプルが表示されるかもです。
う～んやっぱりこうゆうのやるときはそれ用のページ作ったほうがいいんですかね。

Flashだったらスタイルの影響を受けないけどｗ

カラフルな要素があっちいったりこっちいったり - xyz.jsとかもちょっとアニメーションを面白くするだけで雰囲気が全然変わってくるんでしょうね。

Trackback:0

TrackBack URL for this entry: http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1148
Listed below are links to weblogs that reference: JavaScriptでロールオーバーアニメーション from HouseTect, JavaScriptな情報をあなたに

Home > 技術 > JavaScriptでロールオーバーアニメーション

Search

Ads

書いてる人について

author：hisasann.com
lab : lab.hisasann.com
twitter : フォローミー
facebook : Hisa Yoshi

Javascriptをメインに使っているプログラマーの技術ブログです。ちょっぴりアートでちょっぴりオモシロイものを作ってます。
記事の内容はjQuery、jQueryMobile、HTML5、CSS3などなど…

是非こちらからRSSの登録をお願いいたします！
損はさせないぜっ！

RSS Feedを登録する

作ったもの :

products

他に運営しているサイト：

人気のエントリー

JavaScript本

誰もが通る道… それはサイ本。

JavaScriptだけでなく、CSSやフロントエンドのパフォーマンスアップがぎっしりと詰まっててすばらしい良書です。

執筆されたのは結構前なのですが、いろいろなJavaScriptの手法が書いてあるステキな本。特にJohn ResigがjQueryの初期を制作しているときの本なので、英語ですがコードだけでも追うと面白いと思います。

書評 - jQuery Mobileポケットリファレンスで書評を書きました。

Recent Entries

Tag cloud: ActionScript addon Ads Ajax Algorithm Amazing Android Anime Apache AppleScript Application Aptana baby Blog Bloger BlogParts Book Book Review Bookmark Bookmarklet bot Box2d browser Camera Canvas Catalyst Chrome CM Communication Cool CPAN CSS CSS3 DB design Dinner DJ DOM DS Eclipse Editor Electro Emulator Engineer English Firebug Firefox Flash Flex Flickr Food Freesoft Funny Gadget Game Geek Generator git Google Google Wave GoogleAnlytics Greasemonkey Grow Hacker Haml hatena HTML HTML5 iBatis IDE Idea IE IE6 IE7 IE8 Image ImageMagick Interface iPad iPhone iPod IT Item iTunes Java JavaScript jQuery jQueryMobile jsDeferred JsUnit Keyboard Lanch Language LifeHack Lightbox Mac MacBookPro MacPorts Mash-up MeCab Mobile Monitor MOO Motivation Movalble Type Movie Music MySql Netscape News nginx Nikki node.js OpenSource Opera Oracle Papervision3D Pasta PC Perl Photoshop PHP PL/SQL Plugin Presentation Program Progression prototypeJS Python QUnit Ramen Rhino RSS Ruby Ruby On Rails Safari Sakura Sanitizing Search Seasar2 Security SEO Shell Shortcut Sinatra Skill Smartphone SMO SNS Spring SQL SSH SSL Struts SVN Test TextMate Tomcat Tool Tumblr Twitter Unix Vim Vista VMware VPS Web Web2.0 Webkit WebService Wii Wiki Windows Word WordPress Work Workshop WTP XAMPP XCode XMLHttpRequest2 XSS XUL Yahoo YouTube YUI Zen-Coding
カテゴリー: Firefox

Lifehack

Mac

News

Photoshop

Web

アイテム

ガジェット

ゲーム

サービス

デザイン

ブログ

技術

映像

本

画像

考え方

言葉

雑記
月別アーカイブ
Powered by: Powered by
Movable Type Commercial 4.261

Page Top