Solved

How to update image to have simple animation?

Posted on 2014-02-20
3
353 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 52

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article discusses how to create an extensible mechanism for linked drop downs.
Find out what you should include to make the best professional email signature for your organization.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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)

910 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now