CSS Codes
CSS Layouts
IE11+ FF Chrome

JavaScript Tilt Boxes

Author: Dynamic Drive

Description: This script uses CSS3 3d transform to create captivating content boxes that tilt based on the position of the mouse within it. It's an awesome effect to apply to landing pages, opt in forms, or any content that you want to instantly direct the user's attention towards. I was inspired by this site, which uses a similar effect to turn an otherwise ordinary image and text into an extremely enthralling centerpiece.

JavaScript Tilt Boxes relies on the excellent vanilla tilt library to create the tilt effect. It has no other dependencies (such as jQuery).

Demos: Move your mouse over the below content boxes:

Dynamic Drive Newsletter
Free JavaScript
Tips and Tricks
Unsubscribe Anytime

Dynamic Drive Presents
Web Design
Crash Course Webinar
Free to Join
Enter now, limited seating available! Only first 500 people will be admited.

Comfy Styles
Summer and Fall Fashion
Now on Sale!
Up to 50% off!
For a Very Limited Time Only

Directions: Developer's View

Simply copy the below sample tilt box code to your page:

Select All

Observe where the various portions should go- the CSS references should be added to the HEAD section, the markup for the content boxes in the BODY, and finally, the reference to the .js file at the very end of your page.

The above code references the following two external files, which you should upload to your site as well:

You're done!

Editing the Tilt Box

The full markup for each tilt box looks something like the following:

<div class="tiltwrapper">
<div class="tiltit" data-tilt data-tilt-max="25" data-tilt-speed="1000" data-tilt-perspective="800">
	<div class="leftcol">
		<img src="https://i.imgur.com/gmotSds.jpg">
	</div>
	<div class="rightcol riseup">
		<div class="mediumheader">Dynamic Drive Newsletter</div>
		<div class="largeheader">Free JavaScript<br />Tips and Tricks</div>
		<div class="smallheader">Unsubscribe Anytime</div>
		<form>
		<input type="text" name="email" id="email" />
		<button type="submit" class="drapeeffect">Sign Up Free</button>
		</form>
	</div>
</div>
</div>

To customize the contents, simply edit the markup inside the "leftcol" and "rightcol" DIVs, which correspond to the content shown on the left and right column columns of the box, respectively. The CSS class "riseup" when added to a column causes the contents to "rise up" when the user mouses over the box.

Inside tiltbox.css, you may want to edit the following line in red:

.tiltwrapper{
	overflow: hidden; /* try setting to visible */
	padding: 0;
}

When the content box is tilted, depending on whether the box spans the entire width of the browser window, may cause browser scrollbars to temporarily appear. The overflow property forces any over spilling content to be clipped, so the scrollbars are suppressed. If your content isn't flush against the browser edges however (hence no chances of scrollbars appearing), it's better to set overflow: visible instead for a more dramatic effect.

Customizing the Tilt Effect

You can customize various aspects of the tilt effect, such as the tilt amount, animation duration, whether to scale up the content when tilted, and more.

The 3 most common settings are already defined inside the .tiltit div as data-tilt attributes:

<div class="tiltit" data-tilt data-tilt-max="25" data-tilt-speed="1000" data-tilt-perspective="800">

Notice the first data-tilt attribute with no value defined- this is necessary in order to designate this DIV as a tilting DIV. Alternatively you can initialize a tilt on any DIV dynamically, using JavaScript.

The following are all the possible settings for the tilt effect and their default values, taken from the Vanilla Tilt Page:

{
	reverse:            false,  // reverse the tilt direction
	max:                35,     // max tilt rotation (degrees)
	perspective:        1000,   // Transform perspective, the lower the more extreme the tilt gets.
	scale:              1,      // 2 = 200%, 1.5 = 150%, etc..
	speed:              300,    // Speed of the enter/exit transition
	transition:         true,   // Set a transition on enter/exit.
	axis:               null,   // What axis should be disabled. Can be X or Y.
	reset:              true    // If the tilt effect has to be reset on exit.
	easing:             "cubic-bezier(.03,.98,.52,.99)",    // Easing on enter/exit.
	glare:              false   // if it should have a "glare" effect
	"max-glare":        1,      // the maximum "glare" opacity (1 = 100%, 0.5 = 50%)
	"glare-prerender":  false   // false = VanillaTilt creates the glare elements for you, otherwise
                             // you need to add .js-tilt-glare>.js-tilt-glare-inner by yourself
}

To define one of these properties using the default HTML attribute route, just prefix the option with data-tilt inside the tilt DIV. The below scales (enlarges) the DIV by 20% and limits the tilting to just the x axis when the user interacts with it:

<div class="tiltit" data-tilt data-tilt-scale="1.2" data-tilt-axis="y">

All of these settings can also be defined via JavaScript, at the time of initiating a tilting DIV. See the Vanilla Tilt Homepage for more info.

And that's a wrap! Now go enhance your opt in forms, landing pages, or even comparison tables with this awesome effect!

.

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post