JSFiddle - React, Tailwind, and code Playground
HTML
<div id="theHolder">
<div class="theValue">
LEADERSHIP
</div>
<div class="theValue">
TRUST
</div>
<div class="theValue">
LEARN FAST
</div>
<div class="theValue">
COLABORATION
</div>
<div class="theValue">
AUTONOMY
</div>
<div class="theValue">
CRAFTMANSHIP
</div>
</div>
CSS
#theHolder {
position: relative;
width: 400px;
height: 400px;
border: 1px solid blue;
}
#theHolder * {
position: absolute;
font-weight: bold;
}
JavaScript
(function ($) {
$.fn.randomMove = function (options) {
var defaults = {
containerSelector: "body"
};
var settings = $.extend({}, defaults, options);
return this.each(function handleCurrentElement() {
var currentElement = $(this);
var index = currentElement.data("indexIteration");
if(typeof index === 'undefined' && typeof $.fn.randomMove.iterarionNumber === 'undefined') {
$.fn.randomMove.iterarionNumber = 0;
index = 0;
currentElement.data("indexIteration",0);
} else if(typeof index === 'undefined') {
index = ++$.fn.randomMove.iterarionNumber;
currentElement.data("indexIteration",index);
}
var classSelector = "prclickImage" + index.toString();
var cssIdSelector = "iposition" + index.toString();
var position = currentElement.position(); // position = { left:; number, top: number }
var oxPosition = position.left;
var oyPosition = position.top;
var randomIntFromInterval = function (min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
var container = $(settings.containerSelector);
var yPosition = randomIntFromInterval(0, (container.height() - currentElement.height()));
var xPosition = randomIntFromInterval(0, (container.width() - currentElement.width()));
var positionAndClassContent = [
"@keyframes " + classSelector + " {",
"from {",
"top:" + oyPosition + "px;",
"left:" + oxPosition + "px;",
"}",
"to {",
"top:" + yPosition + "px;",
"left:" + xPosition + "px;",
"}",
"}",
"@-webkit-keyframes " + classSelector + " {",
"from {",
"top:" + oyPosition + "px;",
...