Solved

Image Animation

Posted on 2013-12-02
1
297 Views
Last Modified: 2013-12-03
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?
bg-header.jpg
bg-header-expand.png
0
Comment
Question by:N R
1 Comment
 
LVL 51

Accepted Solution

by:
Julian Hansen earned 500 total points
Comment Utility
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>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></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);
}
</script>
<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;
}
</style>
</head>
<body>
  <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>
  </div>
</body>
</html>

Open in new window

Working sample here
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now