blob: 833c97932db21451b04e2ad24284bcd97b6be0c7 (
plain) (
blame)
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
|
const counter = document.querySelector('.percent')
TweenLite.set(counter, {
xPercent: -5,
yPercent: -5
})
window.addEventListener('mousemove', moveCounter)
function moveCounter (e) {
TweenLite.to(counter, 0.5, {
x: e.clientX,
y: e.clientY
})
}
function progress () {
const windowScrollTop = $(window).scrollTop()
const docHeight = $(document).height()
const windowHeight = $(window).height()
const progress = (windowScrollTop / (docHeight - windowHeight)) * 100
const $bgColor = progress > 99 ? '#fff' : '#fff'
const $textColor = progress > 99 ? '#fff' : '#333'
$('h1')
.text(Math.round(progress) + '%')
.css({ color: $textColor })
$('.fill')
.height(progress + '%')
.css({ backgroundColor: $bgColor })
}
progress()
$(document).on('scroll', progress)
|