Недавно реализовывал что-то подобное
тут. Справа по мере прокрутки страницы прокручивается валик с краской. То что нужно? Вот исходный код скрипта:
$(document).ready(function(e) {
var os = (function() {
var ua = navigator.userAgent.toLowerCase();
//console.log(ua);
return {
isWin: /windows/.test(ua),
isWin2K: /windows nt 5.0/.test(ua),
isXP: /windows nt 5.1/.test(ua),
isVista: /windows nt 6.0/.test(ua),
isWin7: /windows nt 6.1/.test(ua),
isWin8: /windows nt 6.2/.test(ua),
isMac: /macintosh/.test(ua)
};
}());
var animateSpeed = 500;
if(os.isMac) {
animateSpeed = 600;
}
/*Валик*/
var rollHPos = 0,
scrollTopPosition = $(document).scrollTop(),
docHeight = $(document).height(),
winHeight = $(window).height(),
rollWinStep = Math.floor(winHeight / (Math.floor(docHeight / winHeight)));
//console.log(docHeight);
//Движение за мышкой
/*$(this).mousemove(function(e){
if( e.pageY > 0 && e.pageY < docHeight ) goRoll(e.pageY, true);
});*/
//Движение по скролу
$(document).scroll(function(){
goRoll($(document).scrollTop(), false);
});
$("#roll").click(function(){
goRoll(0, false);
$("html, body").animate({ scrollTop: 0 }, 500);
});
$(document).mousemove(function(e){
//console.log($(this).height() + " : " + e.pageY);
});
function goRoll( STP, mousemove ){
docHeight = $(document).height();
winHeight = $(window).height();
if( mousemove ) animateSpeed = 0;
//console.log(docHeight)
//Крутим валик вниз
if( scrollTopPosition > $(document).scrollTop() ){
if( rollHPos == 0 ) rollHPos = -946;
else rollHPos += 86;
}
//Крутим валик вверх
else{
if( rollHPos == -946 ) rollHPos = 0;
else rollHPos -= 86;
}
//Запоминаем позицию скролла относительно верха страницы
scrollTopPosition = STP;
rollCorrectPos = STP == (docHeight - winHeight) ? 90 : 0;
//Визуализируем
$("#roll").css({"background-position-y": (rollHPos).toString() + "px"});
perOfDocScroll = Math.floor(scrollTopPosition/((docHeight - winHeight) / 100));
//setTimeout(function(){
if( !mousemove ){
//console.log(docHeight);
$("#roll").stop().animate({"margin-top": + Math.floor(((winHeight) / 100 * perOfDocScroll)) - 1 + "px", "top" : (scrollTopPosition - rollCorrectPos) + "px"}, animateSpeed);
$("#paint-line").stop().animate({height: + Math.floor(((winHeight) / 100 * perOfDocScroll)) + (scrollTopPosition - rollCorrectPos) + "px"}, animateSpeed);
}
else{
$("#roll").stop().animate({"top" : (scrollTopPosition - rollCorrectPos - 90) + "px"}, animateSpeed);
$("#paint-line").stop().animate({height: (scrollTopPosition - rollCorrectPos - 90 + 1) + "px"}, animateSpeed);
}
//}, 100);
}
/*Валик*/
});
