blob: 8fc760998448921857299efe7fdb72d797e6682c (
plain)
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
|
// Lifted this from Erik
// https://github.com/uvicwebdev/javascript-intro/blob/master/webdev_logo/js/main.js
function computeRgb(x, y, width, height) {
let r = Math.floor((x / width) * 255) + 5
let g = Math.floor((y / height) * 255) + 5
let b = Math.floor((r + g) / 2)
return `rgb(${r},${g},${b})`
}
// This will be an array of nodes since we are
// using class name (array may have length 0 or 1)
let attentionNodes
// Make sure we wait until the page is ready.
// Querying the DOM before the page is ready
// will result in queries returning null/empty array
window.onload = function() {
attentionNodes = document.getElementsByClassName('attention')
}
document.onmousemove = function(event) {
// calculate the color once (will be used
// for all nodes)
let color = computeRgb(
event.pageX,
event.pageY,
window.innerWidth,
window.innerHeight
)
// iterate over each node and update its style
for (let node of attentionNodes) {
node.style.color = color
}
}
|
