-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
219 lines (169 loc) · 9.53 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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta charset="utf-8" />
<script type="importmap">
{
"imports": {
"debug": "https://esm.sh/debug",
"center-center": "/assets/index.mjs",
"#center-center/common": "/assets/common/index.mjs",
"#center-center/dom": "/assets/dom/index.mjs",
"#center-center/svg": "/assets/svg/index.mjs"
}
}
</script>
<script type="module">
import debug from 'debug'
import {
createRects,
calculateLeft,
calculateTop
} from 'center-center'
const log = debug('center-center')
const resizeObserver = new ResizeObserver(handleResize)
function handleOrientationChange () {
log('orientationchange')
const container = document.querySelector('main')
const target = container.querySelector('.target')
render(container, target)
}
function handleScroll () {
log('scroll')
const container = document.querySelector('main')
const target = container.querySelector('.target')
render(container, target)
}
function handleResize () {
log('resize')
const container = document.querySelector('main')
const target = container.querySelector('.target')
render(container, target)
}
function handleDOMContentLoaded () {
log('DOMContentLoaded')
const container = document.querySelector('main')
resizeObserver.observe(container)
window.addEventListener('orientationchange', handleOrientationChange)
window.addEventListener('scroll', handleScroll)
document.addEventListener('scroll', handleScroll)
window.addEventListener('resize', handleResize)
document.addEventListener('resize', handleResize)
}
function render (container, target) {
log('render')
window.requestAnimationFrame(() => {
const rects = createRects(container, target)
const left = calculateLeft(rects)
const top = calculateTop(rects)
log('%d, %d', left, top)
const {
target: {
left: currentLeft,
top: currentTop
}
} = rects
if (currentLeft !== left) target.style.left = left + 'px'
if (currentTop !== top) target.style.top = top + 'px'
})
}
document.addEventListener('DOMContentLoaded', handleDOMContentLoaded)
</script>
<style>
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
font-size: 16px;
line-height: 1.5;
font-synthesis: none;
text-rendering: optimizelegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-size-adjust: 100%;
}
html {
overflow: auto
}
html,
body {
background-color: white;
min-height: 100vh;
min-height: 844px;
max-width: 100vw;
min-width: 390px;
margin: 0;
padding: 0;
border: none;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
header,
footer {
flex: 0 0 auto;
width: 100%;
padding: 2rem;
}
header h1 {
margin: 0
}
footer h2 {
margin: 0
}
main {
position: relative;
flex: 1;
background-color: #d3d3d3;
color: white;
padding: 2rem;
}
main p:first-child {
margin-top: 0;
}
main p:last-child {
margin-bottom: 0;
}
main .target {
position: absolute;
left: 0;
top: 0;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: gold;
overflow: hidden;
z-index: 1;
}
</style>
</head><body>
<div class="container">
<header>
<h1>Center Center</h1>
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec nulla metus. Vivamus quis nisi ut elit pretium consectetur. Aliquam erat volutpat. Curabitur ornare massa sed ligula pretium bibendum. Vivamus condimentum eget lectus a volutpat. Maecenas ut massa in est lacinia molestie eget non arcu. Donec condimentum tincidunt tellus ac pellentesque. Curabitur augue nunc, vestibulum non aliquet eu, bibendum quis urna. Mauris volutpat vitae enim nec lobortis. Proin vitae nisl ac libero finibus pretium. Fusce ac lorem sed ex aliquet volutpat. Nullam vel est ut massa pharetra posuere. Aliquam sem ipsum, egestas eu velit auctor, ullamcorper laoreet est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; In accumsan mauris nec sem ultrices ullamcorper.</p>
<p>Maecenas feugiat risus ipsum, at facilisis dui molestie at. Curabitur eros diam, suscipit vitae sem sit amet, rhoncus varius arcu. Donec ultrices nisi nec scelerisque ornare. Nunc placerat tellus quis diam lobortis rhoncus. Proin convallis ultricies sollicitudin. Cras dictum lorem arcu, sit amet congue leo semper at. Etiam ultricies maximus velit, id facilisis orci suscipit eu. Fusce velit odio, consectetur ut laoreet quis, lobortis eu purus. Aliquam vel porttitor odio.</p>
<p>Maecenas eget lacus cursus justo accumsan pharetra vitae non purus. Nam risus risus, varius id lacus id, vestibulum porta turpis. Vestibulum varius odio ac purus viverra molestie. Nulla semper lectus non volutpat pharetra. Cras sed turpis eu lacus pharetra elementum id vitae dui. Praesent auctor felis a risus ultrices, quis aliquam velit auctor. Sed sagittis non augue in imperdiet. Aenean eget commodo urna. Mauris varius pulvinar nulla, vel aliquet justo malesuada eget. Pellentesque efficitur est at nunc rhoncus, sed ultrices lectus venenatis.</p>
<p>Mauris erat lorem, lobortis quis ligula et, commodo malesuada sem. Quisque pulvinar nec orci at vehicula. Donec a tempor nisl. Nam nec nibh cursus odio auctor pretium. Maecenas elementum in ante vitae venenatis. In bibendum tristique augue, in rhoncus neque semper eu. Aliquam rhoncus dignissim fermentum. Donec finibus neque velit, eget interdum nunc condimentum eu. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ornare metus nisl, eget vulputate massa auctor id. Fusce tincidunt eros sit amet sapien gravida, a lacinia quam laoreet.</p>
<p>Suspendisse ut tortor vel libero facilisis hendrerit quis vel mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet justo eget mauris lobortis luctus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc non lectus maximus, ultrices mauris sollicitudin, aliquet diam. Cras suscipit eros ac sagittis malesuada. Curabitur auctor ex sit amet metus imperdiet consequat. Aenean accumsan dictum augue. Etiam massa ex, mollis vitae tempus sed, ultricies ac sapien. Donec eu laoreet nisl. Nullam suscipit tincidunt eleifend.</p>
<p>Nam sed nisi id lacus lacinia ultrices efficitur ut dolor. Nam quis nibh porttitor, dictum magna tincidunt, tristique leo. Praesent vitae est ultricies, feugiat felis ac, euismod massa. In finibus, enim in feugiat fermentum, ante felis luctus turpis, et finibus risus metus sed mauris. Donec aliquet rutrum orci, et aliquam nisl rhoncus et. Integer dignissim lacus vitae egestas interdum. Aliquam semper eros eget eros viverra, quis placerat ex ultricies. Suspendisse tempor, justo a facilisis tempus, erat dui imperdiet orci, vel ullamcorper libero eros eu risus. Suspendisse mattis arcu arcu, ut rhoncus lacus semper sed.</p>
<p>Maecenas tempus lorem quam, sed aliquet erat rhoncus quis. In nibh eros, suscipit id accumsan et, dictum nec neque. Sed vitae ipsum et nisl dignissim molestie. Quisque eu auctor quam. Vestibulum sagittis lobortis ante, eu laoreet arcu pretium eu. In consectetur nisl semper bibendum venenatis. Phasellus non sollicitudin lacus, non efficitur dui. Proin scelerisque nunc ut venenatis sagittis. Integer faucibus diam non tortor pulvinar rutrum.</p>
<p>Cras fermentum tortor iaculis turpis placerat pellentesque. Curabitur tristique suscipit lorem, et ullamcorper leo faucibus ac. Nullam sit amet nulla eget arcu porttitor interdum eget in ante. Suspendisse tincidunt est et posuere porttitor. Pellentesque non turpis justo. Nunc malesuada ex vel risus pretium sodales. Donec quis condimentum est. Mauris bibendum egestas massa, nec malesuada nulla lobortis eu.</p>
<p>Sed a lectus feugiat, porttitor turpis ac, porta dui. Duis egestas elementum scelerisque. Pellentesque placerat interdum tortor, id hendrerit tellus tempor sed. Donec eu sapien nulla. Morbi convallis luctus rutrum. Nulla eget ex vel libero maximus vestibulum. Nam pretium maximus porttitor. Vestibulum porta, tellus ut posuere sodales, felis turpis scelerisque lorem, sed venenatis metus nibh ac velit. Donec vitae sollicitudin augue. Proin id ex et odio facilisis facilisis eu ac lectus. Morbi rutrum a metus vel eleifend. Vivamus convallis eros rutrum lectus vestibulum viverra. Sed fringilla pharetra nunc placerat rutrum.</p>
<p>Nullam auctor augue non tempus porta. Aliquam ante odio, dapibus id purus a, consequat ullamcorper dui. Nunc sodales metus felis, id volutpat lectus imperdiet eu. In lorem diam, luctus a neque convallis, suscipit luctus tortor. Duis tortor sapien, convallis eget placerat quis, volutpat nec velit. Quisque aliquam nunc orci, pharetra placerat orci gravida vitae. Donec eget congue mi. Pellentesque tellus risus, dictum ac ultrices nec, luctus eu mi. Proin sit amet blandit magna. Quisque diam est, rhoncus ut dictum eu, facilisis a ex. Aenean sed nisi sagittis, suscipit magna eu, congue neque. Donec porttitor sapien massa, sit amet pretium turpis rhoncus non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<div class="target">
</div>
</main>
<footer>
<h2>Center Center</h2>
</footer>
</div>
</body>
</html>