face-cursor.js
A little jQuery plugin to 3D transform elements relative to the cursor position
Demo: matthias-vogt.github.io/face-cursor.js
This is a jQuery
plugin that adds CSS transform: rotate3d()
based on the element's position relative to the mouse.
Usage
face-cursor.js
depends on jQuery, so make sure you have that loaded. You can use it like this:
$(".some, .elements").faceCursor();
$(".some, .elements").faceCursor({ options: "go here" });
Install
<script src="jquery.min.js"></script> <script src="face-cursor.js"></script>
For better loading performance, I'd recommend loading the script as non-critical content (by putting the <script>
and <style>
tags at the end of the body tag). Please also consider concatenating it with your other dependencies.
Install and update easily using npm:
npm install face-cursor --save
Options
{ avertCursor: false, // whether the element should face away from the cursor instead of toward it perspective: "6rem", // CSS perspective for transforms cacheElementData: true // 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) }
Destroying
The plugin's instances can be destroyed on specific elements by doing
$elements.data("plugin_faceCursor").destroy();
…or, to destroy all instances:
$("*").filter(function() { return $(this).data("plugin_faceCursor") !== undefined }).each(function() { $(this).data("plugin_faceCursor").destroy() });
Browser support
This uses CSS3 transitions and window.requestAnimationFrame, so browser support is ie10+.
Contributing
You are very welcome to contribute! Please send pull requests and issues.
Feature requests
Feel free to post issues to ask for features.
TODO
- support CommonJS and AMD
- automatic testing
License
ISC