amity/pointer.js at main · navya2006/amity · 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
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
window.onload = function () {
    const trailer = document.getElementById("trailer");
};
function getid(obj) {
  window.elem=(obj.id);
}
const animateTrailer = (e, interacting, boxt, nextbox) => {
  const x = e.clientX - trailer.offsetWidth / 2,
        y = e.clientY - trailer.offsetHeight / 2;
  var act=document.getElementById(window.elem);
  var keyframes = {
    transform: `translate(${x}px, ${y}px) scale(${interacting ? 8 : 1})`,
    height:`20px`,
    width:`20px`,
    borderRadius:"0",
    backgroundColor:"transparent",
  }

  if (boxt){
    var idk=act.getBoundingClientRect().left
    var idk21=act.getBoundingClientRect().top
    var height=act.getBoundingClientRect().height
    var width=act.getBoundingClientRect().width
    var keyframes ={
      transform: `translate(${idk}px, ${idk21}px)`,
      height:`${height}px`,
      width:`${width}px`,
      borderRadius:"0px",
      backgroundColor:"#fff",
    }
  }
  else if(nextbox){
    var idk=act.getBoundingClientRect().left
    var idk21=act.getBoundingClientRect().top
    var height=act.getBoundingClientRect().height
    var width=act.getBoundingClientRect().width
    var keyframes ={
      transform: `translate(${idk}px, ${idk21}px)`,
      height:`${height}px`,
      width:`${width}px`,
      borderRadius:"0px",
      backgroundColor:"transparent",
    }
  }
  trailer.animate(keyframes, {
    duration: 400,
    fill: "forwards"
  });
}

const getTrailerClass = type => {
  switch(type) {
    case "video":
      return "fa-solid fa-play";
    case "button":
        return "blank"
    default:
      return "fa-solid fa-arrow-up-right";
  }
}

window.onmousemove = e => {
  const interactable = e.target.closest(".interactable"),
        interacting = interactable !== null;
  const box= e.target.closest(".interactab") ,
        boxt=box!== null;
  const nex= e.target.closest(".next-box"),
        nextbox=nex!== null;
  const icon = document.getElementById("trailer-icon");

  animateTrailer(e, interacting, boxt, nextbox);

  trailer.dataset.type = interacting ? interactable.dataset.type : "";

  if(interacting) {
    icon.className = getTrailerClass(interactable.dataset.type);
  }
}

function hovfect(ye){
  var siu=ye.firstElementChild;
  siu.style.color="black";
  siu.style.cursor="default";
}
function gofect(ye){
  var siu=ye.firstElementChild;
  siu.style.color="white";
}