This is all a matter of personal taste; there used to be a <blink> tag in HTML, the majority of browsers no longer support it. It seems that one of the reasons it was dropped was because of overuse and too many flashing things on a site becomes a distraction. Personally I do not like any sites with more than one moving image on them. It becomes distracting and irritating have lots of things all demanding your attention.
I have had a request for a flashing News Flash message, something to make it stand out a little more. Particularly when the News Flash entry on say a home page is always there. Regular viewers may no longer notice it, it becomes part of the wallpaper. So how can you make sure that people notice something new, or that you wish to draw their attention to it?
Well, that was how I found out about the <blink> tag and it’s understandable demise. The other popular way of creating sophisticated animation is through Adobe Flash, however Apple iOS devices (iPads, iPods, iPhones etc) do not support it. I think this was a policy decision on behalf of Apple because Apple had their own method of creating animations using QuickTime. With the rise in mobile internet connected devices now outstripping fixed desktops and laptops, Adobe Flash use is declining.
Another method is using CSS3, with animation now appearing in style sheets, but needless to say, it is complex, new and probably beyond the scope of most of my client base. There are other methods too that use Javascript, again relatively complicated. Plus some of the older browsers will not support the latest in CSS3 technology.
Keep it simple!
There is an old method called an animated GIF. There are two examples below. The way these are created are based on a stack of images that are placed sequentially on a time line. One of these is made up of around 6 images, the other is made up of over 20. They look like text, however they are both image files.
Now these are both impractical to use on your website, because they are too large. I have made smaller versions below. I have created several versions that are 36px, 30px, 25px and 20px high. Click on the flashing animation and it will open up in a new browser window. Just save the file locally to your computer,(right click the mouse on the image and a menu will pop up). Then you can upload it to your site.
There are a total of 12 files below. In the first table they are animated in an infinite loop. Below that is another table where they animate just once when the page is created. This may be a more elegant solution than having something constantly changing on your site. Do however place it at the TOP of your site if you wish to use the single animation version.
While I am happy to look at special requests, do bear in mind that none of these were quick to create. They all take time. Please contact me if you have any special requests.
Looking below here will give you a headache!
| News Flash with dots (36px) |  |
| News Flash with dots (30px) |  |
| News Flash with dots (25px) |  |
| News Flash with dots (20px) |  |
| Growing News Flash (36px) |  |
| Growing News Flash (30px) |  |
| Growing News Flash (25px) |  |
| Growing News Flash (20px) |  |
A more elegant approach
There is also a way of controlling the animation so that it only shows once and then becomes inanimate. In the examples below, these go through a 5 second sequence when the page first appears and then they are static. This should attract the readers attention as it is at the top of the page without being a constant annoying distraction. (Note placing a news flash animated message half way down a page may cause it to be animated off of the screen, in which case their is not much point in animating it!). Again four versions are provided. By the time you read this, the animation has probably finished, so they look static. Note the next paragraph on behaviour.
A note on behaviour
The behaviour of this version is that it will only go through the sequence once. If you refresh the screen/ page it will not re-animate. I think that is because it is already in your browser locally. However if you place this at the top of your home page, every time someone lands on your home page or goes back to the home page, it will start the sequence again.
This would be my preferred solution. It attracts attention for a moment, then it is static.
| News flash scrolling once (36px) |  |
| News flash scrolling once (30px) |  |
| News flash scrolling once (25px) |  |
| News flash scrolling once (20px) |  |
Refinements
If you need one of these, you can do many things with it, but these are probably the highlights:
- Coloured or transparent background. (these all have a white background).
- Changing colours between frames
- Changing font sizes
- Shifting text
- Remember these are made from multiple images, so anything you can do at the image level can be animated
- Speed of animation
- Continuous loop
- Single animation and then static
- Once a master file is created, any (smaller) size can be derived from it
These were all created in PhotoShop Extended CS6. I am not sure whether animation is possible in the entry level PhotoShop package.