Image Animation

I'm trying to figure out a way to animate the attached images.  

The first image is a bunch of presents that the user will see when they come to the site.  After 5 seconds I want the packages to slide outward leaving whitespace in the middle where I can add text.  

So I have 2 images, the first is when the load the page, the second is after the animation is complete.  How would I go about doing this?
LVL 12
Nathan RileyFounderAsked:
Who is Participating?
Julian HansenConnect With a Mentor Commented:
I would suggest using JQuery for this.

You would need to add each of the presents as a separate image.

Set a timer for 5 seconds

When the timer expires run an animate that moves the present to its final location.

Here is some code that demonstrates the concept
<!doctype html>
<script src=""></script>
<script type="text/javascript">
$(function() {
  setTimeout("animate()", 5000);
function animate()
  // you can experiment with the times
  // by varying them you can change the overall effect
  $('#p1').animate({top: 0, left: "250px"}, 2000);
  $('#p2').animate({top: "100px", left: "950px"}, 2400);
  $('#p3').animate({top: 0, left: "650px"}, 1000);
  $('#p4').animate({top: 0, left: "450px"}, 2900);
  $('#p5').animate({top: "200px", left: 0}, 1800);
  $('#p6').animate({top: "315", left: "950px"}, 2100);
<style type="text/css">
#xarea {
  position: relative;
  height: 300px;
  width: 900px;
.box {
  position: absolute;
#p1 {
  left: 450px;
  top: 150px;
  width: 50px;
  height: 50px;
  background: blue;
#p2 {
  left: 600px;
  top: 250px;
  width: 150px;
  height: 50px;
  background: red;
#p3 {
  left: 500px;
  top: 225px;
  width: 60px;
  height: 60px;
  background: yellow;
  border-radius: 100px;
  border: 1px solid yellow;
#p4 {
  left: 510px;
  top: 125px;
  width: 60px;
  height: 60px;
  background: black;
#p5 {
  left: 390px;
  top: 225px;
  width: 60px;
  height: 160px;
  background: green;
#p6 {
  left: 560px;
  top: 315px;
  width: 90px;
  height: 100px;
  background: pink;
  <div class="area">
    <div id="p1" class="box"></div>
    <div id="p2" class="box"></div>
    <div id="p3" class="box"></div>
    <div id="p4" class="box"></div>
    <div id="p5" class="box"></div>
    <div id="p6" class="box"></div>

Open in new window

Working sample here
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.