add animação de fundo

zzmarques · Oct 2, 2024 · fe1d916 · fe1d916
1 parent 0edae52
commit fe1d916
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 39 deletions.
diff --git a/index.html b/index.html
@@ -4,11 +4,14 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <script src="https://kit.fontawesome.com/9e387b38a0.js" crossorigin="anonymous"></script>
+    <script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
+    <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
     <link rel="stylesheet" href="src/css/style.css">
     <link rel="stylesheet" href="src/css/responsivo.css">
     <title>Walace DEV | Portfólio  </title>
 </head>
 <body>
+    <div id="particles-js"></div>
     <header class="hidden" id="#">
         <div id="menu-hamburguer">
             <i class="fa-solid fa-bars"></i>

diff --git a/src/css/style.css b/src/css/style.css
@@ -455,6 +455,13 @@ main {
   transition: all 1s;
 }
 
+#particles-js {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+}
+
+
 
 
 
diff --git a/src/js/index.js b/src/js/index.js
@@ -6,15 +6,15 @@ const openMenu = () => {
     const navBar = document.getElementById('nav');
     const links = document.querySelectorAll('#nav a');
     const header = document.querySelector('header')
-    
+
     const open = () => {
         navBar.style.display = 'flex';
         btnOpen.style.display = 'none';
         btnClose.style.display = 'block';
         document.querySelector('main').style.filter = 'brightness(40%)'
         header.classList.remove('hidden')
         header.classList.remove('show')
-        
+
     }
 
     const close = () => {
@@ -34,7 +34,7 @@ const openMenu = () => {
     links.forEach(link => {
         link.addEventListener('click', close);
     });
-    
+
 
 }
 
@@ -60,10 +60,10 @@ const openProject = () => {
     }
 
     cards.forEach((cards, index) => {
-        const idUnico = `meu-id${index + 1}` 
+        const idUnico = `meu-id${index + 1}`
         cards.id = idUnico
         cards.addEventListener('mouseover', () => {
-                mouseOver(cards)
+            mouseOver(cards)
         })
     })
 
@@ -79,89 +79,89 @@ const openProject = () => {
 openProject()
 
 const openInfoProject = (description) => {
-   const btn = description.querySelector('span')
-   const divProject = document.querySelector('.sobre-projct')
-   const btnClose = document.querySelector('#close')
+    const btn = description.querySelector('span')
+    const divProject = document.querySelector('.sobre-projct')
+    const btnClose = document.querySelector('#close')
+
+    const showInfo = (btn) => {
 
-   const showInfo = (btn) => {
-
-        if(btn.id === 'meu-id1' ) {
+        if (btn.id === 'meu-id1') {
             document.body.style.overflow = 'hidden'
-            divProject.insertAdjacentHTML('beforeend', projects.space) 
+            divProject.insertAdjacentHTML('beforeend', projects.space)
             divProject.style.display = 'flex'
-        }else if(btn.id === 'meu-id2') {
+        } else if (btn.id === 'meu-id2') {
             document.body.style.overflow = 'hidden'
-            divProject.insertAdjacentHTML('beforeend', projects.advice) 
+            divProject.insertAdjacentHTML('beforeend', projects.advice)
             divProject.style.display = 'flex'
-        } else if(btn.id === 'meu-id3') {
+        } else if (btn.id === 'meu-id3') {
             document.body.style.overflow = 'hidden'
-            divProject.insertAdjacentHTML('beforeend', projects.sneakers) 
+            divProject.insertAdjacentHTML('beforeend', projects.sneakers)
             divProject.style.display = 'flex'
-        } else if(btn.id === 'meu-id4') {
+        } else if (btn.id === 'meu-id4') {
             document.body.style.overflow = 'hidden'
-            divProject.insertAdjacentHTML('beforeend', projects.calc) 
+            divProject.insertAdjacentHTML('beforeend', projects.calc)
             divProject.style.display = 'flex'
         } else if (btn.id === 'meu-id5') {
             document.body.style.overflow = 'hidden'
-            divProject.insertAdjacentHTML('beforeend', projects.bank) 
+            divProject.insertAdjacentHTML('beforeend', projects.bank)
             divProject.style.display = 'flex'
         } else if (btn.id === 'meu-id6') {
             document.body.style.overflow = 'hidden'
-            divProject.insertAdjacentHTML('beforeend', projects.fylo) 
+            divProject.insertAdjacentHTML('beforeend', projects.fylo)
             divProject.style.display = 'flex'
         } else if (btn.id === 'meu-id7') {
             document.body.style.overflow = 'hidden'
-            divProject.insertAdjacentHTML('beforeend', projects.card) 
+            divProject.insertAdjacentHTML('beforeend', projects.card)
             divProject.style.display = 'flex'
-        } else if (btn.id === 'meu-id8'){
+        } else if (btn.id === 'meu-id8') {
             document.body.style.overflow = 'hidden'
-            divProject.insertAdjacentHTML('beforeend', projects.countries) 
+            divProject.insertAdjacentHTML('beforeend', projects.countries)
             divProject.style.display = 'flex'
         } else {
             return
         }
-  
+
     }
 
-   const choseInfo = () => {
+    const choseInfo = () => {
         const infoProject = document.querySelector('.info-pro')
         const links = document.querySelector('.links')
 
         divProject.style.display = 'none'
         document.body.style.overflow = 'auto'
         infoProject.remove()
         links.remove()
-   }
+    }
 
-   btn.addEventListener('click', () => {
+    btn.addEventListener('click', () => {
 
         const description = document.querySelectorAll('.description span')
 
         description.forEach((des, index) => {
-            const idUnico = `meu-id${index + 1}` 
+            const idUnico = `meu-id${index + 1}`
             des.id = idUnico
         })
 
         const cards = document.querySelectorAll('.cards');
-            cards.forEach((cards) => {
-                cards.removeAttribute('id')
+        cards.forEach((cards) => {
+            cards.removeAttribute('id')
         })
 
         showInfo(btn)
 
-   })
+    })
 
-   btnClose.addEventListener('click', () => {
+    btnClose.addEventListener('click', () => {
         choseInfo()
-   })   
+    })
 
 }
 
 const animateScroll = () => {
-    
-    const myObserve = new IntersectionObserver( (enties) => {
-        enties.forEach( (entry) => {
-            if(entry.isIntersecting) {
+
+    const myObserve = new IntersectionObserver((enties) => {
+        enties.forEach((entry) => {
+            if (entry.isIntersecting) {
                 entry.target.classList.add('show')
             } else {
                 entry.target.classList.remove('show')
@@ -171,10 +171,12 @@ const animateScroll = () => {
 
     const elements = document.querySelectorAll('.hidden')
 
-    elements.forEach( (element) => myObserve.observe(element))
+    elements.forEach((element) => myObserve.observe(element))
 }
 
-animateScroll()
+animateScroll();
+
+particlesJS("particles-js", { "particles": { "number": { "value": 160, "density": { "enable": true, "value_area": 800 } }, "color": { "value": "#ffffff" }, "shape": { "type": "circle", "stroke": { "width": 0, "color": "#000000" }, "polygon": { "nb_sides": 5 }, "image": { "src": "img/github.svg", "width": 100, "height": 100 } }, "opacity": { "value": 1, "random": true, "anim": { "enable": true, "speed": 1, "opacity_min": 0, "sync": false } }, "size": { "value": 3, "random": true, "anim": { "enable": false, "speed": 4, "size_min": 0.3, "sync": false } }, "line_linked": { "enable": false, "distance": 150, "color": "#ffffff", "opacity": 0.4, "width": 1 }, "move": { "enable": true, "speed": 1, "direction": "none", "random": true, "straight": false, "out_mode": "out", "bounce": false, "attract": { "enable": false, "rotateX": 600, "rotateY": 600 } } }, "interactivity": { "detect_on": "canvas", "events": { "onhover": { "enable": false, "mode": "bubble" }, "onclick": { "enable": false, "mode": "repulse" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 250, "size": 0, "duration": 2, "opacity": 0, "speed": 3 }, "repulse": { "distance": 400, "duration": 0.4 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true }); var count_particles, stats, update; stats = new Stats; stats.setMode(0); stats.domElement.style.position = 'absolute'; stats.domElement.style.left = '0px'; stats.domElement.style.top = '0px'; document.body.appendChild(stats.domElement); count_particles = document.querySelector('.js-count-particles'); update = function () { stats.begin(); stats.end(); if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) { count_particles.innerText = window.pJSDom[0].pJS.particles.array.length; } requestAnimationFrame(update); }; requestAnimationFrame(update);;