category
サイト構築 -JavaScript

[JS]ナビゲーション画像にアニメーションのエフェクトをつける -CSS Sprite2

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

A List Apartのエントリーから、CSS Spriteを使用したナビゲーションに、マウスオーバー時にアニメーションのエフェクトをつける「CSS Sprite2」を紹介します。

CSS Sprite2のデモのキャプチャ

CSS Sprites2 – It's JavaScript Time
demo 5
demo 6

CSS Spriteとは、スタイルシートで一枚の画像から複数箇所に配置をしたり、マウスオーバー時の画像指定を行うものです。
CSS Sprite2は、そのCSS Spriteにスクリプトを使用して、アニメーションのエフェクトつけたものです。
使用するスクリプトは、デモではjQueryが使用されていますが、PrototypeでもYUIなど他のスクリプトでも実装は可能です。

CSS Sprite2のベースとなっているのは、下記ページとのことです。

Animated Menus Using jQueryのデモのキャプチャ

Animated Menus Using jQuery
demo

Post on:2008年8月26日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

Kittens flewby me
on 2008年8月26日

mirrorMan – オンマウスでフェードイン

いつもチェックさせてもらっているcolisさんのサイトで、おもしろいエフェクトを紹介されていたので…

ページの先頭へ




© coliss

RSS