scroll-trigger animation on paragraphs

nitinsooni · Oct 16, 2024 · a077231 · a077231
1 parent d7cb0b1
commit a077231
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 9 deletions.
diff --git a/css/style.css b/css/style.css
@@ -130,10 +130,37 @@ button {
     border: 1px solid rgba(255, 255, 255, .24);
     border-radius: 12px;
     text-decoration: none;
-    transition: all .4s ease;
+    transition: font-size .4s ease, padding .4s ease;
     backdrop-filter: blur(24px);
 }
 
+.paragraph i,
+.paragraph h3,
+.paragraph p,
+.paragraph a {
+    opacity: 0;
+    filter: blur(2px);
+    transform: translateX(-.5rem);
+    transition: all .8s ease, font-size .4s ease, padding .4s ease;
+}
+
+.paragraph.active i,
+.paragraph.active h3,
+.paragraph.active p,
+.paragraph.active a {
+    opacity: 1;
+    filter: blur(0);
+    transform: translateX(0);
+}
+
+.paragraph.active p {
+    transition-delay: .2s;
+}
+
+.paragraph.active a {
+    transition: all .8s ease .4s, font-size .4s ease 0s, padding .4s ease 0s;
+}
+
 /*----------------------------------------------------*/
 
 .preloader {
@@ -721,7 +748,7 @@ nav .nav-r {
     background: #1f1f1f;
     border: 1px solid rgba(255, 255, 255, .12);
     border-radius: 25px;
-    box-shadow: rgb(24, 26, 27) 3px -3px 10px 0px inset;
+    box-shadow: rgb(12, 12, 12) -6px -6px 20px 0px, rgb(24, 26, 27) 3px -3px 10px 0px inset;
     transition: all .5s ease;
 }
 
@@ -830,7 +857,6 @@ nav .nav-r {
 }
 
 #contact .table .table-r .container .card.front {
-    box-shadow: rgb(12, 12, 12) -6px -6px 20px 0px, rgb(24, 26, 27) 3px -3px 10px 0px inset;
     z-index: 2;
     position: relative;
 }

diff --git a/css/style.min.css b/css/style.min.css
diff --git a/index.html b/index.html
@@ -128,7 +128,7 @@ <h2>Portfolio</h2>
                             <div class="fade-overlay right-fade"></div>
                         </div>
                     </div>
-                    <div class="table-r">
+                    <div class="table-r paragraph">
                         <i class="fa-solid fa-user-tie"></i>
                         <h3>Embark on My <br><span class="gold-gradient-text">Professional Odyssey</span></h3>
                         <p>Explore my academic journey, diverse skill set, and professional experience.</p>
@@ -147,7 +147,7 @@ <h2>Contact</h2>
             </div>
             <div class="t-container">
                 <div class="table">
-                    <div class="table-l">
+                    <div class="table-l paragraph">
                         <i class="fa-solid fa-address-card"></i>
                         <h3>Explore My <br><span class="gold-gradient-text">Online Presence</span></h3>
                         <p>Discover more about me and connect through my social links to stay in the loop.</p>

diff --git a/js/script.js b/js/script.js
@@ -12,6 +12,22 @@ window.addEventListener('load', function() {
     document.getElementById('home').classList.add('gradient-effect');
 });
 
+// Trigger animation when user scrolled to paragraphs
+const paragraphs = document.querySelectorAll('.paragraph');
+const paraObserver = new IntersectionObserver((entries) => {
+    entries.forEach(entry => {
+        if (entry.isIntersecting) {
+            entry.target.classList.add('active');
+        }
+    });
+}, {
+    root: null,
+    rootMargin: '-25% 0px',
+    threshold: 0
+});
+
+paragraphs.forEach((el) => paraObserver.observe(el));
+
 // Navbar links gets in focus according to which section is in view
 window.addEventListener('scroll', function () {
     const sections = document.querySelectorAll('section');
@@ -156,7 +172,7 @@ function handleSwipe() {
 }
 
 // Trigger animation when user scrolled to contact card
-const observer = new IntersectionObserver((entries) => {
+const cardObserver = new IntersectionObserver((entries) => {
     entries.forEach(entry => {
         const cardBack = document.querySelector('#contact .table .table-r .container .card:not(.front)');
         if (entry.isIntersecting && entry.target === cardBack && ! cardBack.classList.contains('active')) {
@@ -168,12 +184,12 @@ const observer = new IntersectionObserver((entries) => {
     });
 }, {
     root: null,
-    rootMargin: '-40% 0px',
+    rootMargin: '-35% 0px',
     threshold: 0
 });
 
 document.querySelectorAll('#contact .table .table-r .container .card').forEach((card) => {
-    observer.observe(card);
+    cardObserver.observe(card);
 });
 
 // Dynamically change year in copyright text