Interactive 3D Parallax Effect With jQuery And CSS3 - face-cursor.js

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.

See also:

• Apple TV Poster Parallax Effect with jQuery and CSS3 - maximusParallaximus
• tvOS Inspired Interactive Parallax Effect with jQuery and CSS3 - Media Poster
• tvOS Hover Parallax Effect With jQuery and CSS3 - TVParallax

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.

<script src="//code.jquery.com/jquery-2.2.3.min.js"></script>
<script src="dist/prod/js/jQuery-face-cursor.js"></script>

2. Add your content into a card element.

<div class="card">
  Parallax content go here
</div>

3. Apply a basic 3D parallax effect to the card element.

$(".card").faceCursor();

4. Config the parallax effect with the following options:

$(".card").faceCursor({

  // whether the element should face away from the cursor instead of toward it
  avertCursor: false,

  // CSS perspective for transforms
  perspective: "6rem",

  // whether height, width and offset of the elements should be cached instead of recalculated each frame (if the elements move around or you want the effect to be consistent during browser resizing, disable)
  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.