now animations starts after preloader screen disabled

nitinsooni · Sep 30, 2024 · f0cb402 · f0cb402
1 parent 23bc601
commit f0cb402
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/assets/images/profile.webp b/assets/images/profile.webp
diff --git a/css/media.css b/css/media.css
@@ -389,7 +389,10 @@
         background-repeat: no-repeat;
         background-position: center;
         background-size: 130% 110%;
-        animation: 1.2s ease forwards back-gradient;
+    }
+
+    .gradient-effect {
+        animation: 1.2s ease .25s forwards back-gradient;
     }
 
     @keyframes back-gradient {
@@ -451,7 +454,10 @@
 @media only screen and (min-width: 1400px) {
     #home {
         background-size: 120% 110%;
-        animation: 2.2s ease forwards back-gradient;
+    }
+
+    .gradient-effect {
+        animation: 2.2s ease .25s forwards back-gradient;
     }
 
     @keyframes back-gradient {

diff --git a/css/style.css b/css/style.css
@@ -137,6 +137,7 @@ button {
     border-radius: 50%;
     display: inline-block;
     margin: 0 3px;
+    box-shadow: rgb(6, 6, 6) 1px 1px 5px -1px;
     animation: jump 0.8s infinite ease-in-out;
 }
 
@@ -311,6 +312,9 @@ nav .nav-r a {
     stroke-linejoin: round;
     stroke-dasharray: 632;
     stroke-dashoffset: 632;
+}
+
+.stroke-draw {
     animation: 1.5s ease .25s forwards draw;
 }
 
@@ -749,8 +753,10 @@ nav .nav-r a {
 }
 
 #contact .table .table-r .container .card.one .content .block-top img {
+    width: 100px;
     border: 2px solid #b18a52;
     border-radius: 100%;
+    filter: grayscale(10%);
 }
 
 #contact .table .table-r .container .card.one .content .block-top .text {
@@ -827,7 +833,7 @@ nav .nav-r a {
 
 #contact .table .table-r .container .card.two .content img {
     height: 100%;
-    filter: grayscale(30%);
+    filter: grayscale(25%);
 }
 
 #contact .table .table-r .container .card.front {

diff --git a/js/script.js b/js/script.js
@@ -1,4 +1,4 @@
-// Disable preloader screen when website fully loaded with fade-out animation
+// Disable preloader screen when website fully loaded with fade-out animation and then start website animations
 const loadingScreen = document.querySelector('.preloader');
 
 window.addEventListener('load', function() {
@@ -7,6 +7,9 @@ window.addEventListener('load', function() {
     setTimeout(function() {
         loadingScreen.style.display = 'none';
     }, 250);
+
+    document.querySelector('#home .title svg path').classList.add('stroke-draw');
+    document.getElementById('home').classList.add('gradient-effect');
 });
 
 // Navbar links gets in focus according to which section is in view