create animation in oscured class

Author: carlosjorger

css/navbar.css

@@ -63,7 +63,7 @@
   padding: 0em;
   margin-top: 0;
   background-color: rgb(38, 26, 50);
-  width: 60%;
+  width: 70%;
   z-index: 3;
   left: -100vw;
   list-style-type: none;  
@@ -74,9 +74,7 @@
 
 #nav-columnar-menu.active {
   transition: all 0.8s ease-in;
-  width: 60%;
   left: 0;
-
   height: 100vh;
 }
 

css/styles.css

@@ -6,6 +6,7 @@
   background-color: rgb(9, 3, 15);
   font-size: 25px;
   scroll-behavior: smooth;
+  -webkit-tap-highlight-color: rgba(0,0,0,0)
 }
 
 /* || GENERAL STYLES */
@@ -45,12 +46,6 @@ section {
 
 }
 
-.opacity-effect {
-  filter: opacity(50%);
-  -webkit-filter:  opacity(50%) ;
-  /* backdrop-filter: opacity(20%) grayscale(70%); */
-}
-
 
 article {
   padding: 2.5em;
@@ -74,6 +69,15 @@ i {
 
 
 /* || UTILITIES */
+.oscured{
+  transition: all 0.3s ease-in;
+}
+.oscured.opacity-effect {
+  filter: opacity(50%);
+  -webkit-filter:  opacity(50%) ;
+  transition: all 0.8s ease-in;
+
+}
 
 .reveal {
   opacity: 0;
@@ -140,7 +144,9 @@ i {
   transition: all 0.5s ease-in-out;
 
 }
-
+.work-link:active{
+  background-color: transparent;
+}
 .work-link:visited {
   color: var(--default-secundary-font-color);
   text-decoration-color: var(--default-secundary-font-color);
@@ -156,7 +162,9 @@ i {
 .icon-link {
   background-image: none;
 }
-
+.icon-link:active{
+  background-color: transparent;
+}
 .icon-link:link>i {
   background-size: 100% 100%;
   transition: all 0.5s ease-in-out;

index.html

@@ -52,7 +52,7 @@
       </ul>
     </nav>
     <nav class="navbar-compressed">
-      <div class="nav-header-menu">
+      <div class="nav-header-menu oscured">
         <a class="icon-link" id="show-nav-columnar-menu"><i class="fa fa-bars fa-xl"></i></a>
       </div>
       <ul id="nav-columnar-menu">
@@ -72,7 +72,7 @@
       </ul>
     </nav>
   </header>
- <main>
+ <main class="oscured">
   <section>
     <div class="presentation centered-article">
       <h1 id="presentation-title">Hi, I am <br class='br-show'>Carlos Jorge!</h1>

index.js

@@ -13,17 +13,19 @@ function reveal() {
 window.addEventListener("scroll", reveal);
 function removeActive(navColumnarMenu) {
   navColumnarMenu.classList.remove("active");
-  document.getElementsByTagName("main")[0].classList.remove("opacity-effect");
-  document
-    .getElementsByClassName("nav-header-menu")[0]
-    .classList.remove("opacity-effect");
+  [...document.getElementsByClassName('oscured')].forEach(
+    (element)=>{
+      element.classList.remove("opacity-effect");
+    }
+  )
 }
 function addActive(navColumnarMenu) {
   navColumnarMenu.classList.add("active");
-  document.getElementsByTagName("main")[0].classList.add("opacity-effect");
-  document
-    .getElementsByClassName("nav-header-menu")[0]
-    .classList.add("opacity-effect");
+  [...document.getElementsByClassName('oscured')].forEach(
+    (element)=>{
+      element.classList.add("opacity-effect");
+    }
+  )
 }
 document.addEventListener("DOMContentLoaded", function (event) {
   [...document.getElementsByTagName("a")].forEach(function (element) {
@@ -44,8 +46,7 @@ document.addEventListener("DOMContentLoaded", function (event) {
       if (
         ev.path.some(
           (element) =>
-            element.tagName === "MAIN" ||
-            element.classList?.contains("nav-header-menu")
+            element.classList?.contains("oscured")
         )
       ) {
         removeActive(navColumnarMenu);