I'm currently using this jqFloat.js that makes elements float in space around the page.
Unfortunately, they float in relation to the size of the screen, and not of their parent container, which is what I wish to achieve.

Here's the HTML of my structure

2. <div class="wrapper">
3. <div id="projects">
4.   <div>
5.   <a href="projects/first/index.html" class="project-item">
6.     <img src="images/body/brain.png" id="image" class="brain" />
7.         <span class="title">Sintesi addittiva</span>
8.   </a>
9.   </div>
10.   <div>
11.   <a href="projects/first/index.html" class="project-item">
12.     <img src="images/body/eyes.png" id="image" class="eyes" />
13.         <span class="title">Menschen Messe</span>
14.   </a>
15.   </div>
16. </div>

The class .wrapper is set at height: 100%; width: 85%; via CSS, and .project-item is the class of my floating items. 

This is the source of jqFloat.js https://github.com/kennyooi/jqfloat/blob/master/jqfloat.js

At the moment my items are floating correctly, and at random position every time the page loads, but sometimes they get out from the wrapper (and the screen too).

I've tried to assign the .projects-item (which is the class that triggers the floating effect) to the parent div, but then the items disappear.

What I basically have to achieve, I think, is to define a space within which the code of the jqFloat should run, and if one of the items touches one of the edges of the wrapper the item would have to "bounce".

Maybe I might have to set a rule on the script I'm using to randomly position the items instead of the jqFloat? This is not to exclude, but I'm also not very sure about.

This is the website at the moment, in its very rough design. The items (the body parts) have to stay within the green lines, which is the .wrapper.

Website

Any help is very very appreciated