Flying Elements

by Marius Jopen

HTML

<div id="container">

    <div id="blue">
      blue
      <img class="gradient" src="https://s-media-cache-ak0.pinimg.com/736x/3f/ab/58/3fab58e1de13f62b9c2a402caa623d48.jpg">
    </div>
    
    <div id="brown">
      brown
      <img class="gradient" src="https://s-media-cache-ak0.pinimg.com/736x/3f/ab/58/3fab58e1de13f62b9c2a402caa623d48.jpg">
    </div>
     
    <div id="green">
      green
      <img class="gradient" src="https://s-media-cache-ak0.pinimg.com/736x/3f/ab/58/3fab58e1de13f62b9c2a402caa623d48.jpg">
    </div>
    
</div>


scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>
scroll <br/>

CSS

#container {
    width: 100%;
    height: 300px;
    position: relative;
    overflow: hidden;
}

.gradient img {
  width: 400px;
  height: 400px;
}

.gradient {
  margin-top: -200px;
  margin-left: -200px;
  
}

#blue {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 20%;
    left: 20%;
}


#brown {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 80%;
    left: 70%;
}

#green {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 60%;
    left: 40%;
}

JavaScript

function AnimateBlue() {
    var theDiv = $("#blue"),
        theContainer = $("#container"),
        maxLeft = theContainer.width() - theDiv.width(),
        maxTop = theContainer.height() - theDiv.height(),
        leftPos = Math.floor(Math.random() * maxLeft),
        topPos = Math.floor(Math.random() * maxTop);
        
    theDiv.animate({
        "left": leftPos,
        "top": topPos
    }, 3000, AnimateBlue);
}

function AnimateBrown() {
    var theDiv = $("#brown"),
        theContainer = $("#container"),
        maxLeft = theContainer.width() - theDiv.width(),
        maxTop = theContainer.height() - theDiv.height(),
        leftPos = Math.floor(Math.random() * maxLeft),
        topPos = Math.floor(Math.random() * maxTop);
        
    theDiv.animate({
        "left": leftPos,
        "top": topPos
    }, 3000, AnimateBrown);
}

function AnimateGreen() {
    var theDiv = $("#green"),
        theContainer = $("#container"),
        maxLeft = theContainer.width() - theDiv.width(),
        maxTop = theContainer.height() - theDiv.height(),
        leftPos = Math.floor(Math.random() * maxLeft),
        topPos = Math.floor(Math.random() * maxTop);
        
    theDiv.animate({
        "left": leftPos,
        "top": topPos
    }, 3000, AnimateGreen);
}

AnimateBlue();
AnimateBrown();
AnimateGreen();