floatingBackgroundObjects.js is script allowing you to simply add one or more images floating from left to right or right to left in the background of any div, section, etc. from your page.
You can use it on any HTML element you want by either referring to its ID, its class or simply by its tag. You can also use it with any image you want. Images with transparent background are, however, recommended for a smoother result.
This is a remastered version of my very first shared JS script so I hope it'll be helpful and/or amusing to use. ^^ I'd be really grateful if you could tell me what you think can be improved/optimized. :)
You can check out an example of use here.
After downloading the script, put it in your project's directory and import it in you html page.
<body>
<section id="s1">
<h1>Hello!</h1>
</section>
</body>
<script src="/js/floatingBackgroundObjects.js">Simply type addFloatingBackgroundObjects(<your_html_tag>, <your_image_path>) and poof! Animated background!
<body>
<section id="s1">
<h1>Hello!</h1>
</section>
</body>
<script src="/js/floatingBackgroundObjects.js">
<script>
floatingBackgroundObjects("#s1", 'path/to/image.png');
</script>A third argument, an object, allows you to customize your floating items' behavior. I recommend downloading the demo version below to get hints about it.
The script comes with some JSDoc in order to complete its accessibility.
You can download the script by clicking here. Or download the demo project.