ScrollStepper/scrollSteps.html at master · mwkaicz/ScrollStepper · 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
<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">

  <title>ScrollStepper example</title>
  <style>
    div{
      text-align: center;
      padding-top: 32px;
      color: #fff;
      opacity: 0;
      position: fixed;
      top: 100px;
      width: 500px;
      height: 300px;
      font-size: 64px;
    }
    .active{
      opacity: .5;
    }
    #stats{
      right: 0;
      top: 0;
      font-size: 10px;
      padding: 0;
      margin-top: 10px;
      position: fixed;
      width: 50px;
      height: 50px;
      color: black;
      opacity: 1;
    }
  </style>
  <script src="scrollStepper.js"></script>
  <script>
    var scrollStepper = null;

    function init(){
      window.scrollTo(window.pageXOffset, 0);

      var schema = {
        0: {'#test1': {active: {'class': 'active'}, inactive: {'class': ''}}},
        200: {'#test2': {active: {'class': 'active'}, inactive: {'class': ''}}},
        500: {'#test3': {active: {'class': 'active'}, inactive: {'class': ''}}},
        700: {'#test4': {active: {'class': 'active'}, inactive: {'class': ''}}},
        900: {'#test5': {active: {'class': 'active'}, inactive: {'class': ''}}},
        2000: {'#test6': {active: {'class': 'active'}, inactive: {'class': ''}}},
      };

      scrollStepper = new ScrollStepper(schema, 500);

      body = document.getElementsByTagName('BODY')[0];
      body.style.height = (window.innerHeight + 2000) + 'px';

      setInterval(function(){
        document.getElementById('stats').innerHTML = 'TOP: ' + window.pageYOffset + 'px';
      }, 250);
    }

  </script>
  </head>
  <body onload="init()" style="height:3000px;">
    <div id="stats"></div>
    <div id="test1" class="active" style="background: red;">[0] 0px</div>
    <div id="test2" style="background: green;">[1] 200px</div>
    <div id="test3" style="background: blue;">[2] 500px</div>
    <div id="test4" style="background: gray;">[3] 700px</div>
    <div id="test5" style="background: yellow; color: black; ">[4] 900px</div>
    <div id="test6" style="background: black;">[5] 2000px</div>
  </body>
</html>