Solved

Image Animation

Posted on 2013-12-02
1
305 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 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39691792
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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

785 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