jQuery Plugin For 3D Perspective Transforms On Mousemove - LogosDistort
File Size: | 14.1 MB |
---|---|
Views Total: | 32138 |
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:
- 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.