その他のJSライブラリエフェクト
- Corner.js v1.8〔画像の角を角丸にしたり影をつける〕
- Glossy.js v1.5〔画像をツヤツヤにするJSライブラリ〕
- Instant.js v2.2〔画像のポラロイド写真のような枠をつける〕
- Loupe.js v1.3〔画像をルーペで見たような効果〕
- Reflection.js v2.0〔水面反射効果〕
- Reflex.js v1.2〔水面反射効果〕
Corner.js v1.8
画像の角を角丸にしたり影をつける
unknown
Corner.js v1.8
Firefox 1.5+、Opera 9+、Safari、IE6+
商用利用不可、個人利用のみ可
Glossy.jsと似ていますが、画像の角を角丸にするだけでなく、より細かに影などのエフェクトをかけることができるJSライブラリです。
「corner.js」あるいは「justcorners.js」をhead要素内で読み込み、img要素にclass='corner'と指定するだけ組み込めます。
corner.jsの設置イメージ
justcorners.jsの設置イメージCorner.js v1.8の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Corner.js v1.8 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/cornerjs/corner.js"></script>
<script type="text/javascript" src="/content/lib/cornerjs/justcorners.js"></script>
<style type="text/css">
table { width:80%; }
th { white-space:nowrap; text-align:left; }
td { width:33%; padding-bottom:20px; }
</style>
</head>
<body>
<h1><a href='http://www.netzgesta.de/corner/'>Corner.js v1.8</a> | 設置サンプル</h1>
<h2>corner.js</h2>
<table>
<tr>
<th>corner</th>
<th>corner ishade50</th>
<th>ishadow20</th>
</tr>
<tr>
<td><img src="/content/img/pic2-thumb.png" class="corner" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corner ishade50" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corner ishadow20" /></td>
</tr>
<tr>
<th>corner ishade50 ishadow20</th>
<th>corner ishadow40 inverse</th>
<th>corner iradius16</th>
</tr>
<tr>
<td><img src="/content/img/pic2-thumb.png" class="corner ishade50 ishadow20" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corner ishadow40 inverse" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corner iradius16" /></td>
</tr>
<tr>
<th>corner iradius24 ishadow33 inverse</th>
<th>corner iradius20 ishadow33</th>
<th>corner iradius8 ishade75 ishadow33</th>
</tr>
<tr>
<td><img src="/content/img/pic2-thumb.png" class="corner iradius24 ishadow33 inverse" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corner iradius20 ishadow33" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corner iradius8 ishade75 ishadow33" /></td>
</tr>
<tr>
<th>corner iradius16 ishade66 ishadow30</th>
<th>corner iradius32 ishade50 ishadow25</th>
<th>corner iradius48 ishade33</th>
</tr>
<tr>
<td><img src="/content/img/pic2-thumb.png" class="corner iradius16 ishade66 ishadow30" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corner iradius32 ishade50 ishadow25" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corner iradius48 ishade33" /></td>
</tr>
</table>
<h2>justcorners.js</h2>
<table>
<tr>
<th>corners iradius32</th>
<th>corners iradiae1010</th>
<th>corners iborder1 icolorffffff</th>
</tr>
<tr>
<td><img src="/content/img/pic2-thumb.png" class="corners iradius32" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corners iradiae1010" /></td>
<td><img src="/content/img/pic2-thumb.png" class="corners iborder1 icolorffffff" /></td>
</tr>
</table>
</body>
</html>
Glossy.js v1.5
画像をツヤツヤにするJSライブラリ
unknown
Glossy.js v1.5
Firefox 1.5+、Opera 9+、Safari、IE6
商用利用不可、個人利用のみ可
画像に立体エフェクトをかけてツヤツヤに見せるJSライブラリです。
「glossy.js」をhead要素内で読み込み、img要素にclass='glossy'と指定するだけ組み込めます。
影を付けたりといったオプション指定も、クラス名に追加するだけで実装できます。
エフェクトがかけられる画像の最小サイズは、16×16ピクセルです。
Glossy.jsの設置イメージGlossy.js v1.5の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Glossy.js v1.5 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/glossy/glossy.js"></script>
</head>
<body>
<h1><a href='http://www.netzgesta.de/glossy/'>Glossy.js v1.5</a> | 設置サンプル</h1>
<h2>glossy + iradius20～50</h2>
<p><img src="/content/img/16x16.png" class="glossy iradius25" /> 16x16</p>
<p><img src="/content/img/32x32.png" class="glossy iradius25" /> 32x32</p>
<p><img src="/content/img/dog_mini.gif" class="glossy iradius25" /> 50x50</p>
<p><img src="/content/img/pic1-thumb.png" class="glossy iradius25" /> 120x90</p>
<h2>glossy + ibgcolorRRGGBB + igradientRRGGBB + horizontal + noshadow</h2>
<p><img src="/content/img/pic1.png" class="glossy ibgcolor00aa00 igradient00aaaa horizontal noshadow" /> 320x240</p>
</body>
</html>
Instant.js v2.2
画像のポラロイド写真のような枠をつける
unknown
Instant.js 2.2
Firefox 1.5+、Opera 9+、Safari、IE6+
商用利用不可、個人利用のみ可
画像に太めの枠線をつけてをポラロイド写真のようにするJSライブラリです。
「instant.js」をhead要素内で読み込み、img要素にclass='instant'と指定するだけ組み込めます。
枠線の色、影の有無、影サイズ、傾きの方向（左or右）を指定する場合は、クラスを追加するだけで実装できます。
エフェクトがかけられる画像の最小サイズは、64×64ピクセルです。
設置イメージInstant.js v2.2の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Instant.js v2.2 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/instantjs/instant.js"></script>
</head>
<body>
<h1><a href='http://www.netzgesta.de/instant/'>Instant.js 2.2</a> | 設置サンプル</h1>
<table>
<tr>
<th>instant itiltright</th>
<th>instant itiltleft</th>
<th>instant icolorff6699</th>
<th>instant icolor000000 ishadow50</th>
</tr>
<tr>
<td><img src="/content/img/pic2-thumb.png" class="instant itiltright" /></td>
<td><img src="/content/img/pic2-thumb.png" class="instant itiltleft" /></td>
<td><img src="/content/img/pic2-thumb.png" class="instant icolorff6699" /></td>
<td><img src="/content/img/pic2-thumb.png" class="instant icolor000000 ishadow50" /></td>
</tr>
</table>
</body>
</html>
Loupe.js v1.3
画像をルーペで見たような効果
unknown
Loupe.js v1.3
Firefox 1.5+、Opera 9+、Safari、IE6+
商用利用不可、個人利用のみ可
サムネイル画像の上でルーペをドラッグ＆ドロップすると、その部分の拡大画像がみれるJSライブラリ。 配布元サイトのデモではモナリザの微笑みを拡大したりと、発想が面白いですね。
設置イメージLoupe.js v1.3の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Loupe.js v1.3 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript">var loupePath="/content/lib/loupe/";</script>
<script type="text/javascript" src="/content/lib/loupe/loupe.js"></script>
<!--[if gte IE 6]>
<script type="text/javascript">var loupePath="/content/lib/loupe/vml/";</script>
<script type="text/javascript" src="/content/lib/loupe/vml/loupe.js"></script>
<![endif]-->
<style type="text/css">
</style>
</head>
<body>
<h1><a href='http://www.netzgesta.de/loupe/'>Loupe.js v1.3</a> | 設置サンプル</h1>
<h2>Zoom Effect</h2>
<div style="width:320px; height:240px; background:url(/content/lib/loupe/images/food/small.jpg) no-repeat; border:1px solid #ccc;">
<img id="food" onLoad="initLoupe(this.id,true,773,364);" src="/content/lib/loupe/images/food/big.jpg" style="cursor:wait;" width="320" height="240" alt="large image" />
</div>
</body>
</html>
Reflection.js v2.0
水面反射効果
unknown
Reflection.js v2.0
IE 5.5+、Firefox 1.5+、Safari、Google Chrome and Opera 9+
head要素内で「reflect.js」を読み込み、水面反射効果を付けたい画像のimg要素にclass='reflect'を指定するだけで簡単に実装できます。
背景色を指定したり、水面反射効果の高さや透明度を付けたい場合は、rheight40の数値部分に反射効果の「高さ」、ropacity20の数値部分に反射効果の「透明度」をそれぞれ10刻みで指定します。
設置イメージReflection.js v2.0の設置サンプルサンプルを見る
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="ja" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="imagetoolbar" content="no" />
<title>Reflection.js v2.0 | 設置サンプル</title>
<link rel="stylesheet" type="text/css" href="/content/lib/global.css" />
<script type="text/javascript" src="/content/lib/reflection/reflection.js"></script>
<style type="text/css">
.cf p { float:left; width:90px; padding:10px; }
</style>
</head>
<body>
<h1><a href='http://cow.neondragon.net/stuff/reflection/'>Reflection.js v2.0</a> | 設置サンプル</h1>
<h2>水面反射効果</h2>
<div class="cf">
<p><img src="/content/img/dog_black.png" class="reflect" alt="dog" /></p>
<p><img src="/content/img/dog_white.gif" class="reflect" alt="dog" /></p>
</div>
<h2>Coloured Backgrounds - 背景色を指定できる水面反射効果</h2>
<div class="cf">
<p style="background-color:#FFFF88;"><img src="/content/img/dog_black.png" class="reflect" alt="dog" /></p>
<p style="background-color:#CDEB8B;"><img src="/content/img/dog_black.png" class="reflect" alt="dog" /></p>
<p style="background-color:#C3D9FF;"><img src="/content/img/dog_black.png" class="reflect" alt="dog" /></p>
<p style="background-color:#36393D;"><img src="/content/img/dog_black.png" class="reflect" alt="dog" /></p>
</div>
<h2>Varying Heights - 水面反射効果の高さを指定</h2>
<div class="cf">
<p><img src="/content/img/dog_black.png" class="reflect rheight10" alt="dog" /></p>
<p><img src="/content/img/dog_black.png" class="reflect rheight30" alt="dog" /></p>
<p><img src="/content/img/dog_black.png" class="reflect rheight50" alt="dog" /></p>
<p><img src="/content/img/dog_black.png" class="reflect rheight70" alt="dog" /></p>
<p><img src="/content/img/dog_black.png" class="reflect rheight90" alt="dog" /></p>
</div>
<h2>Varying Opacities - 水面反射効果の透明度を指定</h2>
<div class="cf">
<p><img src="/content/img/dog_black.png" class="reflect ropacity10" alt="dog" /></p>
<p><img src="/content/img/dog_black.png" class="reflect ropacity30" alt="dog" /></p>
<p><img src="/content/img/dog_black.png" class="reflect ropacity50" alt="dog" /></p>
<p><img src="/content/img/dog_black.png" class="reflect ropacity70" alt="dog" /></p>
<p><img src="/content/img/dog_black.png" class="reflect ropacity90" alt="dog" /></p>
</div>
<h2>Scripted Reflection - 動きのある水面反射効果</h2>
<p>▼画像のマウスオーバー時、マウスアウト時で透明度を変化させます。</p>
<div class="cf">
<p><img src="/content/img/dog_black.png" alt="dog" onmouseover="Reflection.add(this, { opacity: 2/3 });" onmouseout="Reflection.add(this, { opacity: 1/3 });" class="reflect ropacity33" /></p>
</div>
<p>▼画像をクリックすると画像に水面反射効果をかけ、削除リンクをクリックすると水面反射効果を取り除きます。</p>
<div class="cf">
<p style="height:150px;"><img src="/content/img/dog_black.png" id="sorbohax" alt="dog" onclick="Reflection.add(this, { height: 1/3, opacity: 2/3 });" /></p>
<p><a href="javascript:Reflection.remove(document.getElementById('sorbohax'))">水面反射効果削除</a></p>
</div>
<p>▼Refrection.add()関数使用</p>
<div class="cf">
<p><img src="/content/img/dog_black.png" id="indeed" alt="" class="reflect ropacity10" /></p>
</div>
<script type="text/css">
var cool=2;
function varyReflect(){
if(cool==10){ cool=1; }
Reflection.add(document.getElementById('indeed'), { opacity: cool/10 });
document.getElementById('indeeda').innerHTML = cool*10;
cool++;
}
</script>
</body>
</html>
Reflex.js v1.2
水面反射効果
unknown
Reflex.js 1.2
Firefox 1.5+、Opera 9+、Safari、IE6+
商用利用不可、個人利用のみ可
画像に様々な水面反射効果をかけられるJSライブラリです。
「reflex.js」をhead要素内で読み込み、img要素にclass='reflex'と指定するだけで実装できます。
指定した背景画像に画像を反射させることもできます。 下方向だけではなく、三面鏡のように様々な角度に反射させることができるので奥行きのあるエフェクトをかけたい時に最適です。
エフェクトがかけられる画像の最小サイズは、32×32ピクセルです。
設置イメージReflex.jsの設置サンプルサンプルを見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>設定サンプル</title>
<script type="text/javascript" src="/content/lib/reflex/reflex.js"></script>
<style type="text/css">
body {
margin:20px; padding:0;
background:transparent url("/content/img/skin/bg.gif") repeat top left;
font-size:81%;
}
div.demo {
float:left; margin:10px;
}
.cf:after {
content:".";
display:block;
visibility:hidden;
height:0.1px;
font-size:0.1em;
line-height:0;
clear:both;
}
.cf {
display:inline-block;
}
/* Hides from IE-mac \*/
* html .cf {
height:1%;
}
.cf {
display:block;
}
/* End hide from IE-mac */
</style>
</head>
<body>
<!-- CONTENT -->
<p>参照：<a href="http://www.netzgesta.de/reflex/">Reflex.js 1.2</a></p>
<!-- CODE -->
<div class='cf'>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>idistance4<br>iopacity50</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex itiltright idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>itiltright<br>idistance4<br>iopacity50</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex itiltnone idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>itiltnone<br>idistance4<br>iopacity50</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>idistance4<br>iopacity50</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex itiltleft idistance4 iopacity50" alt="Dog" /><br><span>reflex<br>itiltleft<br>idistance4<br>iopacity50</span></div>
</div>
<div class='cf'>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex itiltright" alt="Dog" /><br><span>reflex<br>itiltright</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex" alt="Dog" /><br><span>reflex</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex" alt="Dog" /><br><span>reflex</span></div>
</div>
<div class='cf'>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex iopacity50" alt="Dog" /><br><span>reflex<br>iopacity50</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex iopacity75" alt="Dog" /><br><span>reflex<br>iopacity75</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex iopacity25" alt="Dog" /><br><span>reflex<br>iopacity25</span></div>
</div>
<div class='cf'>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance16 iborder2 iheight24" alt="Dog" /><br><span>reflex<br>idistance16<br>iborder2<br>iheight24</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance0 iborder8 iheight40 icolorffffff" alt="Dog" /><br><span>reflex<br>idistance0<br>iborder8<br>iheight40<br>icolorffffff</span></div>
<div class="demo"><img src="/content/img/dog_black.png" width="90" height="90" class="reflex idistance8 iborder1 iheight32 icolor0070a4" alt="Dog" /><br><span>reflex<br>idistance8<br>iborder1<br>iheight32<br>icolor0070a4</span></div>
</div>
<!-- / CODE -->
<!-- / CONTENT -->
</body>
</html>