add effect for progress by js

mhmd-salah · Feb 11, 2024 · 9b2280d · 9b2280d
1 parent 90568f6
commit 9b2280d
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 4 deletions.
diff --git a/css/style.css b/css/style.css
@@ -992,6 +992,7 @@ header .mega-menu .links li a i {
     left: 0;
     height: 100%;
     background-color: var(--main-color);
+    transition: width 2s linear;
 }
 
 /*! our-skills */

diff --git a/index.html b/index.html
@@ -22,6 +22,7 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;700&#038;display=swap" rel="stylesheet" />
+    <script src="main.js" defer></script>
 </head>
 
 <body>
@@ -637,25 +638,25 @@ <h2 class="main-title">Our Skills</h2>
                 <div class="skill">
                     <h3>HTML <span>80%</span></h3>
                     <div class="the-progress">
-                        <span style="width: 80%;"></span>
+                        <span style="width: 0;" data-width="80%" ></span>
                     </div>
                 </div>
                 <div class="skill">
                     <h3>CSS <span>55%</span></h3>
                     <div class="the-progress">
-                        <span style="width: 55%;"></span>
+                        <span style="width: 0%;" data-width="55%"></span>
                     </div>
                 </div>
                 <div class="skill">
                     <h3>JAVA SCRIPT <span>30%</span></h3>
                     <div class="the-progress">
-                        <span style="width: 30%;"></span>
+                        <span style="width: 0;" data-width="30%"></span>
                     </div>
                 </div>
                 <div class="skill">
                     <h3>PYTHON <span>85%</span></h3>
                     <div class="the-progress">
-                        <span style="width: 85%;"></span>
+                        <span style="width: 0;" data-width="85%"></span>
                     </div>
                 </div>
             </div>

diff --git a/main.js b/main.js
@@ -0,0 +1,10 @@
+let section = document.querySelector( ".our-skills" );
+let spans = document.querySelectorAll( ".the-progress span" );
+
+window.onscroll = function() {
+  if ( window.scrollY >= section.offsetTop ) {
+    spans.forEach( span => {
+      span.style.width = span.dataset.width
+    })
+  }
+}