profile-prof/script.js at master · Guedeloni/profile-prof · GitHub

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
function move(event) {
  // let X = event.clientX || event.touches[0].clientX;
  // let Y = event.clientY || event.touches[0].clientY;
  let X = event.clientX;
  let Y = event.clientY;
  document.documentElement.style.setProperty ('--X', X + 'px');
  document.documentElement.style.setProperty ('--Y', Y + 'px');
}

let header = document.getElementById('header');
let card1 = document.getElementById('card1');
let card2 = document.getElementById('card2');
let footer = document.getElementById('footer');

card2.addEventListener('mousemove', (event) => {
  console.log("********card2 hover**********");
  document.documentElement.style.setProperty ('--OPACITY', 1);
  document.documentElement.style.setProperty ('--DISPLAY', 'block');
  move(event);
});

header.addEventListener('mouseover', (event) => {
  console.log("********card2 not hover**********");
  document.documentElement.style.setProperty ('--OPACITY', 0.1);
  document.documentElement.style.setProperty ('--DISPLAY', 'none');
});
card1.addEventListener('mouseover', (event) => {
  console.log("********card2 not hover**********");
  document.documentElement.style.setProperty ('--OPACITY', 0.1);
  document.documentElement.style.setProperty ('--DISPLAY', 'none');
});
footer.addEventListener('mouseover', (event) => {
  console.log("********card2 not hover**********");
  document.documentElement.style.setProperty ('--OPACITY', 0.1);
  document.documentElement.style.setProperty ('--DISPLAY', 'none');
});

// blackout.addEventListener('touchpad', move);