Advanced 3d Perspective Distortion

Enhanced by BrowserStack

Create a unique parallax environment to show off your work.

Inspired by http://hellomonday.com/

I've always been a big fan of using subtitle 3d effects to give depth to UI and images. Ever since laying my eyes on the [26000 Vodka] (http://26000.resn.co.nz/flash.html) website many years ago, I've wanted to create something that can emulate that same kind of depth, without using cumbersome flash to do it. (Also, I didn't know flash, so there's that)

This plugin allows you to (currently) do full-page 3d perspective transforms base on mouse position. There are a lot of options you can tweak to your liking, and I'm looking to develop the application of this effect further.

Check out the demo's to see whats possible

New In v0.3

1. JQuery no longer a requirement.
2. Multiple element on screen now supported. see demo5.html
3. Added new mouse movement listeners. see demo5.html
4. New Option: perspectiveMulti
5. New Option: depthOverride
6. Fixed a few bugs, performance should be more consistent now.

Note: When 1.0 hits, the file name will drop the jQuery prefix

Usage

There are two ways of using LogosDistort. By Using bower:

bower install logos-distort

Or by downloading the repo and using the files there

1. Include jQuery (optional):

   <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
   

2. Include plugin's code: (javascript and stylesheets)

   <link href="dist/css/perspectiveRules.css" rel="stylesheet" />
   <script src="dist/jquery.logosDistort.min.js"></script>
   

3. Add the HTML Structure:

   <div id="demo1">
     <img alt="background" src="assets/images/background.png" />
     <div id="particle-target" ></div>
     <img alt="logo" src="assets/images/logo.png" />