Tilt.js

A 2 kB, dependency free, micro script that simulates touch feedback on HTML elements.

Give it a try, tap or click the logo.

Setup

You're good to go in two simple steps.

  1. Include the tilt.kickstart.js file by adding the following script tag anywhere on your webpage <script src="tilt.kickstart.js"></script>.
  2. 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

Keypad

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.

Download

Tips

Problems with Jagged Edges on FireFox

On Firefox rotating the tiles can result in jagged edges, to fix this add the following selector to your CSS file. 

.tilt { outline: 1px solid transparent; }

Note that the above selector overrides the default focus outline. Beware of the resulting accessibility issues.

Changing the Shadow Color

You can change the shadow color of a pressed tile by setting a linear gradient on the shadow element Tilt generates. Tilt will adjust the gradient based on the interaction position. The shadow should be set in rgba values.

.my-tilted-element .tilt-shadow-inner {
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.25));
}