pivot.js

A vanilla JavaScript library for creating a AppleTV-esque 3D hover effect using CSS3 transforms.

The effect has been optimised for 60fps in compatible browsers, and compatibility extends to early versions of Chrome, Firefox and Safari with vendor prefixes.

Reliable IE support probably limited to IE11 and above, though IE10 should technically be covered as CSS3 3D transforms first landed in IE10.

Configuration is not necessary beyond the CSS selector(s), but almost every aspect of the effect can be customised from the configuration object.

Live examples

Here are some live examples of how the affected elements work depending on the configuration options passed in:

pivot.init({
selector: "#one"
});

pivot.init({
selector: "#two",
perspective: 500
});

pivot.init({
selector: "#three",
sensitivity: 10
});

pivot.init({
selector: "#four",
invert: true
});

pivot.init({
selector: "#five",
scale: true
});

pivot.init({
selector: "#six",
shadow: true
});

pivot.init({
selector: "#seven",
shine: true
});

pivot.init({
selector: "#eight",
persist: true
});

pivot.init({
  selector: "#ten",
  position:
  {
    method: "absolute",
    zindex: 5
  }
});

pivot.init({
  selector: "#ten",
  transition:
  {
    prop: "transform,
    background-color",
    duration:"0.5s",
    timing:[0.4,1,0.3,1]
  }
});

pivot.init({
selector: "#eleven",
hoverInClass: "hover-in"
});

pivot.init({
selector: "#twelve",
hoverOutClass: "hover-out"
});

pivot.init({
selector: "#thirteen",
hoverClass: "hovering"
});

Touch support automatically activates on supported devices

Download

https://cdn.rawgit.com/wnda/pivot/master/pivot.js

Get Started

    	   <script src="https://cdn.rawgit.com/wnda/pivot/master/pivot.js"></script>
    	   <script>pivot({ selector: ".your-selector", ... });</script>

Info

Github: https://github.com/wnda/pivot/

Author: A. M. Douglas