rocks !!!
Discover a picture gowing up and down when you scroll.
Damn small and easy program for objects following your vertical scrolling. It is designed to be easily integrated and just working fine.
This program is under GNU General Public License v3. It was developed with jquery 1.3.2 and works from 1.3.2.
Actually the minified program is only 1.4 kB in size (gzipped 715 Bytes)! Last updated on 22th August 2009.
Include the jquery-library and the plugin at the end of the body.
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery-foxiballoon-0.1.min.js"></script>
Inside the body you have your object like a container or a picture.
<div id="balloon">
<img src="images/thumb_image1.jpg" alt="balloon picture" width="72" height="72" />
</div><!-- /#balloon -->
Behind the included scripts you link the main function to your object.
<script type="text/javascript">
$(document).ready(function(){
$('#balloon').foxiballoon();
});
</script>
So when the document is fully loaded then the object will follow your scrolling ...
Another possibility would be ...
$('#sidebar').foxiballoon({maxObject:'#content', align:'center'});
// in the body
<div id="sidebar" style="width:10em;float:left">
text of sidebar
</div><!-- /#sidebar -->
<div id="content" style="width:40em;float:right">
text of content
</div><!-- /#content -->
From the normal position after loading the container "#sidebar" becomes a balloon wich stays inside the centered layout when the window is resized.
| property | default | description |
|---|---|---|
| maxObject | 'body' | It's bottom is the balloon-object sinking limit. You can use an id, a class or a html-object. |
| speed | 'fast' | The speed for animation effects. Values are 'slow', 'normal', 'fast' and milliseconds. |
| align | 'left' | On window resizing the balloon-object corrects ist's horizontal alignment. Allowed is 'left', 'center' and 'right'. |
| distance | 10 | The distance from the top of the window. |
foxiballoon 0.1 full
jquery-foxiballoon-0.1.js, license-gpl-3.0.txt
foxiballoon 0.1 minified
jquery-foxiballoon-0.1.min.js, license-gpl-3.0.txt
package of foxiballoon 0.1 full, minified and this documentation
jquery-foxiballoon-0.1.js, jquery-foxiballoon-0.1.min.js, jquery-1.3.2.min.js, documentation.html, license-gpl-3.0.txt
The latest version of jquery you will get on jquery.com.
Check out my other small and easy programs!
foxibox
Nice image gallery. Very easy to use.
foxislide
Nice image rising effect. Very easy to use.
foxitip
Nice tooltips on links staying inside the window. You can even use different styles on one site. So easy to use.
foxiblob
Lavalamp effect on menus. You can even use different styles on one site. So easy to use.
foxicols
Equal height columns made easy.