JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
#X
</div>
JavaScript
(
function ($)
{
/* Define the container */
var $div = $('div');
/* Define the images */
var $img = $div.find ('img');
/* As you can see there images move in random intervals, defined here */
var intervals = [2000, 2500, 3000, 3500, 4000];
/* Also the animation effects */
var effects = ['easeInOutQuad'];
// If you want more effects, just cut and paste this
//,'swing','easeInQuad','easeOutQuad','easeInOutQuad','easeInCubic','easeOutCubic','easeInOutCubic','easeInQuart','easeOutQuart','easeInOutQuart','easeInQuint','easeOutQuint','easeInOutQuint','easeInSine','easeOutSine','easeInOutSine','easeInExpo','easeOutExpo','easeInOutExpo','easeInCirc','easeOutCirc','easeInOutCirc','easeInElastic','easeOutElastic','easeInOutElastic','easeInBack','easeOutBack','easeInOutBack','easeInBounce','easeOutBounce','easeInOutBounce'];
/*
A function to calculate the position of the elements
This way we can manipulate them all at once
*/
function calibrate (c /* container */, e /* element */)
{
/* images can't go out of the box more than 50% */
return Math.random () * (c - e / 2);
}
/* Animation image, takes the element */
function animate ($this)
{
/* Calculate the new offset */
var offset = {};
offset.top = calibrate ($div.height (), $this.height ());
offset.left = calibrate ($div.width (), $this.width ());
/* Get a random interval */
var interval = intervals[Math.random () * intervals.length | 0];
/* Get a random effect to animate */
var effect = effects[Math.random () * effects.length | 0];
/*
Animate the sucka
The last argument (function) calls this function again, so it keeps on repeating
*/
$this.animate...