scrollpup.js/index.html at 45295d8d0fce69f9a2bbf8559c16e76da3dac0ae · flouthoc/scrollpup.js · 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
107
108
109
110
111
<html>
<head>

  <title>scrollpup.js</title>

  <style>
    @import url('https://fonts.googleapis.com/css?family=Raleway|Source+Code+Pro');

    * {
      margin: 0;
      padding: 0;
    }

    html {
      color: #444;
      height: 100%;
      font-size: 100%;
      font-family: 'Raleway', sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .heading {
      font-family: 'Raleway', sans-serif;
      font-size: 2.875rem;
      font-weight: 500;
      color: #2e3242;
    }

    p + p {
      margin-bottom: 1.5rem;
    }

    .small {
      color: #b2bec3;
      background-color: #2e3242;
      padding: 0.475rem 0.675rem;
      border-radius: 0.25rem;
    }

    .code {
      margin: 1.5rem 0;
      border-radius: 0.675rem;
      padding: 0.675rem 1rem;
      background: #2f3242;
      line-height: 2rem;
      font-weight: 600;
      font-family: 'Source Code Pro', monospace;
      color: white;
    }

    .void { color: #72adea; letter-spacing: 0.5px; }
    .str { color: #4dbd9a; }
    .global { color: #ec7979; }

    body {
      font: 14px / 1.5 Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .content {
      display: flex;
      flex-direction: column;
      align-items: center;

      width: 80%;
      max-width: 40rem;
      margin: 150px auto 0;
    }

    .spacer {
      min-height: 1500px;
    }
  </style>

</head>
<body>

  <div class="content">
    <h1 class="heading" >scrollpup.js</h1>

    <p class="randomtext">Shows scroll progress.</p>
    <p class="randomtext">Scroll this page downwards and see scrollpup in action.</p>

    <div class="small">
      <p>scrollpup.js is responsive and written in pure javascript and it weights around <strong>1kb</strong></p>
    </div>

    <code class="code">
      <span class="void">scrollpup</span>({<br/>
      &nbsp;&nbsp;<span class="global">background</span>: <span class="str">'#F00'</span>,<br/>
      &nbsp;&nbsp;<span class="global">height</span>: <span class="str">'20px'</span><br/>
      })
    </code>

    <div class="social-links">
      <iframe src="https://ghbtns.com/github-btn.html?user=flouthoc&type=follow&count=false" frameborder="0" scrolling="0" width="120px" height="20px"></iframe>
      <iframe src="https://ghbtns.com/github-btn.html?user=flouthoc&repo=scrollpup.js&type=watch&count=false" frameborder="0" scrolling="0" width="50px" height="20px"></iframe>
    </div>
  </div>

  <div class="spacer"></div>

  <script src="./dist/scrollpup.js"></script>
  <script type="text/javascript">
    scrollpup({
      background: 'linear-gradient(to right, #ff416c, #ff4b2b)'
    })
  </script>

</body>
</html>