Welcome to AjaxDaddy.com
A large collection of nifty web 2.0 demos
Home
Demos
Send me a message
Ajax Books
Next
Prev
Bouncer
Read more and download "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.
Comment on this example
Name
Url
Comment
Captcha