-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (70 loc) · 1.76 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en-US">
<head>
<style>
* {
padding: 0;
margin: 0;
}
body {
max-width: 100vw;
min-height: 300vh;
}
#canvas {
max-width: 90vw;
height: 90vh;
display: flex;
justify-content: center;
align-items: center;
position: sticky;
top: 5vh;
left: 5vw;
overflow: hidden;
}
#canvas img {
max-width: 90vw;
height: 90vh;
object-fit: cover;
}
</style>
</head>
<body>
<div id="canvas">
<img src="example.svg" />
</div>
<script>
const elementIsVisibleInViewport = (el, partiallyVisible = false) => {
const { top, left, bottom, right } = el.getBoundingClientRect();
const { innerHeight, innerWidth } = window;
return partiallyVisible
? (
(top > 0 && top < (innerHeight * (partiallyVisible || 1))) ||
(bottom > 0 && bottom < innerHeight) ||
(top < 0 && bottom > innerHeight)
)
: (
(top >= 0 && bottom <= innerHeight) ||
(top < 0 && bottom > innerHeight)
);
};
const getElementPercentVisibility = (ele) => {
const { top, bottom } = ele.getBoundingClientRect();
const { innerHeight } = window;
let visibility = 0;
if(elementIsVisibleInViewport(ele, true)) {
visibility = (bottom < (bottom - top)) ? (bottom / (bottom - top))*100 : 100
}
return visibility;
};
const scroller = document.body;
const visual = scroller.querySelector(':scope img')
window.addEventListener('scroll', function() {
const visibility = getElementPercentVisibility(scroller)
if(visibility > 0) {
zoom = 90 + (100-visibility)
}
visual.style.height = zoom + 'vh'
})
</script>
</body>
</html>