jQuery Plugin For 3D Perspective Transforms On Mousemove - LogosDistort

jQuery Plugin For 3D Perspective Transforms On Mousemove - LogosDistort
File Size: 14.1 MB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

See also:

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.