Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How to update image to have simple animation?

Posted on 2014-02-20
3
Medium Priority
?
360 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 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 58

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

Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

Question has a verified solution.

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

Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
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 learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

719 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