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

Interactive 3D Parallax Effect With jQuery And CSS3 - face-cursor.js
File Size: 16.5 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

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:

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.