Creating Scrolling Banner using Gimp

This is my second Gimp script. (The first is 'Gimp Polaroid Filter' published in Dec 2009

Why I write this second script is triggered by my another very recent blog 'Scrolling Banner using CSS', in which I mentioned I have previously used animated GIF to give scrolling banner effect.

Yes, creating animated GIF is very tedious previously. But I can write Gimp Script-fu. Why not automate the process? So, I write my second Gimp script using the Scheme language.

Script filename: scroller.scm (the zipped form can be downloaded from here

Installation Steps: In my Windows environment, you can simply unzip the file and move it to 'C:\Program Files\Gimp-2.0\share\gimp\2.0\scripts'

Example of using the script:

I first create a new image with a 'Hello' text. The new script is accessible via Filter | Animation | Scroller.



In the screen dump above, you can see the Scroller item. But it is still dimmed because Gimp does not like the text layer. You need to flatten the image first.



The Scroller Script-Fu dialogue has the following options:

• Work on Copy: If checked, the script will duplicate the image file so that you think it is safer. Anyway, even you do not check this box, you can still use Gimp's undo feature to roll back
• Scrolling Vertical: If unchecked, the scrolling direction will be horizontal
• Scrolling Up /Left: If unchecked, the scrolling direction will be scrolling down or right
• Flatten image: This check box is useful in case your image has multiple layers before

After exaction of the script, you can see Gimp has created many layers (as down in the Layer Dock above



You can use Gimp's Playback feature to preview the effect as in the above menu.



If you are satisfied with the result, you can export the result to a GIF file. Please remember to select 'Save as Animation' (highlighted option)



For the frame disposal option, I recommend to select 'One frame per layer (replace) because in my script, each new layer is a full size layer. I find the delay per frame at 100 ms is usually acceptable. (By the way, sending a too low value may not be effective in many web browsers).

The following is final result (displayed as GIF)

Scrolling Banner using CSS

I used to create animated GIF for scrolling web banners. However, this is very time-consuming.

Yes, I know there are the following alternatives:

• commercial GIF creator with canned animation effect (but I do not want to pay)

• free JavaScripts using CSS (My personal principle is "Simple is beautiful and while my understanding on the complicated codes is limited and I cannot be sure the compatibility of various browser versions. A final word, I do not like a white-out effect, which is a limitation I observe in many, if not all, of these JavaScripts.)

Therefore I start to resort to CSS and JavaScript.

My aim is very simple:

• - the scrolling banner can be in either vertical or horizontal direction
• - the codes (CSS or JavaScript) should be in a few lines only
• - the scrolling should be repeating and there is no blank instance

I nearly forgot to tell one limitation of my solutions is that the banner content is in graphical (i.e. not text) format.

Implementation Procedure
(1) Create a graphical banner. My preference is GIF format because its lossless pixel compression (though color depth compression is lossy - but this is not a big problem because the banner is more poster like and should have not many colors.). Another advantage of GIF is its support of transparent color.

(2) In your html codes, insert a <div> like
<div id="'scroll_div'" style="display: block; width: 400px; height: 20px; background: url(banner.gif) repeat-y 0 0px;"></div>
Remarks:

• scroll_div is the DIV id for subsequent JavaScript manipulation
• width and height are the associated dimension of the graphical banner
• banner.gif is the filename of the graphical banner
• repeat-y: this attribute is very important, because, as I said before, I like the banners to scroll with continuous repeating pattern.

(3) Create the following JavaScripts
var cur_ypos;
var div_height;
function init_scroll(){
cur_ypos = 0;
div_height = parseInt(document.getElementById("scroll_div").style.height);
div_bgr_pos = document.getElementById("scroll_div").style.backgroundPosition;
window.setInterval('scroll_banner()', 150);
}
function scroll_banner() {
cur_ypos++;
if (cur_ypos == div_height) cur_ypos = 0;
document.getElementById("scroll_div").style.backgroundPosition = '0 -' + cur_ypos + 'px';
}
Remarks:

• The variable div_height is just implemented for the sake of efficiency because I do not want to evaluate the division height on each call
• The key scrolling mechanism is to modify the CSS vertical background-position by one pixel
• The scrolling speed can be modified by changing the timer value (the example here is 150 mill-seconds). Please note that there is no point to set a too small values because most JavaScript implementation cannot afford a too short timer.

(4) Start the script using the Body onload
<body onload="init_scroll();">

Demonstration:
Sorry that I cannot demonstrate the effect in Blogspot because I find I cannot manipulate ad hoc JavaScript in the Blogspot environment. So, I use again animinated GIF for demonstration: