« タブの切り替えが出来るJavaScript「SimpleTabs」 | トップページ | jQueryの使い方 - jQueryUIを利用してみる。#jQuery »

2011年6月13日 (月)

CSS3とjQueryを使った背景画像をアニメーションするボタン

CSS3のアニメーション機能と背景画像を動かせるjQueryプラグインを使ったアニメーションするボタン「Using jQuery for Background Image Animations」の紹介と「Background-Position Animation Plugin」の導入方法を解説します。

アニメーションするボタンのデモページ
Flashを使わなければできなかったようなボタンがCSSとjQueryで出来るようになっていますね。
色々と応用もできそうな感じです。

Background-Position Animation Pluginのデモページ

Background-Position Animation Pluginの導入方法

使用するリソース
jquery.js
jquery.backgroundPosition.js

head要素への記入
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.js"></script>
<script language="javascript" type="text/javascript" src="フォルダ名/jquery.quicksearch.js"></script>
<script type="text/javascript">
 $(function(){
  $('#background')
   .click(function(){
    $(this)
     .animate({'background-position': '100px 100px'}) //クリックした後に動く位置を指定します。
     .animate({backgroundPosition: '-100px 200px'}); //クリックした後に戻る位置を指定します。
    });
 });
</script>
<style type="text/css">
 #id名{
  background: url(ファイル名.jpg) no-repeat 20px 20px; //背景画像の指定と初期位置の設定を指定します。
 }
</style>

html要素への記入(例)
<div id="id名">
 menu
</div>

|

« タブの切り替えが出来るJavaScript「SimpleTabs」 | トップページ | jQueryの使い方 - jQueryUIを利用してみる。#jQuery »

css」カテゴリの記事

jQuery」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1378074/40340497

この記事へのトラックバック一覧です: CSS3とjQueryを使った背景画像をアニメーションするボタン:

« タブの切り替えが出来るJavaScript「SimpleTabs」 | トップページ | jQueryの使い方 - jQueryUIを利用してみる。#jQuery »