[JS]普通の画像にちょっとしたエフェクトを与えてかっこよくするスクリプト -Little Colour Boxes

なんでもない普通の画像でもちょっとしたエフェクトを与え、人目を惹くようにするjQueryのプラグインを紹介します。

サイトのキャプチャ

Jquery plugin Little Colour Boxes is launched
利用例:A's Cleaning Service

[ad#ad-2]

スクリプトは、カラーのボックスをランダムにアニメーションで表示します。
デモはもっと分かりやすいと思います。

サイトのキャプチャ

デモページ

[ad#ad-2]

Little Colour Boxesの実装

HTML

HTMLは画像を配置したimg要素にidを追加するだけです。
id名は任意のものが利用でき、classなどjQueryの書式で記述できるものに変更可能です。

<img src="images/nice_pattern_islamic.gif" width="425" height="425" id="image-boxes">

JavaScript

jquery.js」と当スクリプト「jquery-littlecolourboxes.js」を外部ファイルで指定し、下記のスクリプトを記述します。

$(document).ready(function() {
	$("image-boxes").colboxes("#fff");
});

ボックスのカラーは自由に変更できます。

現在生成されるボックスの数は7x7で、次のリリースでボックスの数が変更できるようになる、とのことです。
また、対応ブラウザはIE6以外となっています。

sponsors

top of page

©2024 coliss