Solved

How to update image to have simple animation?

Posted on 2014-02-20
3
359 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
[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
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 58

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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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 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)

624 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