jQuery Plugin For 3D Perspective Transforms On Mousemove - LogosDistort

LogosDistort is a fancy jQuery plugin that helps you create unique 3D perspective distortions with mouse interaction using CSS matrix3d transforms. A little similar to the parallax effect that reacts to viewer's cursor.

More examples:

• Example 2
• Example 3

See also:

• jQuery Plugin To Add Interative Parallax Effects To Objects - Piao
• jQuery Plugin To Create Interactive Parallax Effects - Real Parallax
• Minimalist 3D Parallax Effect with jQuery and CSS3
• Smooth Parallax Effects with jQuery and CSS3 - woolParalax
• Interactive Mouse Hover Parallax Effect with jQuery - Mouse Parallax
• Simple and Lightweight jQuery Parallax Engine - Parallax.js
• Creating 3D Interative Parallax Background Effects with jQuery - Simples 3D
• Interactive Parallax Effect with jQuery - jparallax

Basic usage:

1. Load the jQuery LogosDistort's stylesheet for perspective rules.

<link href="css/perspectiveRules.css" rel="stylesheet">

2. Add the parallax elements into a container.

<div id="demo">
  <img src="1.png">
  <img src="2.png">
  ...
</div>

3. Call the plugin on the container.

$("#demo").logosDistort(//OPTIONS);

4. Full plugin options.

enable: true,
effectWeight: 1,
enableSmoothing: true,
smoothingMultiplier: 1,
activeOnlyInside: false,
outerBuffer: 1.10,
elementDepth: 140,
perspectiveMulti: 1,
directions: [1, 1, 1, 1, -1, -1, 1, 1],
weights: [0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200],
container: win,
depthOverride: false,
mouseMode: 'container',
cssClasses: {
  smartContainer: 'ld-smart-container',
  overlapContainer: 'ld-overlap-container',
  parent3d: 'ld-3d-parent',
  transformTarget: 'ld-transform-target',
  active: 'ld-transform-active',
  object3d: 'ld-3d-object'
},
beforeInit: function() {},
onInit: function() {},
onDestroy: function() {}

Change log:

v0.3.3 (2015-10-07)

• Many bug improvements and fixes
• fixed top calculations

v0.3.1 (2015-10-03)

• adds viewport check

v0.3.0 (2015-09-28)

• JQuery no longer a requirement.
• Multiple element on screen now supported. 
• Added new mouse movement listeners. 
• New Option: perspectiveMulti
• New Option: depthOverride
• Fixed a few bugs, performance should be more consistant now.

2015-03-11

• Fixed issue related to image loading

 

---

This awesome jQuery plugin is developed by hellsan631. For more Advanced Usages, please check the demo page or visit the official website.