Fancy reveal with jQuery and CSS3

Please read the documentation.
For updates please follow our blog, tweets or become a fan. Close

Choose Framework

jQuery UI 1.8.14
jQueryLint (edge)
jQuery Mobile 1.0b2

Library tag attributes (?)

Normalized CSS

Panels

Results

Add Resources

Add

Info

Title

Description Hide or show a form using CSS3 and jQuery. In the real world, you would use Modernizr to prevent this from screwing with crappy browsers.

Body Tag

DTD

Testing Ajax requests

Echo apis are created to simulate Ajax calls: /echo/json/ for JSON, http://jsfiddle.net/echo/jsonp/ for JSONP, /echo/html/ for HTML and /echo/xml/ for XML.

Please read API documentation and follow examples.

Examples

Legal stuff and credits

Created and maintained by Piotr and Oskar.

Hosted by DigitalOcean.

It wouldn't exist without MooTools community.

License

All code belongs to the poster and no license is enforced.

We are not responsible or liable for any loss or damage of any kind during the usage of provided code.

Keyboard shortcuts

HTML

JavaScript

body {background: #333; font-family: Helvetica; padding: 20px;}

.container {position: relative; width: 80%; margin: 20px auto; padding: 0;}

article {position: relative; background: #666; margin: 0; padding: 20px; box-shadow: 0 0 15px #000, 0 1px 1px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,0.3) inset; z-index: 2; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.5);}

form {position: absolute; color: #222; text-shadow: -1px 0 #fff; padding: 20px; background: #ccc; -webkit-transition: all .8s ease-in-out; box-shadow: 0 0 10px #000, 0 1px 0 rgba(255,255,255,.3) inset; width: 100%; -webkit-box-sizing: border-box; width: auto; margin: 0 auto; top: 50px; left: 50px; opacity: 0;}

@-webkit-keyframes show-form {
from {-webkit-transform: translate3d(0,0,0); opacity: 0; z-index: 1;}
50% {-webkit-transform: translate3d(-130%,-130px,0); opacity: 1;}
to {-webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 3;}
}

@-webkit-keyframes hide-form {
from {-webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 3;}
50% {-webkit-transform: translate3d(-130%,-130px,0); opacity: 1;}
80% {-webkit-transform: translate3d(0,0,0); opacity: 1; z-index: 1;}
to {opacity: 0;}
}

.showing {-webkit-animation: show-form 1s 0 1 both;}
.hiding {z-index: 1; -webkit-animation: hide-form 1.3s 0 1 both;}

CSS

Result

Choose Framework

Panels

Add Resources

Info

Testing Ajax requests

Examples

jQuery

Dojo

Mootools

YUI

Processing.js

ExtJS

Legal stuff and credits