-
Everything is rainbow once
() => {
let all = selectAll('body *:not(#appxxx)')
all.forEach((el, i) => {
let angle = (i*30 + Date.now()*0.1)%360
let crazyColor = `hsl(${angle}, 100%, 50%)`
setStyle(el, 'background-color', crazyColor)
setStyle(el, 'fill', crazyColor)
})
}
-
Everything is rainbow all the time
() => {
runForever(() => {
let all = selectAll('body *:not(#appxxx)')
all.forEach((el, i) => {
let angle = (i*30 + Date.now()*0.1)%360
let crazyColor = `hsl(${angle}, 100%, 50%)`
setStyle(el, 'background-color', crazyColor)
setStyle(el, 'fill', crazyColor)
})
}, 20)
}
-
Everything is spinning
() => {
runForever(() => {
let all = selectAll('body *')
all.forEach((el, i) => {
let angle = (i*30 + Date.now()*0.01)%360
setStyle(el, 'transform-origin', 'center center')
setStyle(el, 'transform', `rotate(${angle}deg`)
})
}, 100)
}
-
Click to spin
() => {
whenMouseClicks((e) => {
let el = getElementAt(e.clientX, e.clientY)
if (el) {
let angle = (Date.now() + Math.random()*360)%360
setStyle(el, 'transition', 'transform 1s')
setStyle(el, 'transform-origin', 'center center')
setStyle(el, 'transform', `rotate(${angle}deg`)
}
})
}
-
Click rainbows
() => {
whenMouseClicks((e) => {
let el = getElementAt(e.clientX, e.clientY)
let angle = (Date.now()*0.1)%360
let crazyColor = `hsl(${angle}, 100%, 50%)`
setStyle(el, 'background', crazyColor)
setStyle(el, 'fill', crazyColor)
})
}
-
Click to fall
() => {
whenMouseClicks((e) => {
let el = getElementAt(e.clientX, e.clientY)
setStyle(el, 'transition', 'all 1s')
setStyle(el, 'transform', 'translate(0, 100vh)')
})
}
-
Bubbles
() => {
let ball = [
random(0.2, 0.8),
random(0.2, 0.8)
]
let ballEl = createElement('div', {
'data-x': ball[0], 'data-y': ball[1],
'style': `
z-index: 999;
position: fixed;
border: solid 1vw hsl(${random(0, 360)}, 100%, 50%);
left: ${100*ball[0]}%;
top: ${100*ball[1]}%;
width: 5vw;
height: 5vw;
border-radius: 5vw;
`
})
document.body.appendChild(ballEl)
let vel = [
random(-0.002, 0.002),
random(-0.002, 0.002)
]
runForever(() => {
let x = parseFloat(ballEl.dataset.x)
let y = parseFloat(ballEl.dataset.y)
x += vel[0]
y += vel[1]
ballEl.style.top = `${y*100}%`
ballEl.style.left = `${x*100}%`
ballEl.dataset.x = x
ballEl.dataset.y = y
}, 20)
}
-
Bouncy ball
() => {
let ball = [
random(0.2, 0.8),
random(0.2, 0.8)
]
let ballEl = createElement('div', {
'data-x': ball[0], 'data-y': ball[1],
'style': `
z-index: 999;
position: fixed;
border: solid 1vw hsl(${random(0, 360)}, 100%, 50%);
left: ${100*ball[0]}%;
top: ${100*ball[1]}%;
transform: translate(-50%, -50%);
width: 5vw;
height: 5vw;
border-radius: 5vw;
`
})
document.body.appendChild(ballEl)
let vel = [
random(-0.002, 0.002),
random(-0.002, 0.002)
]
runForever(() => {
let x = parseFloat(ballEl.dataset.x)
let y = parseFloat(ballEl.dataset.y)
if (x + vel[0] < 0.1 || x + vel[0] > 0.9) {
vel[0] *= -1
}
if (y + vel[1] < 0.1 || y + vel[1] > 0.9) {
vel[1] *= -1
}
x += vel[0]
y += vel[1]
ballEl.style.top = `${y*100}%`
ballEl.style.left = `${x*100}%`
ballEl.dataset.x = x
ballEl.dataset.y = y
}, 20)
}
-
Wrecking ball
() => {
let ball = [
random(0.2, 0.8),
random(0.2, 0.8)
]
let ballEl = createElement('div', {
'data-x': ball[0], 'data-y': ball[1],
'style': `
z-index: 999;
position: fixed;
border: solid 1vw hsl(${random(0, 360)}, 100%, 50%);
left: ${100*ball[0]}%;
top: ${100*ball[1]}%;
transform: translate(-50%, -50%);
width: 5vw;
height: 5vw;
border-radius: 5vw;
`
})
document.body.appendChild(ballEl)
let vel = [
random(-0.002, 0.002),
random(-0.002, 0.002)
]
runForever(() => {
let x = parseFloat(ballEl.dataset.x)
let y = parseFloat(ballEl.dataset.y)
if (x + vel[0] < 0.1 || x + vel[0] > 0.9) {
vel[0] *= -1
}
if (y + vel[1] < 0.1 || y + vel[1] > 0.9) {
vel[1] *= -1
}
x += vel[0]
y += vel[1]
ballEl.style.top = `${y*100}%`
ballEl.style.left = `${x*100}%`
ballEl.dataset.x = x
ballEl.dataset.y = y
let bounds = ballEl.getBoundingClientRect()
let allUnder = getAllElementsAt(
bounds.left + (bounds.width/2),
bounds.top + (bounds.height/2)
)
allUnder.forEach((under) => {
if (under != ballEl) {
switch (under.tagName.toLowerCase()) {
case 'button':
case 'pre':
case 'code':
case 'li':
case 'table':
case 'img':
case 'a':
case 'p':
case 'h1':
case 'h2':
case 'h3':
case 'h4':
case 'h5':
case 'span':
case 'g':
case 'path':
case 'circle':
case 'rect':
under.remove()
break
}
}
})
}, 20)
}
-
Click to WASD
() => {
whenMouseClicksOnce((e) => {
let el = getElementAt(e.clientX, e.clientY)
el.style.transition = 'all 0.2s'
let position = [0, 0]
whenKeyIsPressed('d', (e) => {
position[0] += 20
el.style.transform = `translate(
${position[0]}px,
${position[1]}px
)`
})
whenKeyIsPressed('a', (e) => {
position[0] -= 20
el.style.transform = `translate(
${position[0]}px,
${position[1]}px
)`
})
whenKeyIsPressed('s', (e) => {
position[1] += 20
el.style.transform = `translate(
${position[0]}px,
${position[1]}px
)`
})
whenKeyIsPressed('w', (e) => {
position[1] -= 20
el.style.transform = `translate(
${position[0]}px,
${position[1]}px
)`
})
})
}
-
Click to follow the mouse
() => {
whenMouseClicksOnce((e) => {
let el = getElementAt(e.clientX, e.clientY)
if (!el) return false
el.style.transition = 'all 0.2s'
let pos = [ 0, 0 ]
let mouse = [ 0, 0 ]
whenMouseMoves((m) => {
mouse = [m.clientX, m.clientY]
})
runForever(() => {
let bounds = el.getBoundingClientRect()
let distance = [
mouse[0] - bounds.left,
mouse[1] - bounds.top
]
pos[0] = pos[0] + distance[0]*0.1
pos[1] = pos[1] + distance[1]*0.1
el.style.transform = `translate(
${pos[0]}px,
${pos[1]}px
)`
}, 20)
})
}