Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

How to update image to have simple animation?

Posted on 2014-02-20
3
Medium Priority
?
362 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 1000 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 60

Assisted Solution

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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

916 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