HOME > >

Reflection.js

Reflection.jsとは？

水面に反射するような効果を画像に加えるJavaScriptです。ブラウザ独自拡張のフィルタではないのでどのブラウザでも安心。とはいえ全てのブラウザでOKってわけではないですが・・・

対応ブラウザ

Internet Explorer 5.5〜, Mozilla Firefox 1.5〜, Opera 9〜 Safari

Reflection.js関連サイト

ダウンロードサイト
http://cow.neondragon.net/
解説サイト
http://gigazine.net/

利用方法

  1. <head>〜<head>内に<script type="text/javascript" src="reflection.js"></script>を記述
  2. img要素にclass="reflect"を記述
  3. 反射した画像の高さ指定はimg要素にclass="rheight**"を記述。**は2桁の数値を入れ**%となる。
  4. 反射した画像の不透明度の指定はimg要素にclass="ropacity**"を記述。**は2桁の数値を入れ**%となる。
  5. 反射した画像の高さと不透明度の指定はimg要素にclass="rheght** ropacity**"と半角スペース区切りで記述。

Reflection.js サンプル

class"reflect"

class="reflect rheight50"

class="reflect ropacity90"

class="reflect rheight90 ropacity80"

JavaScriptパターン ―優れたアプリケーションのための作法

作者:Stoyan Stefanov | 価格:￥ 2,940

Lightbox JS
 ライブラリ
 Simple Javascript Accordions
PAGE RANK

356 PV約 74 秒/1PV

Wordpress プラグイン作成前の基礎知識 | WEBプログラム覚書

1357 PV約 71 秒/1PV

[PHP]MySQLを利用した画像の保存と出力 | WEBプログラム覚書

265 PV約 69 秒/1PV

[jQuery Mobile]初期化イベントメモ | WEBプログラム覚書

538 PV約 64 秒/1PV

表示内容の切り替え(JavaScript) | WEBプログラム覚書

393 PV約 60 秒/1PV

[WordPress]XML-RPCを利用して外部から投稿したりする。 | WEBプログラム覚書

278 PV約 57 秒/1PV

[Ubuntu11.10]Ubuntuのインストール後の設定 | 情報備忘録

245 PV約 55 秒/1PV

[Ubuntu11.10]Windows XPとUbuntuのデュアルブート環境 | 情報備忘録

2343 PV約 50 秒/1PV

jQueryによる表示、非表示切り替え | WEBプログラム覚書

365 PV約 49 秒/1PV

[PHP] スクレイピング 基本 | WEBプログラム覚書

564 PV約 43 秒/1PV

javascript 子要素取得のメモ | WEBプログラム覚書

250 PV約 39 秒/1PV

ウィンドウサイズを取得 | WEBプログラム覚書

707 PV約 37 秒/1PV

[jQuery]こんな機能があったんだ。jQuery stop() | WEBプログラム覚書

217 PV約 32 秒/1PV

PHP 参照渡し(リファレンス)と値渡し | WEBプログラム覚書

868 PV約 28 秒/1PV

Dreamweaverで文字コードを変換する手順 | 情報備忘録

254 PV約 28 秒/1PV

[PHP]CakePHPのAuthメモ | WEBプログラム覚書

472 PV約 25 秒/1PV

ウェブデザイン・ホームページ制作 KANTENA.COM

214 PV約 25 秒/1PV

Divの高さを揃える方法 (css版) | WEBプログラム覚書

338 PV約 20 秒/1PV

MySQLエラー「Column 'カラム名' in field list is ambiguous」 | WEBプログラム覚書

217 PV約 18 秒/1PV

javascript フォーム関連オブジェクトの取得 | WEBプログラム覚書

635 PV約 17 秒/1PV

Excel VBA の改行コード | WEBプログラム覚書

TIME LINE
2012
05.16

XMLHttpRequestってUserAgentを変更できないのかorz

セキュリティ的に禁止してるんだろうけどChromeでは出来ないのか、そもそもJavascriptの仕様として禁止されてるのかは不明。

2012
05.10

[Javascript]文字列を1文字ごとタグで囲む

[PHP]文字列を1文字ごとタグで囲む | WEBプログラム覚書のJavascript版。

2012
05.10

[PHP]文字列を1文字ごとタグで囲む

PHPで文字列を1文字ごとタグで囲みたいとき。

2012
04.25

WebフォントとJavascript

WebフォントとjQueryのテキストエフェクトプラグインを試してて気がついたんだけど API経由でWebフォント取得、設定してるとJavascriptの実行が早すぎて困るw

2012
04.12

[Ubuntu11.10]インストール直後にやっておけばよかったこと

Ubuntu 11.10 Desktop 日本語 Remixの場合、ユーザーのホームディレクトリにあるディレクトリ名が 日本語なのでターミナルでディレクトリ移動する場合、非常に扱いづらい。

2012
04.11

シンプルでカスタマイズしやすそうなコンテンツスライダー jQuery Slider2

シンプルでカスタマイズしやすそうなコンテンツスライダー jQuery Slider2

2012
04.06

CORESERVERからロリポのチカッパプランに移転してFTPとおさらばした。

CakePHP2系はPHPのバージョンがシビアなので、CORESERVERからロリポの チカッパプランに移転したんだけど、gitが利用できてなんだか得した気分です。

2012
04.04

[CakePHP2.0.x]FormHelper::input()の出力メモ

FormHelper::input()の出力がどのくらい変更できるかのテスト。

2012
03.28

[CSS]WindowsでLESS更新時に自動でコンパイルする設定方法

Windowsで.lessファイル更新と同時にコンパイルしてCSSを書き出す方法を2つほど。 簡単に開発環境を構築するためUbuntu入れたのに、Windowsの方が簡単だったりするから困るw

2012
03.27

[CSS3/HTML5]ページタイトルとかに使えそうな3Dっぽいテキストエフェクト

Code Padよりタイトルとかに使えそうなテキストエフェクト。それほどゴテゴテしてなくていい感じ。