This time I will share jQuery Plugin and tutorial about Interactive 3D Parallax Effect With jQuery And CSS3 – face-cursor.js, hope it will help you in programming stack.
face-cursor.js is a jQuery plugin which helps apply a 3D interactive parallax effect to your block element using CSS3 3D transforms. When you mouse hover the element, you will see a subtle 3D visual effect with a sense of realism and vitality that reacts to your cursor. Inspired by Apple tvOS’s Focus and Parallax design principles.
How to use it:
1. Load the latest version of jQuery library and jQuery face-cursor.js script at the end of the html document.
1 |
<script src="//code.jquery.com/jquery-2.2.3.min.js"></script> |
2 |
<script src="dist/prod/js/jQuery-face-cursor.js"></script> |
2. Add your content into a card element.
2 |
Parallax content go here |
3. Apply a basic 3D parallax effect to the card element.
1 |
$(".card").faceCursor(); |
4. Config the parallax effect with the following options:
01 |
$(".card").faceCursor({ |
10 |
cacheElementData: true |
This awesome jQuery plugin is developed by matthias-vogt. For more Advanced Usages, please check the demo page or visit the official website.
