rotrans/index.html at master · newtechlab/rotrans · 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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Rotrans demo</title>
    <script src="rotrans.js"></script>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width">
    <meta name="viewport" content="initial-scale=1.0">
</head>
<body>
<div id="container">
    <div id="diva"></div>
    <div id="divb"></div>
    <div id="divc"></div>
</div>
<script>
    // Get the elements that are part
    let diva = document.getElementById("diva");
    let divb = document.getElementById("divb");
    let divc = document.getElementById("divc");
    // Initiate some content we can look at
    [diva, divb, divc].map((it, j) => {
        for(let i = 0; i < 25; i++) {
            let node = document.createElement("h1");
            node.innerHTML="Text here " + j
            it.appendChild(node);
        }
    })
    // Initiate our library with the elements
    let tr = rotrans([diva, divb, divc], "150px")
    // Bind some keys so the user can try it out
    window.addEventListener("keydown", e => {
        if(e.keyCode == 37 ) {
            tr.left()
        } else if (e.keyCode == 39) {
            tr.right()
        }
    })
</script>
</body>
</html>