I want to make a good smooth scroll effect in my webpage, and I see that one of the best way is using the requestAnimationFrame.
I found this polyfill by Jed Schmidt: https://gist.github.com/997619
And this one by Paul Irish: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
But to be honest, I don't know how to use it to create the smooth effect. In the past I checked some plugins: nicescroll (I don't like it because it changes the scrollbar style), smoothscroll.js (this one only works on Chrome), and some others that only work on mousewheel, but not when you click the Re Pag, Av Pag, the spacebar, etc.
I can provide an example on this page: http://cirkateater.no/ The scroll effect is really nice and works efficiently. It's also cross browser! But taking a look in its JS code, I only see a huge function for parallax, and I'm not sure if what I want is into this function.
Could you tell me where I start? I will update the progress here.
PD: Actually, I've spent a day trying to implement it through non-sense actions about copy-paste into my scripts.js file. I'm not an expert on JS, but I deduce it's something difficult to do.
Edit 1: I already have something. First, the polyfill:
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
And the smooth mouse wheel:
var html = document.documentElement;
var rAF, target = 0, scroll = 0;
onmousewheel = function (e) {
e.preventDefault();
var scrollEnd = html.scrollHeight - html.clientHeight;
target += (e.wheelDelta > 0) ? -70 : 70;
if (target < 0)
target = 0;
if (target > scrollEnd)
target = scrollEnd;
if (!rAF)
rAF = requestAnimationFrame(animate);
};
onscroll = function () {
if (rAF)
return;
target = pageYOffset || html.scrollTop;
scroll = target;
};
function animate() {
scroll += (target - scroll) * 0.1;
if (Math.abs(scroll.toFixed(5) - target) <= 0.47131) {
cancelAnimationFrame(rAF);
rAF = false;
}
scrollTo(0, scroll);
if (rAF)
rAF = requestAnimationFrame(animate);
}
We can begin from here. Now I only need to make a better improvement to have this smooth effect when I press the arrow keys, Re Page, Av Page, etc.
I have the way to do that as I expected:
// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
// requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
// MIT license
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame']
|| window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}());
('ontouchend' in document) || jQuery(function($){
var scrollTop = 2, tweened = 0, winHeight = 0, ct = [], cb = [], ch = [], ph = [];
var wrap = $('#wrap').css({position:'fixed', width:'100%', top:0, left:0})[0];
var fake = $('<div>').css({height: wrap.clientHeight}).appendTo('body')[0];
var update = function(){
window.requestAnimationFrame(update);
if(Math.abs(scrollTop-tweened) > 1){
var top = Math.floor(tweened += .25 * (scrollTop-tweened)),
bot = top + winHeight, wt = wrap.style.top = (top*-1) + 'px';
for(var i = plax.length; i--;)if(cb[i] > top && ct[i] < bot){
plax[i].style.top = ((ct[i] - top) / Math.max(ph[i] - ch[i], winHeight - ch[i]) * (ch[i] - ph[i])) + 'px';
}
}
};
var listen = function(el,on,fn){(el.addEventListener||(on='on'+on)&&el.attachEvent)(on,fn,false);};
var scroll = function(){scrollTop = Math.max(0, document.documentElement.scrollTop || window.pageYOffset || 0);};
listen(window, 'scroll', scroll);
update();
});
And this is the HTML structure:
<html>
<body>
<div id="wrap">
<!-- The content goes here -->
</div>
</body>
</html>
It works but it's not perfect. For example, having the WP admin bar enabled for a user, it will position the content under the admin-bar, and it will leave a blank space after the footer.
Related
I have the following problem, you will see I have a web page where I implement the rangeslider plugin on PC it works correctly but on mobile I can't explain myself: when on mobile I select the slider I cannot make it go up or down or change the amount it has, it is only modified while The scroll is used but as you know with the scroll the user moves on mobile, therefore it cannot work so check what I mean on the page
this is the link of the page: http://ucreativa.work/linux/nsite2/product.php
As you can see, it works well on PC, but if they try to use it on mobile, the slider does not work.
What do you think that might be? I append the js code that I use I don't append the css because it is a lot of code that is not relevant
my question is can this plugin work on mobile?
var cpu_cur_val = '2';
var ram_cur_val = '4';
var disk_cur_val = '8';
var backup_cur_val = '30';
var ips_cur_val = '0';
function new_range (wrapper) {
// Variables to use later
var rangeWrapper = document.querySelector('.' + wrapper + '__wrapper');
var rangeInput = document.querySelector('.' + wrapper + '__input');
var rangeValues = document.querySelector('.' + wrapper + '__values');
var rangeValueNumberBottom = document.querySelector('.' + wrapper + '__value__number--bottom');
var rangeValueTextBottom = document.querySelector('.' + wrapper + '__value__text--bottom');
var rangeSliderPaths = document.querySelectorAll('.' + wrapper + '__slider__path');
var mouseX = 0;
var mouseY = 0;
var mouseInitialY = 0;
var mouseDy = 0;
var mouseDyLimit = 25;
var mouseDyFactor = 3;
var max = parseInt(rangeInput.max);
var rangeMin = parseInt(rangeInput.min);
var rangeMax = parseInt(rangeInput.max);
var rangeValue = parseInt(rangeInput.value);
var rangeHeight = 320;
var currentY = rangeHeight * rangeValue / max;
var rangeMinY = rangeHeight * rangeMin / max;
var rangeMaxY = rangeHeight * rangeMax / max;
var scaleMax = 0.32;
var scale, newPath, newY, newSliderY, lastMouseDy, rangeWrapperLeft, pageX, pageY;
// Update slider value, initially using the `input` value
updateValue();
// Function to build the slider `path`, using the given `dy` and `ty` values
function buildPath(dy, ty) {
return 'M 0 ' + ty + ' q ' + mouseX + ' ' + dy + ' 120 0 l 0 320 l -120 0 Z';
}
// Function to update the slider value
function updateValue() {
// Clear animations if are still running
anime.remove([rangeValues, rangeSliderPaths[0], rangeSliderPaths[1]]);
// Calc the `input` value using the current `y`
rangeValue = parseInt(currentY * max / rangeHeight);
// Calc `scale` value for numbers
scale = (rangeValue - rangeMin) / (rangeMax - rangeMin) * scaleMax;
// Update `input` value
rangeInput.value = rangeValue;
// rangeSum.innerText = rangeValue;
rangeValueNumberBottom.innerText = rangeValue;
// Match the javascript value to real input value;
rangeInput.setAttribute('value', rangeValue);
switch (wrapper) {
default:
rangeValueNumberBottom.innerText = rangeValue;
break;
case 'cpu':
cpu_cur_val = rangeValue;
break;
case 'ram':
if (rangeValueNumberBottom.innerText == '0') {
rangeValueTextBottom.innerText = 'זיכרון (MB)';
rangeValueNumberBottom.innerText = '500';
} else {
rangeValueTextBottom.innerText = 'זיכרון (GB)';
}
ram_cur_val = rangeValue;
break;
case 'disk':
rangeValueNumberBottom.innerText = rangeValue + '0';
disk_cur_val = rangeValue;
break;
case 'backup':
if (rangeValueNumberBottom.innerText == '0') {
rangeValueNumberBottom.innerText = '0';
} else {
rangeValueNumberBottom.innerText = rangeValue + '0';
}
backup_cur_val = rangeValue;
break;
case 'ips':
ips_cur_val = rangeValue;
break;
}
// Some maths calc
if (Math.abs(mouseDy) < mouseDyLimit) {
lastMouseDy = mouseDy;
} else {
lastMouseDy = mouseDy < 0 ? -mouseDyLimit : mouseDyLimit;
}
// Calc the `newSliderY` value to build the slider `path`
newSliderY = currentY + lastMouseDy / mouseDyFactor;
if (newSliderY < rangeMinY || newSliderY > rangeMaxY) {
newSliderY = newSliderY < rangeMinY ? rangeMinY : rangeMaxY;
}
// Build `path` string and update `path` elements
newPath = buildPath(lastMouseDy, rangeHeight - newSliderY);
rangeSliderPaths[0].setAttribute('d', newPath);
rangeSliderPaths[1].setAttribute('d', newPath);
}
// Function to simulate the elastic behavior
function elasticRelease() {
// Morph the paths to the opposite direction, to simulate a strong elasticity
anime({
targets: rangeSliderPaths,
d: buildPath(-lastMouseDy * 1.3, rangeHeight - (currentY - lastMouseDy / mouseDyFactor)),
duration: 150,
easing: 'linear',
complete: function () {
// Morph the paths to the normal state, using the `elasticOut` easing function (default)
anime({
targets: rangeSliderPaths,
d: buildPath(0, rangeHeight - currentY),
duration: 4000,
elasticity: 880
});
}
});
}
// Handle `mousedown` and `touchstart` events, saving data about mouse position
function mouseDown(e) {
mouseY = mouseInitialY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
rangeWrapperLeft = rangeWrapper.getBoundingClientRect().left;
}
// Handle `mousemove` and `touchmove` events, calculating values to morph the slider `path` and translate values properly
function mouseMove(e) {
if (mouseY) {
pageX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX;
pageY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY;
mouseX = pageX - rangeWrapperLeft;
mouseDy = (pageY - mouseInitialY) * mouseDyFactor;
newY = currentY + mouseY - pageY;
// alert(newY);
if (newY >= rangeMinY && newY <= rangeMaxY) {
currentY = newY;
mouseY = pageY;
} else {
currentY = newY < rangeMinY ? rangeMinY : rangeMaxY;
}
// After doing maths, update the value
updateValue();
}
}
// Handle `mouseup`, `mouseleave` and `touchend` events
function mouseUp() {
// Trigger elastic animation in case `y` value has changed
if (mouseDy) {
elasticRelease();
}
// Reset values
mouseY = mouseDy = 0;
}
// Events listeners
rangeWrapper.addEventListener('mousedown', mouseDown);
rangeWrapper.addEventListener('touchstart', mouseDown);
rangeWrapper.addEventListener('mousemove', mouseMove);
rangeWrapper.addEventListener('touchmove', mouseMove);
rangeWrapper.addEventListener('mouseup', mouseUp);
rangeWrapper.addEventListener('mouseleave', mouseUp);
rangeWrapper.addEventListener('touchend', mouseUp);
}
I'm trying to achieve what is outlined in this Stack Overflow question, without jQuery dependency: stackoverflow.com/questions/18358816/sticky-sidebar-stick-to-bottom-when-scrolling-down-top-when-scrolling-up
But I didn't want to hijack that question.
Basically, I want the content in the sidebar to be independently scrollable but fixed when the viewport reaches either end of the sidebars contents on scroll.
My main stumbling block appears to not being able to calculate the elementTop variable when the sidebar is absolutely positioned and between the top and bottom of the container which I have set to be full height.
Full code below:
var StickySidebar = function(eventie) {
var container, containerTop, containerHeight, // container
element, elementTop, elementHeight, elStyle, // element
viewportTop = -1, viewportHeight, documentTop, // viewport
lastViewportTop, scrollingDown, top = false , bottom = false,// sticky vars
scroll = window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.msRequestAnimationFrame ||
window.oRequestAnimationFrame ||
function(callback){ window.setTimeout(callback, 1000/60); },
options = {
container : document.querySelector('.sidebar-container'),
element : document.querySelector('.sidebar'),
sidebarClass : 'sidebar',
bottomOffset : -15,
topOffset: 90,
},
_updateValue = function() {
viewportHeight = window.innerHeight;
},
_offset = function(obj) {
var ol = ot = 0;
if (obj.offsetParent) {
do {
ol += obj.offsetLeft;
ot += obj.offsetTop;
} while (obj = obj.offsetParent);
}
return {
left: ol,
top: ot
};
},
init = function(){
if(options.element !== null) {
container = options.container;
containerTop = offset(container).top;
containerHeight = container.clientHeight;
element = options.element;
elementTop = offset(element).top;
elementHeight = options.element.clientHeight;
lastViewportTop = window.scrollY;
viewportHeight = window.innerHeight;
eventie.bind(document, "scroll", _loop);
eventie.bind(window, "resize", _updateValue);
}
},
_loop = function() {
if (viewportTop == window.pageYOffset) {
scroll(_loop);
return false;
} else viewportTop = window.pageYOffset;
_updateValue();
var viewportBottom, elementTooBig, topOffset;
elementTop = offset(element).top;
elementHeight = element.clientHeight;
containerHeight = container.clientHeight;
scrollingDown = viewportTop > lastViewportTop;
elementTooBig = elementHeight > viewportHeight;
console.log("elementTop : " + elementTop);
console.log("viewportTop : " + viewportTop);
if (scrollingDown) {
if (viewportTop + viewportHeight >= elementTop + elementHeight) {
element.setAttribute('style','position:fixed; bottom:30px;');
} else {
element.setAttribute('style','position:absolute; top:'+ elementTop +'px;'); // issue 1
}
if (viewportTop + viewportHeight > containerTop + containerHeight) {
element.setAttribute('style','position:absolute; bottom:0;');
}
} else {
if (viewportTop < containerTop - 60) {
element.removeAttribute('style');
return;
}
if (viewportTop <= elementTop) {
element.setAttribute('style','position:fixed; top:90px;');
} else {
element.setAttribute('style','position:absolute; top:'+ elementTop +'px;');
elementTop = viewportTop + elementTop;
}
}
lastViewportTop = viewportTop;
};
return {
init: init
};
}(eventie);
I've been trying to tackle this issue for a few weeks now, and it has been driving me insane. Any help would be greatly appreciated.
If you're just trying to achieve the desired result not necessarily creating that yourself - well, there are many JavaScript libraries that provide that.
For example, Stickyfill is actually a polyfill for position: sticky which is natively supported only in Firefox 41+ and Safari 8+. Here is the demo with all kinds of stickiness you can imagine :)
P.S. At first glance you might notice something about jQuery there, but it's pure JavaScript and just adds a jQuery extension.
After watching this two part tutorial on (here's part two) I've got parallax scrolling up and running. Where the clip starts he introduces cross browser compatibility using Paul Irish's requestAnimationFrame and that's what I can't get to work. He just pastes the code right into the code and it works but I can't get it to run in any other browser except Chrome. Although, when pasted something is happening to the images so I suppose it does something...
Any idea what I'm doing wrong? One suggestion was moving the requestAnimationFrame before the other code but that didn't change anything. I've set up a JSFiddle here so please help yourself. Any pointer is helpful.
Here's my code:
(function () {
var lastTime = 0;
var vendors = ['webkit', 'moz'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame =
window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}());
(function ($) {
var $container = $(".parallax");
var $divs = $container.find("div.parallax-background");
var thingBeingScroll = document.body;
var liHeight = $divs.eq(0).closest("li").height();
var diffHeight = $divs.eq(0).height() - liHeight;
var len = $divs.length;
var i, div, li, offset, scroll, top, transform;
var offsets = $divs.get().map(function (div, d) {
return $(div).offset();
});
var render = function () {
top = thingBeingScroll.scrollTop;
for (i = 0; i < len; i++) {
div = $divs[i];
offset = top - offsets[i].top;
scroll = ~~((offset / liHeight * diffHeight) * 3);
transform = 'translate3d(0px,' + scroll + 'px,0px)';
div.style.webkitTransform = transform;
div.style.MozTransform = transform;
div.style.msTransform = transform;
div.style.OTransform = transform;
div.style.transform = transform;
}
};
(function loop() {
requestAnimationFrame(loop);
render();
})();
})(jQuery);
Well apart from jQuery not getting loaded into jsFiddle properly, I think your problem was with scrollTop support. Try this updated fiddle which uses the jquery shim for scrollTop and the window property intead;
var $thingBeingScroll = $(window);
and
top = $thingBeingScroll.scrollTop();
But now it looks like you have the same problem I'm currently having. Namely, the scroll is jumpy on IE and FF compared to Chrome.
It's as if the smooth scrolling on FF and IE (which chrome doesn't have) is somehow moving the background slab on scroll before we get a chance to update it. It also issues an array of scroll changes which means that after you let go of the scroll bar, it then has to redraw the positions starting back at the begining and working its way back to current position. I believe that's what causes the jerkiness.
I believe requestAnimationFrame will stack up requests, so it may be that we need to cancel any previous outstanding ones if we've a more recent one and/or use higher resolution updates like mousemove.
Update
I made a repo on GitHub:
https://github.com/yckart/Veil.js
Big thanks to Sargo Darya and Edward J Payton.
I've to create a header which slides up if you scroll down and vice versa. The problem is, that it jumps (if you are in the diff-range between 0-128).
I can not figure out where the problem sits. Any idea how to get this to work correctly?
Here's what I've done so far: http://jsfiddle.net/yckart/rKW3f/
// something simple to get the current scroll direction
// false === down | true === up
var scrollDir = (function (oldOffset, lastOffset, oldDir) {
return function (offset) {
var dir = offset < oldOffset;
if (dir !== oldDir) lastOffset = offset;
oldOffset = offset;
oldDir = dir;
return {dir: dir, last: lastOffset};
};
}());
var header = document.querySelector('header');
var height = header.clientHeight;
addEventListener('scroll', function () {
var scrollY = document.documentElement.scrollTop || document.body.scrollTop;
var dir = scrollDir(scrollY);
var diff = dir.last-scrollY;
var max = Math.max(-height, Math.min(height, diff));
header.style.top = (dir.dir ? max-height : max) + 'px';
});
Another problem is, that if the scroll-direction was changed the first time, nothing happens. However, this could be fixed with an interval, or else.
I believe this is exactly what you want:
var header = $('header'),
headerHeight = header.height(),
treshold = 0,
lastScroll = 0;
$(document).on('scroll', function (evt) {
var newScroll = $(document).scrollTop(),
diff = newScroll-lastScroll;
// normalize treshold range
treshold = (treshold+diff>headerHeight) ? headerHeight : treshold+diff;
treshold = (treshold < 0) ? 0 : treshold;
header.css('top', (-treshold)+'px');
lastScroll = newScroll;
});
Demo on: http://jsfiddle.net/yDpeb/
Try this out:- http://jsfiddle.net/adiioo7/rKW3f/7/
JS:-
var scrollDir = (function (oldOffset, lastOffset, oldDir) {
return function (offset) {
var dir = offset < oldOffset;
if (dir !== oldDir) {
lastOffset = offset;
} else {
offset = offset - height;
}
oldOffset = offset;
oldDir = dir;
return {
dir: dir,
last: lastOffset
};
};
}());
var header = document.querySelector('header');
var height = header.clientHeight;
$(window).scroll(function () {
var scrollY = $(window).scrollTop();
var dir = scrollDir(scrollY);
var diff = dir.last - scrollY;
var max = Math.max(-height, Math.min(height, diff));
max = (dir.dir ? max - height : max);
max = scrollY<height?0:max;
$('header').data('size', 'small');
$('header').stop().animate({
top: max
}, 600);
});
Sargo Darya's answer above is exacty what i was looking for but I found a bug with Webkits inertia scrolling so I made a fix:
// Scrolling Header
var header = $('header'),
headerHeight = header.height(),
offset = 0,
lastPos = 0;
$(document).on('scroll', function(e) {
var newPos = $(document).scrollTop(),
pos = newPos-lastPos;
if (offset+pos>headerHeight) {
offset = headerHeight;
} else if (newPos < 0){ // webkit inertia scroll fix
offset = 0;
} else {
offset = offset+pos;
};
if (offset < 0) {
offset = 0;
} else {
offset = offset;
};
header.css('top', (-offset)+'px');
lastPos = newPos;
});
Adding one line fixed it. If - if scroll position is lower than 0, set header offset at 0.
Demo based on Sargo Darya's - http://jsfiddle.net/edwardomni/D58vx/4/
In this demo http://www.htmldrive.net/items/demo/527/Animated-background-image-with-jQuery
This code is for one background only. I want to add multiple background with different direction and speed.
var scrollSpeed = 70;
var step = 1;
var current = 0;
var imageWidth = 2247;
var headerWidth = 800;
var restartPosition = -(imageWidth - headerWidth);
function scrollBg(){
current -= step;
if (current == restartPosition){
current = 0;
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);
Currently it has settings for
$('#header').css("background-position",current+"px 0");
In a website I want to use this effect on #footer or #content background also. but with different speed and direction.
And is there any better and more optimized jquery method to achieve same effect?
And can we get same effect using CSS 3, without javascript?
Just saw the OP's answer, but decided to post anyway:
I've created a jQuery plugin to do this:
(function($) {
$.fn.scrollingBackground = function(options) {
// settings and defaults.
var settings = options || {};
var speed = settings.speed || 1;
var step = settings.step || 1;
var direction = settings.direction || 'rtl';
var animStep;
// build up a string to pass to animate:
if (direction === 'rtl') {
animStep = "-=" + step + "px";
}
else if (direction === 'ltr') {
animStep = '+=' + step + "px";
}
var element = this;
// perform the animation forever:
var animate = function() {
element.animate({
backgroundPosition: animStep + " 0px"
}, speed, animate);
};
animate();
};
})(jQuery);
Usage:
$("#header").scrollingBackground({
speed: 50,
step: 50,
direction: 'ltr'
});
This is pretty basic, and assumes that you're background-repeat is 'repeat-x' on the element you call it on. This way, there's no need to reset the background position every so often.
Working example: http://jsfiddle.net/andrewwhitaker/xmtpr/
I could work out the following solution. Am not sure if it is efficient. Will wait for anyone to comment or provide a better option.
Till then...:
var scrollSpeed = 70;
var step = 1;
var current = 0;
var images =
[
{
imageWidth:2247,
imagePath:"images/image1"
},
{
imageWidth:1200,
imagePath:"images/image2"
}
]
var headerWidth = 800;
var imageRotateCount = 0;
var imagesLength = images.length;
$('#header').css("background-image", images[0].imagePath);
function scrollBg(){
var curIndex = imageRotateCount%imagesLength;
var curImage = images[curIndex];
current -= step;
var restartPosition = -(curImage.imageWidth - headerWidth);
if (current == restartPosition){
current = 0;
imageRotateCount++;
curIndex = imageRotateCount%imagesLength;
curImage = images[curIndex];
$('#header').css("background-image", curImage.imagePath);
}
$('#header').css("background-position",current+"px 0");
}
var init = setInterval("scrollBg()", scrollSpeed);