"Freestyle" Animations

Use Glimmer to move items around and be interactive on click, hover, load, ... the sky's really the limit!

Want to use jquery to enhance the experience of your site?
Don’t want to write or cannibalize a bunch of code?
With Glimmer, easily create interactive experiences like rotating photo-galleries/mastheads, drop-down navigation, hover effects, or custom animations like what you see here.

HTML

<div id="plane" style=""></div>
<div id="plane2" style=""></div>
<div id="foliage" style=""></div>
<div id="frog"></div>
<div id="bubble"></div>
<div id="bubble2"></div>
<div id="mixLogo"></div>
<div id="sky" style=""></div>

CSS

#clouds
{
background-image:url('all_clouds.png');
background-repeat:repeat-x;
width:990px;
height:177px;
position:absolute;
}

#plane
{
position:absolute;
background-image:url('plane.png');
background-repeat:no-repeat;
width:176px;
height:115px;
margin-top:120px;
z-index:1;
}

#plane2
{
position:absolute;
background-image:url('littlePlane.png');
background-repeat:no-repeat;
width:606px;
height:39px;
margin-top:120px;
visibility:hidden;
z-index:0;
}

#foliage
{
position:absolute;
margin-top:190px;
background-image:url('foliage.png');
background-repeat:no-repeat;
width:852px;
height:70px;
z-index:3;
}

#bubble
{
background-image:url('howdy.png');
background-repeat:no-repeat;
width:200px;
height:94px;
position:absolute;
margin-top:75px;
margin-left:690px;
visibility:hidden;
z-index:1;
}

#bubble2
{
background-image:url('youOk.png');
background-repeat:no-repeat;
width:200px;
height:94px;
position:absolute;
margin-top:140px;
margin-left:620px;
visibility:hidden;
z-index:1;
}



#frog
{
background-image:url('frog.png');
background-repeat:no-repeat;
width:51px;
height:40px;
float:left;
position:absolute;
margin-left:774px;
margin-top:200px;
z-index:1;
visibility:hidden;
}
#sky
{
position:absolute;
height:260px;
width:990px;
background-image:url('grass_big.png');
background-repeat:no-repeat;
background-position:0;
border:1px solid silver;
z-index:0;
}

#mixLogo
{
background-image:url('images/glimmer_lockup.png');
background-repeat:no-repeat;
width:300px;
float:left;
position:absolute;
margin-top:20px;
margin-left:20px;
padding-top:80px;
visibility:hidden;
z-index:6;

}

#download
{
background-image:url('download_for_free_2.png');
background-repeat:no-repeat;
height:97px;
width:204px;
visibility:hidden;
/*float:left;
position:absolute;
margin-top:94px;
margin-left:30px;*/
}
.container
{
position:relative;
height:260px;
padding:0;
margin:20px 0 0 0;

}

jQuery

jQuery(function($) {
var timer;
function planeFly(event)
{
$("#plane").css("top","0");
$("#plane").css("left","0");
$("#plane").animate({"top":-180,"left":820},5000, "easeInElastic", null);
}

function planedropTimer(event)
{
clearTimeout(timer);
timer = setTimeout(eval("planeDrop"),"5000");
}

function planeDrop(event)
{
$("#plane").animate({"top":0},300, "easeOutBounce", null);
}

function cloudsMove(event)
{
}

function frogIn(event)
{
clearTimeout(timer);
timer = setTimeout(eval("conversation"),"1000");
$("#frog").css("visibility","visible");
$("#frog").animate({"top":5,"left":15},300, "swing", null);
}

function frogInTimer(event)
{
clearTimeout(timer);
timer = setTimeout(eval("frogIn"),"6500");
}

function conversation(event)
{
clearTimeout(timer);
timer = setTimeout(eval("howdyOut"),"2000");
$("#bubble").css("visibility","visible");
}

function howdyOut(event)
{
clearTimeout(timer);
timer = setTimeout(eval("okIn"),"1000");
$("#bubble").css("visibility","hidden");
}

function okIn(event)
{
clearTimeout(timer);
timer = setTimeout(eval("okOut"),"2000");
$("#bubble2").css("visibility","visible");
}

function okOut(event)
{
clearTimeout(timer);
timer = setTimeout(eval("sureIn"),"1000");
$("#bubble2").css("visibility","hidden");
}

function sureIn(event)
{
clearTimeout(timer);
timer = setTimeout(eval("mushroom"),"2000");
$("#bubble").css("background-image","url('sure.png')");
$("#bubble").css("visibility","visible");
}

function mushroom(event)
{
clearTimeout(timer);
timer = setTimeout(eval("logoIn"),"3000");
$("#bubble").css("background-image","url('mushroom.png')");
}

function logoIn(event)
{
clearTimeout(timer);
timer = setTimeout(eval("textIn"),"2000");
$("#mixLogo").css("visibility","visible");
$("#mixLogo").css("left","1400px");
$("#mixLogo").animate({"left":0},1000, "easeOutElastic", null);
}

function littlePlane(event)
{
clearTimeout(timer);
timer = setTimeout(eval("download"),"2000");
$("#plane2").css("left","-200");
$("#plane2").css("visibility","visible");
$("#plane2").animate({"left":1400},12000, "linear", null);
}

function textIn(event)
{
$("#topInfo").css("left","0");
clearTimeout(timer);
timer = setTimeout(eval("download"),"500");
clearTimeout(timer);
timer = setTimeout(eval("littlePlane"),"500");
$("#topInfo").css("visibility","visible");
$("#topInfo").animate({"left":0},1000, "easeOutElastic", null);
$("#bubble").animate({"opacity":0},1000, "linear", null);
$("#bottomInfo").css("visibility","visible");
$("#bubble").animate({"opacity":0},1000, "linear", null);
}

function dayToNight(event)
{
$("#sky").css("color","#ccffff");
$("#sky").animate({"color":"darkblue"},1000, "linear", null);
}

function download(event)
{
$("#download").css("visibility","visible");
}

function planeHover(event)
{
$("#plane").animate({"opacity":0},1000, "linear", null);
}

function howdy2(event)
{
$("#howdy_bottom").css("visibility","visible");
}

function howdy2_out(event)
{
$("#howdy_bottom").css("visibility","collapse");
}

planeFly();

planedropTimer();

planeDrop();

$('#clouds').bind('mouseover', cloudsMove);


frogInTimer();


dayToNight();


$('#plane').bind('mouseover', planeHover);

$('#littleMushroomGuy').bind('mouseover', howdy2);

$('#littleMushroomGuy').bind('mouseout', howdy2_out);