コンテンツにエフェクトを掛けるjQueryプラグイン10個

スポンサーリンク

jquery-effect
個人的に必要になるかもと思ってメモ。
テキストや画像にエフェクトを与えて
Webサイトを動きのあるサイトにする
手助けをしてくれるjQueryのプラグイン
をいくつかご紹介します。

コンテンツに対するユーザーの興味を高めたり、画像を使用せずテキストを装飾したりと、使い方次第でいろいろ用途がありそうです。

Sliding Door Effect

jquery-effect01
マウスオーバーで画像が4隅に開きます。動きも素敵。

Sliding Door Effect / デモ

Rainbows

jquery-effect10
テキストにグラデーションや影をつけます。これは凄いですね。

Rainbows / デモ

Opacity to Show Focus

jquery-effect02
マウスオーバーしたコンテンツ以外に半透明のエフェクトを掛けるjQueryプラグイン。テキストでも可能。

Opacity to Show Focus / デモ

Color Changing Text and Backgrounds

jquery-effect03
背景の画像の色が自動で変化します。デモは多めに色を使っていますが、個人的には同系2色とかでクールな演出とかやってみたい。

Color Changing Text and Backgrounds / デモ

Font effect

jquery-effect09
テキストにアウトラインやシャドウ、グラデーション、リフレクション効果を与えます。SEOもデザインも考慮したプラグインかもしれない。

Font effect / デモは同じページ

Sliding Boxes and Captions

jquery-effect04
マウスオーバーでレイヤーが軽快にスライドします。6つあり。かなりお気に入りです。

Sliding Boxes and Captions / デモ

Background Image Animations

jquery-effect05
マウスオーバーでの切り替わり時にエフェクトを掛けたメニュー。フェードやスライドなどなど。

Background Image Animations / デモ

Simple Page Peel Effect

jquery-effect06
ページの隅に「めくれ」を作り、マウスオーバーでコンテンツを表示。以前Flashで流行りましたね。動きもなかなかです。キャンペーン等に使えそう。

Simple Page Peel Effect / デモ

CrossSlide

jquery-effect07
自動でゆっくりスライドしながら別の画像にフェードするギャラリー系プラグインです。シンプルで汎用性も高そう。

CrossSlide / デモは同ページ

Fancy Thumbnail Hover Effect

jquery-effect08
マウスオーバーで拡大&ドロップシャドウを加えます。動きも滑らかだし、何かと使えそうな気がします。

Fancy Thumbnail Hover Effect / デモ

以上10のjQueryプラグインでした。上手く利用したいところですね。ちなみに軽さは未確認です。すみません。

URL :
TRB :

Comments & Trackbacks (7)

  1. SEO-Friendly Article Directory

    Very informative post. Thank you. Keep em coming!

  2. シロ

    >SEO-Friendly Article Directory

    thanx :-D

  3. attrip

    右上メクリは、便利だねー^^
    個人的には、続きを読むボタンのjqueryのエフェクトしりたいなーとおもったらここにたどりついたよ!

  4. シロ

    >attripさん

    こにちはー :-D

    attrip: 右上メクリは、便利だねー^^
    個人的には、続きを読むボタンのjqueryのエフェクトしりたいなーとおもったらここにたどりついたよ!

    なかなか使い勝手良さそうすねー!Read moreのエフェクトですかー。リンクにマウスオーバーしてかかるエフェクトでいけそうですね :mrgreen:

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services