A 2 kB, dependency free, micro script that simulates touch feedback on HTML elements. Give it a try, tap or click the logo.

Navigation Setup

Demo

Options

API

Download

Tips

Setup You're good to go in two simple steps. Include the tilt.kickstart.js file by adding the following script tag anywhere on your webpage <script src="tilt.kickstart.js"></script> . Add the .tilt class to the element you want to tilt. Done! Okay, there's one little gotcha, your element needs to be a non inline element for this to work. Basically anything but display: inline will work.

Demo Swinging Tabs Woo!

Whee!

Me too!

Yay! Keypad 1 2 abc 3 def 4 ghi 5 jkl 6 mno 7 pqrs 8 tuv 9 wxyz 0 Metro Tiles Home Contact About

Options Using the kickstarter script you can pass options to tilted HTML elements as shown below: < div data-tilt-shadow = "false" class = "tilt" > Go Tilt! </ div > The following options are available. Option Description Type Default pivot String "center" Controls around what point the tile tilts. Possible values are: "center"

"top"

"right"

"bottom"

"left"

"none" shadow Boolean true Control whether the shadow inside the tile should be rendered or not. depth Number 15 The maximum depth the tile can be pressed. perspective String "500px" The perspective to render the 3d effects in. Elements that are being tilted are called tiles. If you want to manually create tiles instead of using the kickstart functionality embed the tilt.js script and use the Tile class as shown below. var myTile = new Tile(element, { pivot: "none" , shadow: false , depth: 30 , perspective: "400px" });

API There are two API's. One for Tile instances and the other is for the kickstarter logic called InstaTilt. InstaTilt The InstaTilt API allows you to access tiles once they've automatically been created. You can then manipulate them with the Tile API or unload them. Method Description parse(context) Parses a given context for .tilt classes and turns the elements into Tiles. getTileByElement(element) Returns the Tile instance for the supplied element, the element can either be a query selector or a DOM node reference. You can use the Tile API on the returned value. unload(element) Removes the Tile instance from the supplied element. Cleans up event listeners and frees memory. Get a tile instance by passing an element reference or a query selector string. var myTile = InstaTilt.getTileByElement( '.my-tile' ); Tile The Tile API is used for manipulating individual tiles. Method Description tilt([x[, y]]) Tilts the tile as if pressed at the given "x", "y" position. The position will be limited to the size of the tile. If no values are supplied the middle of the tile is used. untilt() Restores the tile in its original position. unload() Removes tilt from the element.