【ハウツー】

ゼロからはじめる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) 画像を傾ける

人気記事

一覧

新着記事

Apple Watch Series 2のスイミングワークアウトを試す - 松村太郎のApple深読み・先読み
[22:32 9/29] スマホとデジタル家電
アミュレット、USB 3.1 Gen2対応でRIAD機能搭載のストレージケース
[22:19 9/29] パソコン
柳葉敏郎、さんまへの土下座の真相告白「タクシーの前で…」
[22:15 9/29] エンタメ
[ベッキー]上半身ヌードでセクシーに“美背中”披露 髪もばっさりショートに
[22:12 9/29] エンタメ
長谷川豊、ブログ発言での報道番組降板「夢にも思っていませんでした」
[21:52 9/29] エンタメ