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:
