< Return to article

Bounce!

Bounce Effect!

Click me!


<div id="bounce" onclick="boing(this)">Click me!</div>

<script type="text/javascript">
	function boing(elm) {
		new Effect.Bounce(elm, {height:120});
	}
</script>

#bounce {
	padding: 5px;
	border: 1px solid black;
	width: 50px;
	height: 50px;
	text-align: center;
	background-color: #7FFF00;
}
		

Bouncer!



<ul id="ex">
	<li id="a">1</li>
	<li id="b">2</li>
	<li id="c">3</li>
	<li id="d">4</li>
	<li id="e">5</li>
	<li id="f">6</li>
</ul>

<script type="text/javascript">
	new Bouncer('ex');
</script>

ul {
	list-style: none;
}
li {
	float: left;
	padding: 5px;
	border: 1px solid black;
	width: 50px;
	height: 50px;
	text-align: center;
}
#a {
	background-color: #7FFF00;
}
#b {
	background-color: Yellow;
}
#c {
	background-color: Orange;
}
#d {
	background-color: Red;
}
#e {
	background-color: #8A2BE2;
}
#f {
	background-color: Blue;
}