Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Image Animation

Posted on 2013-12-02
1
Medium Priority
?
310 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:Nathan Riley
[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 59

Accepted Solution

by:
Julian Hansen earned 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

604 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