scrollselect/scrollselect.js at master · fabianmaurer/scrollselect · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
let historyCount = 0;
const historyRadius = 2;
let historyPosition = 0;
let historyTarget=0;
let historyAnimation = false;
let historyChanged=[];
let historyMovement=0;
let width=1000;
generatePanels();
historyPanelLoop();
function generatePanels() {
    for (let i = 0; i < 10; i++) {
        initPanel(i);
    }
}

function initPanel(index) {
    let panel = document.createElement('div');
    panel.setAttribute('class', 'history-element');
    $('#history').append(panel);
    historyCount++;
}

function addPanel() {
    let panel = document.createElement('div');
    panel.setAttribute('class', 'history-element');
    $('#history').append(panel);
    historyCount++;
}
$('#history').bind('mousewheel', function (e) {

    if (e.originalEvent.wheelDelta > 0) {

        //left
        if (historyTarget > 0) {
            historyTarget--;
            historyAnimation = true;
            console.log(historyTarget);
        }
    }
    else {
        //right
        if (historyTarget < historyCount-1) {
            historyTarget++;
            historyAnimation = true;
            console.log(historyTarget);
        }
    }
});

function historyPanelLoop() {
    if (historyAnimation) {
        updateHistoryPosition();
        updateHistoryDOM();

    }
    requestAnimationFrame(historyPanelLoop);
}

function updateHistoryDOM(){
    let ch=$('#history').children();
    //console.log('changing:');
    for(let i=0;i<historyCount;i++){
        let pos=(i-historyPosition+historyRadius)/(historyRadius*2);
        console.log('pos:'+pos)
        //console.log((i-historyPosition+historyRadius)/(historyRadius*2));
        if(pos<0) pos=0;
        if(pos>1) pos=1;
        //console.log(i+': '+pos)
        $(ch[i]).css('left',width*positionConverter(pos)+'px');
    }
}

/**
 * converts from 0..1 to 0..1 using some mathematical function to create smooth movement from linear movement.
 */
function positionConverter(pos){
    if(pos==0) return 0;
    if(pos==1) return 1;
    return pos;
    if(pos>=0.5){
        pos=1-pos;
        let a=pos/0.1;
        return 1-0.5*Math.pow(0.5,a);
    }
    if(pos<0.5){
        let a=pos/0.1;
        return 0.5*Math.pow(0.5,a);
    }
}

function updateHistoryPosition() {
    historyMovement=(historyTarget-historyPosition)/8;

    if(Math.abs(historyTarget-historyPosition)<0.005){
        historyPosition=historyTarget;
        historyAnimation=false;
        console.log('stopped scrolling');
    }else historyPosition+=historyMovement;
    console.log('pos: '+historyPosition);
}
/*
$('#history').scroll(function(event){
    console.log(this.scrollY);
})
*/