Solved

How to update image to have simple animation?

Posted on 2014-02-20
3
357 Views
Last Modified: 2014-02-24
I have the following image which I want to display as the background to a webpage.  Would like to have a simple animation, a flash of colour traverse the outside circle.  How can I do this?

Logo
I am running on Windows 8 and have no graphics programs at my disposal.
0
Comment
Question by:canuckconsulting
3 Comments
 
LVL 75

Accepted Solution

by:
käµfm³d   👽 earned 250 total points
ID: 39875408
Both GIMP and Paint.NET are free graphics programs. You could use either to create an animated GIF. I believe either would work on Win 8, but I don't have Win 8 yet, so I cannot confirm.

Here are tutorials for either program that describe how to create animated GIFs in each (Paint.NET unfortunately requires an additional plugin):

http://www.gimp.org/tutorials/Simple_Animations/
http://www.ehow.com/how_8449879_make-animated-gifs-paintnet.html (For Step 1 use the link I mentioned above rather than what is in the article)

I cannot remember, but with Paint.NET you might have to change the ".agif" to a ".gif" extension once you are done.
0
 
LVL 55

Assisted Solution

by:Julian Hansen
Julian Hansen earned 250 total points
ID: 39876106
Just for fun - another way to do this not using gifs is to make the image a PNG with the outer circle transparent. Then animate a background behind the circle.
<!doctype html>
<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">

</script>
<style type="text/css">
@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}
@-webkit-keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}
@-ms-keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}
@-moz-keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 0 100%; }
}
#container {
  width: 374px;
  height: 388px;
    background-image: url(images/bgtrans.jpg);
  background-position: 0px -1000px;
  background-repeat: repeat-y;
  
  animation: animatedBackground 10s linear infinite;
  -webkit-animation: animatedBackground 10s linear infinite;
  -moz-animation: animatedBackground 10s linear infinite;
}
</style>
</head>
<body>
  <div id="container">
    <img src="images/bg1.png" />
  </div>
</body>
</html>

Open in new window

Working sample here
bg1.png
bgtrans.jpg
0
 

Author Closing Comment

by:canuckconsulting
ID: 39882629
Thanks guys!
0

Featured Post

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

828 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