Home > 20071208


20071208

Reflection：掲載画像をWeb2.0風に反射させるJavaScript
Reflection.js

Web2.0によってWebのインターフェイス系が扱いやすく（ajax/MashUp）、レイアウト系が見やすく（丸角画像・反射画像・グラデーションカラーなど）なってきた。そこで、簡単なJavaScriptの記述と掲載画像へのクラス付加によって、反転させる手法を紹介したいと思います。
サンプルとして以下に比較画像を載せましたが、Highslide JS・Shadowboxどちらかを実装後、動作しなくなりましたので、まったく同じ画像で表示されています。20071230_01.jpg通常だとこのような画像。
これが、以下の手順を行うことによって下の画像みたいになるのです。
１．この記事一番上の Reflection.js へアクセス
２．ページ真ん中あたりのダウンロードから js をダウンロード
３．ダウンロードした js（reflection.js）をサイト・ブログへアップロード
４．html内のhead間にreflection.jsを呼ぶscriptを記述
５．掲載画像のclassをreflectにする

20071230_01.jpg上記の工程を行うとこんな風に反射します。
FYI：以下サイトではもっと手順が詳しく掲載されています
DesignWalker｜CSSとJavaScriptで画像を鏡に反射したようにさせてみる

Home > 20071208

Search
Adsense

Calendar
« 2007/12 »
S M T W T F S
- - - - - - 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 - - - - -
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top