Retro_1477,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css"> .field{
height: 300px;
position: relative;
overflow: hidden;
}
.bg-icon{
position: absolute;
transition-timing-function: cubic-bezier(0.445, 0.05, 0.55, 0.95);
height: 50px;
width: 50px;
background-color: #228B22;
color: #FFFFFF;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function($) {
var $BodyWidth, BodyHeight, instagram_count = 30;
BodyHeight = $(".field").height();
BodyWidth = $(".field").width();
for (var i = 0; i < instagram_count; i++) {
$("<i class='bg-icon'>Inst</i>")
.appendTo(".container-fluid")
.on("transitionend", move)
.trigger("transitionend")
}
function move() {
var h = getRandom(BodyHeight - 70);
this.style.transition = "none";
this.style.transform = "translate( -70px, " + h + "px)";
var that = this;
window.setTimeout(function() {
that.style.transition = getRandom(5000) + 3000 + "ms";
that.style.transform = "translate( " + (BodyWidth + 70) + "px, " + h + "px)"
}, getRandom(3000))
}
function getRandom(upper) {
return Math.random() * upper | 0
}
});
</script>
</head>
<body>
<div class="field container-fluid"></div>
</body>
</html>