anoopsinghtomar.github.io/main.js at main · anoopsinghtomar/anoopsinghtomar.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
const showMenu = (toggleId, navId) =>{
    const toggle = document.getElementById(toggleId),
    nav = document.getElementById(navId)

    if(toggle && nav){
        toggle.addEventListener('click', ()=>{
            nav.classList.toggle('show')
        })
    }
}
showMenu('nav-toggle','nav-menu')

// const fsAnimation = document.querySelectorAll('.fullScreenAnimation');

function addFsAnimation(){
    fsAnimation1 = ['🎈', '⭐', '🍂', '⭐', '🍂', '⭐', '🍂', '⭐', '🍂', '🎃', '⭐', '❄'];
    fsAnimation2 = ['🎉', '⭐', '🍂', '⭐', '🍂', '⭐', '🍂', '⭐', '🍂', '🧛', '⭐', '🎅'];
    fsAnimation3 = ['🎊', '⭐', '🍂', '⭐', '🍂', '⭐', '🍂', '⭐', '🍂', '👻', '⭐', '🎄'];

    month = new Date().getMonth();

    document.getElementById('animation_type_0').innerHTML = fsAnimation1[month];
    document.getElementById('animation_type_1').innerHTML = fsAnimation1[month];
    document.getElementById('animation_type_2').innerHTML = fsAnimation2[month];
    document.getElementById('animation_type_3').innerHTML = fsAnimation3[month];
    document.getElementById('animation_type_4').innerHTML = fsAnimation1[month];
    document.getElementById('animation_type_5').innerHTML = fsAnimation2[month];
    document.getElementById('animation_type_6').innerHTML = fsAnimation3[month];
    document.getElementById('animation_type_7').innerHTML = fsAnimation1[month];
    document.getElementById('animation_type_8').innerHTML = fsAnimation2[month];
    document.getElementById('animation_type_9').innerHTML = fsAnimation3[month];
}

addFsAnimation();

/* ACTIVE AND REMOVE MENU */
const navLink = document.querySelectorAll('.nav_link');

function linkAction(){
  /*Active link*/
  navLink.forEach(n => n.classList.remove('active'));
  this.classList.add('active');

  /*Remove menu mobile*/
  const navMenu = document.getElementById('nav-menu')
  navMenu.classList.remove('show')
}
navLink.forEach(n => n.addEventListener('click', linkAction));

const home = document.getElementById('home').offsetTop;
const about = document.getElementById('about').offsetTop;
const skills = document.getElementById('skills').offsetTop;
const projects = document.getElementById('work').offsetTop;
const contact = document.getElementById('contact').offsetTop;

/* UPDATE NAV WITH SCROLL*/
document.addEventListener('scroll', function(e){

    if(window.scrollY >= home && window.scrollY < about){
        navLink.forEach(n => n.classList.remove('active'));
        navLink[0].classList.add('active');
    }
    if(window.scrollY >= about && window.scrollY < skills){
        navLink.forEach(n => n.classList.remove('active'));
        navLink[1].classList.add('active');
    }
    if(window.scrollY >= skills && window.scrollY < projects){
        navLink.forEach(n => n.classList.remove('active'));
        navLink[2].classList.add('active');
    }
    if(window.scrollY >= projects && window.scrollY < contact - 200){
        navLink.forEach(n => n.classList.remove('active'));
        navLink[3].classList.add('active');
    }
    if(window.scrollY >= contact - 200){
        navLink.forEach(n => n.classList.remove('active'));
        navLink[4].classList.add('active');
    }
});

/* SCROLL REVEAL ANIMATION */
const sr = ScrollReveal({
    origin: 'top',
    distance: '80px',
    duration: 2000,
    reset: true
});

/*SCROLL HOME*/
sr.reveal('.home_title',{});
sr.reveal('.button',{delay: 200});
sr.reveal('.home_img',{delay: 400});
sr.reveal('.home_social-icon',{ interval: 200});

/*SCROLL ABOUT*/
sr.reveal('.about_img',{});
sr.reveal('.about_subtitle',{delay: 400});
sr.reveal('.about_text',{delay: 400});

/*SCROLL SKILLS*/
sr.reveal('.skills_subtitle',{});
sr.reveal('.skills_text',{});
sr.reveal('.skills_data',{interval: 200, origin: 'left'});
sr.reveal('.skills_img',{delay: 600});

/*SCROLL WORK*/
sr.reveal('.work_img',{interval: 200});

/*SCROLL CONTACT*/
sr.reveal('.contact_subtitle',{interval: 200});
sr.reveal('.link_github', {interval: 200, origin: 'left'})
sr.reveal('.link_linkedin', {interval: 200, origin: 'top'})
sr.reveal('.link_devto', {interval: 200, origin: 'right'})