Movable Type 備忘録
JavaScriptでポラロイド写真風に表示する
- Prev Page: あわせて読みたい
- Next Page: Web 2.0 - LogoCreator
こんにちわ^^
今日は区役所に用があったので 9:00 に家を出て、帰りにマンガ喫茶に寄って来ました。
こんな朝早くマン喫行ったのは初めてですが、意外にもお客さんが多いのにはビックリです Σ(￣Д￣；)!!
平日のこんな朝っぱらから･･･というわたしも同類ですけど (;￣∇￣A はは
ということで、初めての試みですが、渋谷のマン喫から記事のご紹介をしたいと思います♪
さて、今回はイメージをポラロイド写真風にエフェクトしてくれる JavaScript のご紹介です。
youmosさんのところで、写真にポラロイドデザインのエフェクトを適用するJavaScript （Instant.js）というのが紹介されてたので、実際に試してみました。
使い方
まずは JavaScript をダウンロードします。
こちらのInstant.js (now with IE 6/7 support)から Instant.zip ファイルを入手します。そして、各自の環境に合わせてアップロードしてください。
次に HTML ヘッダ(<head>～</head>)に以下を追加しておきます。
<script type="text/javascript" src="<$MTBlogURL$>js/instant.js"></script>
青い字の部分を各自の環境に合わせて変更します。
最後に、ポラロイド写真風にエフェクトさせたいイメージに class="instant" を追加します。
<img style="width:240px; height:240px;" src="<$MTBlogURL$>image/●●●.jpg" alt="" class="instant" />
青い字の部分を追加するだけです。
以上でポラロイド写真風にエフェクトさせることができました。
instant.js にはオプションもあって、ドロップシャドウの深さやフレームの色、イメージの傾きを変更することができるようです。
ドロップシャドウの濃さを変更する場合
class="instant ishadow50"
青い字のように、ishadow + 0 ～ 100 の間で数値を指定すればよいようです。
デフォルトは 33 とあります。
フレームの色を変更する場合
class="instant icolor000000"
赤い字のように、icolor + 000000(=黒) ～ FFFFFF(=白) を指定するようです。
デフォルトは F0F4FF とあります。
左に傾けたい場合
class="instant itiltleft"
右に傾けたい場合
class="instant itiltright"
傾けたくない場合
class="instant itiltnone"
カンタンですね (￣∇￣)b
ちなみに、イメージに艶をつけるglossy.jsや、イメージを角丸にしてくれるcorner.jsってのも配布されてました。
いずれも instant.js と同様にカンタンにエフェクトをつけることができました (●´∀｀●)
Trackback Pings(0)
No trackbacks found.
Comments(4)
Post a Comment
-
Movable Type 5 をベースにされてる技術本です。
ある程度 Movable Type に慣れてる人をターゲットとしたテクニカルな内容が記載されてますのでステップアップにいいかも。Movable Type 4 をサポートしてる書籍です。
これから始める人にはもちろんのこと、Movable Type を既にお使いの人でも一度読んでみるといいかもです。 -
- Loading...
- 私を登録 by BlogPeople
お邪魔してます、かわぐちです。
ぬぬっ、おもしろそうですね。
時間がとれたら、やってみま～す。
>>1 かわぐち さん
こんにちわ^^
使い勝手良かったので、便利かもです。
是非!!
IE６に対応したようですね。
Instant.jsを作っている方のJavaScriptライブラリは、class= で設定できるのでHTMLコードの汚染もなく気に入っています。もう少し実行速度が速くなれば、コンテンツ全体に利用したいですね。
MTを最近まで使っていて、プラグイン開発がしにくく他のCMSへ移行した直後、最新版リリースにはやられました。。バージョンアップの記事を楽しみにしてます。では
>>3 youmos さん
こんにちわ^^
> もう少し実行速度が速くなれば、コンテンツ全体に利用したいですね。
てっきり Firefox の処理が遅いだけかと思ってましたが、スクリプトにも実行速度の遅さの要因があったんですね (;￣∇￣A
でも、手軽にこれらのエフェクトがつけられるので、わたしも気に入ってます♪
> MTを最近まで使っていて、プラグイン開発がしにくく他のCMSへ移行した直後、最新版リリースにはやられました
テンプレートが代わったのはそのタイミングですか!?
> バージョンアップの記事を楽しみにしてます。
はい。ありがとうございます。
youmos さんの記事は気になるものばかりで今後も楽しみにしてます (￣∇￣)/