Reflection.js : 画像を反射させることができるJavascriptライブラリ

Tweet

Pocket

画像を反射させる処理をよく目にします。Javascriptを用いて鏡面効果を施すライブラリを紹介します。
»Reflection.js

利用手順

Reflection.jsはreflection.jsだけを読み込めば利用できます。
»サンプル

----- 読み込み header部分 -----
<script type="text/javascript" src="https://www.findxfine.com/wp-content/themes/findxfine/reflection/reflection.js"></script>

----- body -----

	<img src="ファイルパス" class="reflect" />
	<img src="ファイルパス" class="reflect rheight33" /> ⇐ 反射部分が33%
	<img src="ファイルパス" class="reflect rheight66" /> ⇐ 反射部分が66%

Reflection.jsの覚書
reflection.jsは最終行でonloadを定義している。

// reflection.jsの最終行
window.onload = function () { if(previousOnload) previousOnload(); addReflections(); }

カスタムのonloadを定義し、かつreflection.jsを利用する場合は、カスタムのonloadに次のコードを追加

// 自前のonload
window.onload = function(){
	・・・・・・・・・・・・・・・・ // 自前の処理
	if(previousOnload) previousOnload(); addReflections(); // reflection.jsの最終行を追加
}

onload関数を自ら定義する場合はライブラリの最終行をオーバーライド。
例えばfindxfineでも紹介したNifty Corners Cubeと併用する場合の記述。
»Nifty Corners Cube : CSSとJavascriptのみで角丸を実現するライブラリ

window.onload = function(){
	Nifty("div#box");// Nifty Corners Cube実行
	if(previousOnload) previousOnload(); addReflections(); // reflection.jsの最終行を追加
}