html - jQuery image sliding right not repeating instantly -
as can see.. repeat after full cycle of black background. find way make second actual image passes, start of image connected right @ end see no black while scrolling. ideas?
html
<body> <div id="wrapper"> <div id="header"> </div> </div> </body> css
/* give header height , background image */ #header{ height:150px; background: #000 url(logo.jpg) repeat-y scroll left top; text-align:center; } js
var scrollspeed = 50; // speed in milliseconds var step = 1; // how many pixels move per step var current = 0; // current pixel row var imageheight = 4300; // background image height var headerheight = 300; // how tall header is. //the pixel row start new loop var restartposition = -(imageheight - headerheight); function scrollbg(){ //go next pixel row. current -= step; //if @ end of image, go top. if (current == restartposition){ current = 0; } //set css of header. $('#header').css("background-position",current +"px 1"); } //calls scrolling function repeatedly var init = setinterval("scrollbg()", scrollspeed);
i think cause of problem.
change
var init = setinterval("scrollbg()", scrollspeed); to
var init = setinterval(function(){scrollbg()}, scrollspeed);
Comments
Post a Comment