Solved

Image Animation

Posted on 2013-12-02
1
308 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
1 Comment
 
LVL 57

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

Raise the IQ of Your IT Alerts

From IT major incidents to manufacturing line slowdowns, every business process generates insights that need to reach the people required to take action. You need a platform that integrates with your business tools to create fully enabled DevOps toolchains.

You need xMatters.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
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).

690 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