【ハウツー】

ゼロからはじめるInstant.js - Webの画像を壁掛け写真風にアレンジ

1 ゼロからはじめるInstant.js - Webの画像を壁掛け写真風にアレンジ

 
  • <<
  • <

1/4

Instant.jsとは?

Instant.jsはHTMLページ内に埋め込まれている画像を写真風にアレンジして再描画するライブラリです。Instant.jsは、特定のスタイルシートクラスが指定された<img>タグを、VMLまたは<canvas>タグを使って置き換えて表示します。このため、VML、<canvas>が使えないブラウザでは通常通りに表示され、対応したブラウザでは写真風に加工されて表示されることになります。

Instant.jsはHTMLページ内にスクリプト(プログラム)を記述しなくてよいという利点があります。つまり、全くプログラムが分からない人でも気軽に使えます。Instant.jsでは、HTMLの<img>タグのclass属性に、決められたスタイルシート名、値を指定するだけで自動的に加工表示処理が行われます。また、JavaScriptのコードが実行できるブログであればInstant.jsを利用できます。

Instant.jsはこのURLにあるページからダウンロードできます。

Instant.js公式サイト

「Download」の文字をクリックすると内容が展開表示されます。「Download instant.js 1.3」と書かれた文字をクリックするとダウンロードが行われます。

Download instant.js 1.3をダウロード

ダウンロードされたファイルはZIP形式になっているので解凍します。解凍すると以下のファイル構成になります。

解凍後の状態

ここで必要になるのはinstant.jsのファイルだけです。他のファイルは不要です。

IEとFirefox / Opera / Safariでは表示される効果(見た目)に若干の違いがあります。ここではInstant.jsのバージョン1.3で説明しています。
  • <<
  • <

1/4

インデックス

目次
(1) ゼロからはじめるInstant.js - Webの画像を壁掛け写真風にアレンジ
(2) Instant.jsを使う
(3) オプションを指定して表示する
(4) 画像を傾ける

人気記事

一覧

新着記事

管理職の半数以上が「同年代で活躍している人は3割以下」と回答
[06:30 9/1] シゴト
シュラスコ! サッカー! リオ五輪! ブラジルを丸ごと楽しむフェスタ開催
[06:30 9/1] 趣味
Motorola、「Moto Z Play」発表、Moto Modsに対応する普及帯モデル
[06:02 9/1] スマホとデジタル家電
コロチキのナダル、アメトーーク!で想像を絶する“ひんしゅく”エピソード
[06:00 9/1] エンタメ
秦の始皇帝、裏切り、迫害…過酷な少年時代が今明らかに
[06:00 9/1] エンタメ