Filmed.jsを使う(1)

今回からしばらく、ホームページで利用できそうな
画像フレームScriptを使ってみたいと思います。

Suript提供元は、http://www.netzgesta.de/
Glissy.jsLoupe.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だと表示が若干異なります。

次回、オプションのクラスについて紹介します。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください