jQuery Plugin For Perspective Effect On Mouseover An Object

File Size: 3.9 KB
Views Total: 2196
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Perspective Effect On Mouseover An Object

This is a jQuery plugin used to create an 3D interactive perspective effect on mouseover the object, depending on the mouse pointer's relative position in percentage. Similar to the Apple TV's poster parallax effect.

How to use it:

1. Load jQuery library and the plugin's files in the document.

<script src="http://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="relativeMousePosition.js"></script>
<script src="perspectiveEffectOnMouseOver.js"></script>

2. The plugin relies on jQuery transit.js to provide the perspective effect using CSS3 transforms and perspectives.

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.12/jquery.transit.min.js"></script>

3. Apply the effect to your element.

$(".element").perspectiveEffectOnMouseOver();

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