今回からしばらく、ホームページで利用できそうな
画像フレームScriptを使ってみたいと思います。
Suript提供元は、http://www.netzgesta.de/。
Glissy.jsやLoupe.jsと同じところです。
[Filmed.js]
http://www.netzgesta.de/filmed/
画像を映画フィルムのようなフレームで表示するスクリプトです。
使える状況はちょっと限定されそうですが、
簡単に実装できそうなので、覚えておくと何かに使えそう。
◆ダウンロードとScriptの設置
「Download」から[filmed.js 1.0]をダウンロードします。
（ダウンロードするファイルは[filmed.zip]）
サンプルも同胞されていますが、必要となるファイルは[filmed.js]だけですので
適切な場所に配置をして、利用したいHTMLのヘッダで宣言します。
<script type="text/javascript" src=xxxx/filmed.js"></script>（filmed.jsは若干ファイルが大きめです。–21,064 バイト。）
◆使用方法
画像フレームを使いたいimgタグにcalss=’filmed’を指定すれば
デフォルトの映画フィルム風フレームが適用されます。
サンプルに使用させていただくのはこの画像。
なんともクリエイティブです。
花とアリス photo by keyco* from Zorg
<img src='xxx/images/xxxx.jpg' class='filmed'/>
画像の長い側にフィルム風の装飾がされます。
（正方形の画像の場合は、横に装飾されます。）
フィルム風の装飾は画像を使っているのではなく、
canvas要素に描画することで実現しています。
canvas要素はIEでは適用されませんので、IEは別スクリプトで動作しています。
そのため、IEだと表示が若干異なります。
次回、オプションのクラスについて紹介します。