https://first-portfolio-kunalverma.netlify.app/assets/js/index.js

1
2
3//  navbar js codes
4
5const menu_btun =  document.querySelector('.menu-bar');
6const navbar = document.querySelector('.navbar-sec');
7const lists = document.querySelector('.nav-lists');
8
9const toggleNav = () => {
10
11    menu_btun.classList.toggle('active');
12    navbar.classList.toggle('toggle');
13    lists.classList.toggle('animate');
14    
15}
16
17
18
19menu_btun.addEventListener("click", () => toggleNav());
20
21
22// -----------------------------------------------
23
24const cursorpoint =  document.querySelector('[data-cursor]');
25
26window.addEventListener('mousemove', function (e){
27
28    const posX =  e.clientX ;
29    const posY =  e.clientY ;
30
31    cursorpoint.style.left = `${posX}px`;
32    cursorpoint.style.top =  `${posY}px`;
33
34    cursorpoint.animate({
35        left : `${posX}px`,
36        top : `${posY}px`
37    }, {duration: 1000 , fill: "forwards"})
38    
39})
40
41
42// -------------------------------------------
43
44$('.serv-carousel').owlCarousel({
45    loop:true,
46    margin:12,
47    nav:false,
48    autoplay: true,
49    dots: false,
50    responsive:{
51        0:{
52            items:1
53        },
54        767:{
55            items:1
56        },
57
58        1000:{
59            items:2
60        },
61
62        1123:{
63            items:2
64        },
65
66        1150: {
67            items: 3
68        }
69
70    }
71})
72
73// ------------------------------------------------------
74
75    const scrollRevealEle =  document.querySelectorAll('[data-reveal]');
76
77    const scrollReveal = function () {
78
79        for(let i = 0;  i<scrollRevealEle.length; i++){
80
81            const revealElemonscreen =  scrollRevealEle[i].getBoundingClientRect().top < window.innerHeight ;
82
83            if(revealElemonscreen){
84                scrollRevealEle[i].classList.add('revealed');
85            }
86            else{
87                scrollRevealEle[i].classList.remove('revealed');
88            }
89            
90        }
91        
92    }
93
94    window.addEventListener("scroll", scrollReveal);
95
96    // ----------------------------------------------------
97
98
99    $('.ptfolio-carousel').owlCarousel({
100        loop:true,
101        margin:12,
102        nav:false,
103        dots: false,
104        responsive:{
105            0:{
106                items:1
107            },
108            767:{
109                items:1
110            },
111    
112            1000:{
113                items:2
114            },
115    
116            1123:{
117                items:3
118            },
119    
120            1150: {
121                items: 3
122            }
123    
124        }
125    })
126
127
128    // ----------------------------------------------------
129
130    const header =  document.querySelector('.header-sec');
131
132    const stickyNavbar = () => {
133
134        header.classList.toggle('sticky', window.scrollY > 100);
135        
136    }
137
138
139    window.addEventListener("scroll", () => stickyNavbar());
140
141
142    // --------------------------------------------------
143
144
145    const preloader =  document.querySelector('.preloader')
146
147    window.addEventListener("DOMContentLoaded", function (){
148
149        preloader.classList.add('loaded');
150        document.body.classList.add('loaded')
151        
152    })
153
154
155
156