skuare.net

JavaScriptライブラリjQueryのサンプルを中心にWebサイト構築に役立つ情報を紹介

画像に反射効果を与えるjavascript「Reflection.js」

Web2.0と言われる様になってから多くのサイトで水面に反射させたような画像が使われるようになりました。
Photoshopなどの画像編集ソフトを使用すると簡単に作成できますが、手間もかかります。
Cow's BlogReflection.jsを使用すると簡単に導入することが出来ます。

sponsors

使用方法
Reflection.jsからダウンロードしたreflection.jsをhead内に書き込むだけです。
あとは対象の画像にclass属性としてreflectを付与すればOKです。
またオプションとして反射の高さを変更するrheight、反射の透明度を指定するropacityがあります。
例)<amp-img src="画像URI" class="reflect rheight50 ropacity20">
画像に反射効果を与えるjavascript「Reflection.js」サンプル

sponsors

「画像に反射効果を与えるjavascript「Reflection.js」」をシェアする

記事作成:
記事URL:

TOP > > > 画像に反射効果を与えるjavascript「Reflection.js」

前の記事:
次の記事:ポラロイド風の画像に加工するjavascript「Instant.js」

JavaScript

read more

Column

read more