ningqung.github.io/script.js at main · NingQung/ningqung.github.io · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
//2023/04/12 還沒整理

const main = document.querySelector("main");
const nav = document.querySelector("nav");
const nav_li = document.querySelectorAll("li");
const nav_nav = document.getElementById("nav_nav");
const mainSec = document.querySelectorAll("main section");
const cursor_circle = document.getElementById("cursor_circle");
const cursor_bar = document.querySelectorAll("div.cursorbar");
const transition_duration = 600;
var canscroll = false;
var cantouchmove = 0;
var mainPos=0;
var isload = 0;

//#region initialize
window.onload = () =>{
  setTimeout(() => {
    load_screen.className = "loadComplete";
    canscroll = true;
  }, 6000);
  nav_display("home");
  ms_display(0);
}
//#endregion

window.addEventListener('wheel',e =>{
  if(canscroll){
    canscroll = false;

    if(e.deltaY > 0){//down
      if(mainPos<4){
        mainPos++;
      }
    }else{//up
      if(mainPos>0){
        mainPos--;
      }

    }
    console.log(mainPos);
    nav_display(mainSec[mainPos].id);
    ms_display(mainPos);
    navtext_display(mainPos);
    setTimeout(()=>{
      canscroll = true;
    },transition_duration);
  }
  //scroll_anifunc(e.pageX,e.pageY,1);
});
// let pre_touch;
// window.addEventListener('touchmove',e=>{
//   cantouchmove++
//   if(cantouchmove==1){
//     pre_touch = e.touches[0].clientY;
//   }else if(cantouchmove==2){
//     if(pre_touch - e.touches[0].clientY>0){
//       if(mainPos<4){
//         mainPos++;
//       }
//     }else{
//       if(mainPos>0){
//         mainPos--;
//       }
//     }
//     main.style.top = `${mainPos*-100}vh`;
//     setTimeout(()=>{
//       cantouchmove = 0;
//     },transition_duration);
//   }
// });
nav_li.forEach(function(e,index){
  e.addEventListener('click',()=>{
    nav_display(e.id);
    mainPos = index;
    ms_display(mainPos);
    navtext_display(index);
  })
});
function nav_display(e){
  nav_nav.className = `in_${e}`;
}
function ms_display(e){
  switch(e){
    case 0:
      main.className = "in_home";
      break;
    case 1:
      main.className = "in_profile";
      break;
    case 2:
      main.className = "in_project";
      break;
    case 3:
      main.className = "in_dayLog";
      break;
    case 4:
      main.className = "in_contact";
      break;
  }
}
function navtext_display(e){
  for(var i=0;i<5;i++){
    if(i == e){
      nav_li[i].className = "nav_active";
    }else{
      nav_li[i].className = "";
    }
  }
}


var cancursor=true
window.addEventListener('mousedown' , e =>{
  if(e.button == 1){
    e.preventDefault();
    e.stopPropagation();
    return false;
  }else if(e.button == 0 && cancursor){
    cancursor = false;
    cursor_circle.className = "cursor_active";
    cursor_circle.style.top = e.y+"px";
    cursor_circle.style.left = e.x+"px";
    setTimeout(()=>{
      cursor_circle.className = "";
      cancursor = true;
    },500);
  }
})//
let cursor_p=[{x:0,y:0},{x:0,y:0},{x:0,y:0}];
window.addEventListener("mousemove",e=>{
  cursor_p[0].x=e.pageX;
  cursor_p[0].y=e.pageY;
  if(isload == 0){
    cursor_bar.forEach(e=>{
      e.style.opacity = 1;
    })
    isload = 1;
  }
})
function cursorEff (){
  cursor_bar.forEach(function(e,index){
    e.style.top = cursor_p[index].y +index*15+"px";
    e.style.left =cursor_p[index].x +index*5+"px";
  })
  cursor_p[2].x=(cursor_p[2].x-cursor_p[1].x)*0.3 +cursor_p[1].x;
  cursor_p[2].y=(cursor_p[2].y-cursor_p[1].y)*0.3 +cursor_p[1].y;
  cursor_p[1].x=(cursor_p[1].x-cursor_p[0].x)*0.3 +cursor_p[0].x;
  cursor_p[1].y=(cursor_p[1].y-cursor_p[0].y)*0.3 +cursor_p[0].y;
}
function cursoranimate(){
  cursorEff();
  window.requestAnimationFrame(cursoranimate);
}
cursoranimate();