- 2007-12-08 (Sat)
- IT Tips
- Tips
- JavaScript
- ソフト
- ツール
Category :
Tags :
Reflection.js
Web2.0によってWebのインターフェイス系が扱いやすく（ajax/MashUp）、レイアウト系が見やすく（丸角画像・反射画像・グラデーションカラーなど）なってきた。そこで、簡単なJavaScriptの記述と掲載画像へのクラス付加によって、反転させる手法を紹介したいと思います。
サンプルとして以下に比較画像を載せましたが、Highslide JS・Shadowboxどちらかを実装後、動作しなくなりましたので、まったく同じ画像で表示されています。
通常だとこのような画像。
これが、以下の手順を行うことによって下の画像みたいになるのです。
１．この記事一番上の Reflection.js へアクセス
２．ページ真ん中あたりのダウンロードから js をダウンロード
３．ダウンロードした js（reflection.js）をサイト・ブログへアップロード
４．html内のhead間にreflection.jsを呼ぶscriptを記述
５．掲載画像のclassをreflectにする
上記の工程を行うとこんな風に反射します。
FYI：以下サイトではもっと手順が詳しく掲載されています
DesignWalker｜CSSとJavaScriptで画像を鏡に反射したようにさせてみる
Web2.0によってWebのインターフェイス系が扱いやすく（ajax/MashUp）、レイアウト系が見やすく（丸角画像・反射画像・グラデーションカラーなど）なってきた。そこで、簡単なJavaScriptの記述と掲載画像へのクラス付加によって、反転させる手法を紹介したいと思います。
サンプルとして以下に比較画像を載せましたが、Highslide JS・Shadowboxどちらかを実装後、動作しなくなりましたので、まったく同じ画像で表示されています。
通常だとこのような画像。これが、以下の手順を行うことによって下の画像みたいになるのです。
１．この記事一番上の Reflection.js へアクセス
２．ページ真ん中あたりのダウンロードから js をダウンロード
３．ダウンロードした js（reflection.js）をサイト・ブログへアップロード
４．html内のhead間にreflection.jsを呼ぶscriptを記述
５．掲載画像のclassをreflectにする
上記の工程を行うとこんな風に反射します。FYI：以下サイトではもっと手順が詳しく掲載されています
DesignWalker｜CSSとJavaScriptで画像を鏡に反射したようにさせてみる
- Next Entries : DSレイトン教授シリーズを購入
- Prev Entries : Greasemonkey：ユーザスクリプトの実現アドオン＠Firefox拡張機能
Comments:0
Trackback+Pingback:0
- TrackBack URL for this entry
- http://blackcat13numbers.blog31.fc2.com/tb.php/98-928fec2b
- Listed below are links to weblogs that reference
- Reflection：掲載画像をWeb2.0風に反射させるJavaScript from TRASH