-
Notifications
You must be signed in to change notification settings - Fork 3
/
dupabounc.js
46 lines (33 loc) · 1.08 KB
/
dupabounc.js
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
const objects = document.querySelectorAll('main > .bouncing')
const velocityX = 4, velocityY = 4
let width, height
const reset = () => {
width = window.innerWidth
height = window.innerHeight
objects.forEach(el => {
el.style.left = '50vw'
el.style.top = '50vh'
el.velocityX = 2 * (Math.random() - 0.5) * velocityX
el.velocityY = 2 * (Math.random() - 0.5) * velocityY
})
}
const bounce = el => {
let rect = el.getBoundingClientRect()
let left = rect.x
let top = rect.y
if (left + rect.width >= width || left <= 0) el.velocityX = -el.velocityX
if (top + rect.height >= height || top <= 0) el.velocityY = -el.velocityY
el.style.left = rect.x + el.velocityX + 'px'
el.style.top = rect.y + el.velocityY + 'px'
}
const frame = () => {
objects.forEach(el => bounce(el))
window.requestAnimationFrame(frame)
}
if ((new URLSearchParams(window.location.search)).has('gay')) {
document.querySelector('body').style.background =
'linear-gradient(#e74d5c, #ec7d6d, #f6bf71, #47ed8d, #3ec0d4, #746de8'
}
reset()
window.addEventListener('resize', reset)
window.requestAnimationFrame(frame)