This time I will share jQuery Plugin and tutorial about jQuery Plugin For 3D Perspective Transforms On Mousemove – LogosDistort, hope it will help you in programming stack.
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:
Basic usage:
1. Load the jQuery LogosDistort’s stylesheet for perspective rules.
1 |
<link href="css/perspectiveRules.css" rel="stylesheet"> |
2. Add the parallax elements into a container.
3. Call the plugin on the container.
1 |
$("#demo").logosDistort( |
4. Full plugin options.
03 |
enableSmoothing: true, |
04 |
smoothingMultiplier: 1, |
05 |
activeOnlyInside: false, |
09 |
directions: [1, 1, 1, 1, -1, -1, 1, 1], |
10 |
weights: [0.0000310, 0.0001800, 0.0000164, 0.0000019, 0.0001200], |
13 |
mouseMode: 'container', |
15 |
smartContainer: 'ld-smart-container', |
16 |
overlapContainer: 'ld-overlap-container', |
17 |
parent3d: 'ld-3d-parent', |
18 |
transformTarget: 'ld-transform-target', |
19 |
active: 'ld-transform-active', |
20 |
object3d: 'ld-3d-object' |
22 |
beforeInit: function() {}, |
23 |
onInit: function() {}, |
24 |
onDestroy: function() {} |
Change log:
v0.3.3 (2015-10-07)
- Many bug improvements and fixes
- fixed top calculations
v0.3.1 (2015-10-03)
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.
