PIXI

PIXI helps to make your site pixel perfect. PIXI let you overlay design mockup over your site. You can adjust opacity and position of the overlay.

Demo

Demo
Github Page

Install

• include pixi.js & pixi.css in your site.

<link rel="stylesheet" href="http://praveenvijayan.github.com/PIXI/code/pixi.min.css">

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script src="http://praveenvijayan.github.com/PIXI/code/pixi.min.js"></script>

Usage

• Press G to activate the overlay.
• Drag n Drop design mockup/template into the overlay.
• Press shift + click & drag image to adjust.
• Press 0-9 to set opacity.

Shortcuts

• G Toggle overlay.
• Z Bring fornt or sent to back [z-index:0-9999].
• ← Moves overlay image 1px left.
• → Moves overlay image 1px right.
• ↑ Moves overlay image 1px up.
• ↓ Moves overlay image 1px down.
• shift + Drag Moves overlay image.
• 0 - 9 Sets overlay opacity.
• P Disables overlays pointer event. When pointer event is none. You can't drag n drop images. Activate when you want to inspect underlaing elements.

Browser support

PIXI uses HTML DnD, File API & Local storage to do things. It won't work in IE. Tested in chrome & Firefox.

Resource

Decodize.com