Приготовлено что-то. Не совсем уверен, соответствует ли это вашим потребностям, или это именно тот тип вещей, который вы искали, но, возможно, это даст вам некоторые идеи.
Codepen.
JavaScript:
/*global TweenMax,Power2,Power4*/
var initIntervalID=null,initInterval=10;
var scrollBar=document.querySelector('.scrollbar');
var scrollBarHandle=document.querySelector('.scrollbar__handle');
var scrollBarBg=document.querySelector('.scrollbar__bg');
var container=document.querySelector('.container');
var images=document.querySelector('.images');
var thumbs=document.querySelectorAll('.thumb');
var numThumbs=thumbs.length;
var resizeID=null,resizeTimeout=400,resizeDuration=.4,resizeEase=Power2.easeOut;
var initDuration=.4,initEase=Power2.easeOut,initStagger=.1;
var duration=.4,ease=Power2.easeOut;
var force3D=true;
var windowWidth=window.innerWidth;
var windowHeight=window.innerHeight;
var thumbWidth=200,thumbHeight=200,thumbGutter=20;
var scrollBarBgHeight=10,scrollBarBgWidth=thumbWidth,scrollBarHandleWidth=20,scrollBarGutter=10;
var imagesPositions=[],iterator=0,percentages=[],scrollBarHandlePositions=[];
function init(){
initImages();
initScrollbar();
initPositions();
assignListeners();
}
function onMouseWheel(event){
var e=window.event||event;
var delta=Math.max(-1,Math.min(1,(e.wheelDelta|| -e.detail)));
if(delta>0){
iterator-=1;
if(iterator<0){
iterator=0;
TweenMax.to(images,duration*2,{bezier:{type:'thru',values:[{x:imagesPositions[iterator]+(thumbWidth+thumbGutter)*.1},{x:imagesPositions[iterator]}]},ease:ease});
TweenMax.killTweensOf(scrollBar);
TweenMax.to(scrollBar,duration,{autoAlpha:1,ease:ease});
TweenMax.to(scrollBarHandle,duration*2,{
transformOrigin:'left',
bezier:{type:'thru',values:[{scaleX:.2},{scaleX:1}]},
ease:ease,
onComplete:function(){ TweenMax.to(scrollBar,duration,{autoAlpha:0,ease:ease}); }
});
}else{
TweenMax.to(images,duration,{x:imagesPositions[iterator],ease:ease});
TweenMax.killTweensOf(scrollBar);
TweenMax.to(scrollBar,duration,{autoAlpha:1,ease:ease});
TweenMax.to(scrollBarHandle,duration,{
x:scrollBarHandlePositions[iterator],
ease:ease,
onComplete:function(){ TweenMax.to(scrollBar,duration,{autoAlpha:0,ease:ease}); }
});
}
}else{
iterator+=1;
if(iterator>numThumbs-1){
iterator=numThumbs-1;
TweenMax.to(images,duration*2,{bezier:{type:'thru',values:[{x:imagesPositions[iterator]-(thumbWidth+thumbGutter)*.1},{x:imagesPositions[iterator]}]},ease:ease});
TweenMax.killTweensOf(scrollBar);
TweenMax.to(scrollBar,duration,{autoAlpha:1,ease:ease});
TweenMax.to(scrollBarHandle,duration*2,{
transformOrigin:'right',
bezier:{type:'thru',values:[{scaleX:.2},{scaleX:1}]},
ease:ease,
onComplete:function(){ TweenMax.to(scrollBar,duration,{autoAlpha:0,ease:ease}); }
});
}else{
TweenMax.to(images,duration,{x:imagesPositions[iterator],ease:ease});
TweenMax.killTweensOf(scrollBar);
TweenMax.to(scrollBar,duration,{autoAlpha:1,ease:ease});
TweenMax.to(scrollBarHandle,duration,{
x:scrollBarHandlePositions[iterator],
ease:ease,
onComplete:function(){ TweenMax.to(scrollBar,duration,{autoAlpha:0,ease:ease}); }
});
}
}
return false;
}
function listenToMouseWheel(){
if(container.addEventListener){
container.addEventListener('mousewheel',onMouseWheel,false);
container.addEventListener('DOMMouseScroll',onMouseWheel,false);
}else{
container.attachEvent('onmousewheel',onMouseWheel);
}
}
function adjustContainerOnResize(){
windowWidth=window.innerWidth;
windowHeight=window.innerHeight;
TweenMax.to(container,resizeDuration,{
x:windowWidth*.5-thumbWidth*.5,
y:windowHeight*.5-thumbHeight*.5,
ease:resizeEase,
force3D:force3D
});
}
function onResize(){
clearTimeout(resizeID);
resizeID=setTimeout(adjustContainerOnResize,resizeTimeout);
}
function listenToResize(){
(window.addEventListener)?window.addEventListener('resize',onResize,false):window.attachEvent('onresize',onResize);
}
function assignListeners(){
listenToResize();
listenToMouseWheel();
}
function initPositions(){
for(var i=0; i<numThumbs; i+=1){
imagesPositions[i]=-i*(thumbWidth+thumbGutter);
percentages[i]=i*(100/numThumbs);
if(i===0){
scrollBarHandlePositions[i]=0;
}else if(i===numThumbs-1){
scrollBarHandlePositions[i]=scrollBarBgWidth-scrollBarHandleWidth;
}else{
scrollBarHandlePositions[i]=i*(scrollBarBgWidth/(numThumbs-1))-scrollBarHandleWidth*.5;
}
}
}
function initScrollbar(){
TweenMax.set(scrollBar,{
y:scrollBarGutter,
width:scrollBarBgWidth,
height:scrollBarBgHeight,
force3D:force3D
});
TweenMax.set(scrollBarHandle,{y:0,force3D:force3D});
TweenMax.to(scrollBar,initDuration,{delay:initStagger,opacity:1,ease:initEase});
}
function initImages(){
for(var i=0; i<numThumbs; i+=1){
TweenMax.set(thumbs[i],{x:i*(thumbWidth+thumbGutter),force3D:force3D});
}
var width=numThumbs*(thumbWidth+thumbGutter)-thumbGutter;
TweenMax.set(container,{y:windowHeight*.5-thumbHeight*.5,x:windowWidth*.5-thumbWidth*.5,height:thumbHeight+scrollBarGutter+scrollBarBgHeight,width:thumbWidth,force3D:force3D});
TweenMax.set(images,{height:thumbHeight,width:width,force3D:force3D});
TweenMax.staggerTo(thumbs,initDuration,{opacity:1,ease:initEase},initStagger);
}
initIntervalID=setInterval(function(){
if(document.readyState==="complete"){
clearInterval(initIntervalID);
init();
}
},initInterval);
Осторожно уродливой, не переработан, высоко ун-тестирование, не-оптимизированный код. Создан только для удовольствия. Если я найду время, возможно, я опишу его позже и включу другие взаимодействия с мышью, такие как mousedown, mousemove, mouseup, а также сенсорные взаимодействия, такие как touchstart, touchmove, touchend события. Должно быть весело. Пока используйте его, как вам может быть.
не изобретайте колесо, используйте интерфейс, к которому пользователь привык. – dandavis
Полностью согласен с этим, но на самом деле свиток очень уродливый в Chrome ... Я просто хочу подкрутить положение прокрутки стандартной полосы прокрутки, а затем я попробовал что-то, но похоже, что это темное решение! – flks
много плагинов, которые сделали это ... и были проверены на сражение кросс-браузера – charlietfl