HTML and CSS Reference
In-Depth Information
If the Modernizr test returns false , the animation won't work; instead you
set the left property of the form to 0rem to make the form appear on the screen
in one go, and set the form class to form-fallback so that the second part of the
function will run when the user tries to hide the form again (if you don't do this,
the second part of the function will never run because the form class will always
be blank). It's not as nice-looking, but at least it works.
The last part of this section of the code (the h1.innerHTML part) changes the
text inside the <h1> element to a message telling users they can hide it again if
they want to.
If the outer if test returns false, then the form must be onscreen, and the code
inside the else block is executed, which runs another modernizr.cssanimations
test. If this returns true , the code changes the class value to form-in to animate
it offscreen again. If it returns false , the left property is returned to its original
value—to move it offscreen again in a less glamorous manner—and the form class
is set to blank again to return it to its original state.
The last part of the else block changes the <h1> text back to what it was
Now on to the second function, rotateForm() :
function rotateForm() {
if(Modernizr.cssanimations && Modernizr.csstransforms3d) {
t = ;
} else {
x = ;
Here, if Modernizr.cssanimations AND Modernizr.csstransforms3d are true,
I've used setAttribute to set the <form> 's class attribute to form-rotate . This
applies the rotate animation to the form, making it rotate to reveal the “Thank
Yo u ” m e s s a g e . B u t s e t t i n g t h e <form> 's class to form-rotate will override the class
of form-out set earlier, which would cause the form to move offscreen again;
Search WWH ::

Custom Search