Next Prev

Bouncer

Apply this effect to any element and it'll bounce up and down twice. The second bounce is only 40% of the hieght of the first.

Visit PhpDaddy.com

Play with this script by changing the html bellow. Submit your changes by clicking on this bar. Refresh the page to reset changes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >

<!-- 
/*
*
* Copyright (c) 2006 Millstream Web Software http://www.millstream.com.au
* 
* Permission is hereby granted, free of charge, to any person
* obtaining a copy of this software and associated documentation
* files (the "Software"), to deal in the Software without
* restriction, including without limitation the rights to use, copy,
* modify, merge, publish, distribute, sublicense, and/or sell copies
* of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
* 
* The above copyright notice and this permission notice shall be
* included in all copies or substantial portions of the Software.
* 
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
* MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS
* BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN
* ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
* * 
*/
-->
	<head>
<base href="http://www.ajaxdaddy.com/web20/prototype/bouncer/">
      <style type="text/css">
        body {color: white;background: #52616F;} 
        a {  color: white; }
      </style>
		<title>Bounce Effect</title>
		<link rel="stylesheet" type="text/css" media="all" href="css/bounce.css" />
		<script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
		<script type="text/javascript" src="scriptaculous/src/effects.js"></script>
		<script type="text/javascript" src="javascript/bounce.js"></script>
	</head>
	<body>
		
		<h2>Bounce Effect!</h2>
		<div id="bounce" onclick="boing(this)">Click me!</div>
		<script type="text/javascript">
			function boing(elm) {
				new Effect.Bounce(elm, {height:120});
			}
		</script>
		
		<h2>Bouncer!</h2>
		<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>
    <div style="clear: both;"></div>
    
	</body>
</html>

Play with this script by changing the html above. Submit your changes by clicking on this bar. Refresh the page to reset changes.

Welcome to AjaxDaddy.com

A large collection of nifty web 2.0 demos

Bouncer

Apply this effect to any element and it'll bounce up and down twice. The second bounce is only 40% of the hieght of the first.

Comment on this example