olidStateEveryday - Ajax,javascript,UIサンプルとチュートリアル -

Ajax,Javascriptサンプル、画像表示系の設置方法

  1. Home>
  2. 画像表示>
  3. 画像エフェクト(加工)>
  4. 画像に３D鏡面効果

画像エフェクト(加工)reflection.js,prototype.js

画像に３D鏡面効果

  • del.icio.us に登録
  • ライブドアクリップに追加
  • Google Bookmarks に追加
  • はてなブックマークに追加
  • Yahoo!ブックマークに登録
<!DOCTYPE html 
     PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="nl" lang="nl">
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta http-equiv="content-language" content="nl" />
		<title>Transitions</title>		
		<script type="text/javascript" src="prototype.js"></script>
		<script type="text/javascript" src="scriptaculous.js?load=builder"></script>
		<script type="text/javascript" src="reflection.js"></script>
        <style>
		*{margin:0 auto;}
		</style>
	</head>	
	<body style = "background-color:#000;">
	<div id = "holder">
		<img src = "sample2.jpg" />
	</div>
	<script type="text/javascript">		
		new Reflect3D('holder');
	</script>	
	</body>
</html>

指定した画像に遠近感のある鏡面効果を付加するスクリプトです。
設定方法は簡単ですが、一括して鏡面効果を付加することができない為、使いどころは難しいかもしれません。 

ダウンロード＆<head>の設定

サイトへ行き、このスクリプトのパッケージをダウンロードしてきます。（Download the full package here.をクリック）
ダウンロードした圧縮フォルダを解答し、任意の場所へアップロード。
次にヘッダーに必要なスクリプトを読み込みます。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=builder"></script>
<script type="text/javascript" src="reflection.js"></script>　

これで設定は完了です。

マークアップとトリガー

鏡面効果を付加する場合は、以下の様な要素のマークアップを行います。

<div id = "holder">
<img src = "sample2.jpg" />
</div>　

そしてトリガーを<body>内に記述します。

<script type="text/javascript">
new Reflect3D('holder');
</script>　

鏡面効果を付加する場合まとめての指定は出来ないようです。
そのため、複数の画像を処理したい場合は、上記のマークアップをそれぞれIDを変えて設置する必要があります。 

関連スクリプト

感想

エッジの処理が荒いためホワイトバックでの使用やエッジのはっきりした画像での効果はあまり期待できないかもしれません。
効果を付加する為には、いちいち<img>を別要素で囲む必要もあるし、、、画像編集ソフトで処理した方がクオリティ的にも満足できるかも。 

スクリプトの使用について

SolidStateEverydayでご紹介しているAjax,Javascript等のスクリプトをご利用になる場合は、必ず製作元のサイトで使用ライセンスを確認してください。ご利用は自己責任でお願い致します。

結局、エックスサーバーなんですよね。