Implement slide-in and slide-out animations for blog post transitions

udaysinh-git · Jan 1, 2025 · 0e53cc5 · 0e53cc5
1 parent 8c7f8ba
commit 0e53cc5
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 140 deletions.
diff --git a/_site/blog/index.html b/_site/blog/index.html
@@ -144,8 +144,10 @@ <h1>Blog</h1>
 </ul>
 <script>
   function handleBlogClick(url) {
-    document.body.classList.add('fade-out');
+    document.body.classList.add('slide-out-left');
     setTimeout(() => {
+      document.body.classList.remove('slide-out-left');
+      document.body.classList.add('slide-in-right');
       window.location.href = url;
     }, 500);
   }

diff --git a/_site/github/index.html b/_site/github/index.html
diff --git a/_site/posts/Finger-Funk/index.html b/_site/posts/Finger-Funk/index.html
@@ -50,7 +50,7 @@
     </div>
   </header>
   <main class="container">
-    <article class="post-content fade-in">
+    <article class="post-content slide-in-right">
       <h1>Creating a Real-Time Hand-Tracking Drawing Application with Python</h1>
       <h2>Introduction</h2>
 <p>Welcome to <strong>Finger-Funk</strong>! In this blog post, we will build a real-time hand-tracking drawing application using Python, OpenCV, and MediaPipe. This application allows users to draw on the screen using hand gestures, change colors, adjust brush thickness, and erase drawings—all without touching the screen. By the end of this tutorial, you'll have a functional drawing tool that leverages computer vision for an interactive experience.</p>

diff --git a/_site/posts/cats_vs_dogs/index.html b/_site/posts/cats_vs_dogs/index.html
@@ -50,7 +50,7 @@
     </div>
   </header>
   <main class="container">
-    <article class="post-content fade-in">
+    <article class="post-content slide-in-right">
       <h1>Building a Simple Cat vs Dog Classifier Using Python</h1>
       <h2>Introduction</h2>
 <p>In this blog post, we will walk through the process of creating a simple artificial intelligence model that can differentiate between images of cats and dogs. We will use Python and some popular libraries to achieve this. By the end of this tutorial, you will have a basic understanding of how to build and train a machine learning model for image classification.</p>

diff --git a/_site/posts/my-first-post/index.html b/_site/posts/my-first-post/index.html
@@ -50,7 +50,7 @@
     </div>
   </header>
   <main class="container">
-    <article class="post-content fade-in">
+    <article class="post-content slide-in-right">
       <h1>My First Post</h1>
       <h1>My First Blog Post: Excitement and Vision</h1>
 <p>Hello everyone!</p>

diff --git a/_site/styles/styles.css b/_site/styles/styles.css
@@ -219,71 +219,6 @@
   from { opacity: 1; }
   to { opacity: 0; }
 }
-/* Optional: Enhance timeline-item styles for better presentation */
-.timeline-item {
-  background: var(--card-background-color);
-  padding: 1.5rem;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  margin-bottom: 1rem;
-  position: relative;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.timeline-item:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-.timeline-item h3 a {
-  font-size: 1.2rem;
-  color: var(--link-color);
-  transition: color 0.3s;
-}
-
-.timeline-item h3 a:hover {
-  color: var(--link-hover-color);
-}
-
-.timeline-item p {
-  font-size: 0.95rem;
-  color: var(--text-color);
-  margin: 0.5rem 0;
-}
-
-.timeline-date {
-  font-size: 0.85rem;
-  color: #777;
-  margin-bottom: 0.5rem;
-}
-
-/* Loader Styles */
-.loader {
-  text-align: center;
-  padding: 1rem;
-  font-size: 1.2rem;
-  color: var(--text-color);
-}
-
-/* Responsive Layout Adjustments */
-@media (min-width: 768px) {
-  .timeline {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 2rem;
-  }
-
-  .timeline-item {
-    flex: 1 1 calc(50% - 2rem);
-  }
-}
-
-@media (min-width: 1024px) {
-  .timeline-item {
-    flex: 1 1 calc(33.333% - 2rem);
-  }
-}
 
 .profile-card {
   display: flex;
@@ -490,3 +425,48 @@ img {
   display: flex;
 }
 
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slide-out-left {
+  animation: slideOutLeft 0.5s forwards;
+}
+
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-right {
+  animation: slideInRight 0.5s forwards;
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slide-out-left {
+  animation: slideOutLeft 0.5s forwards;
+}
diff --git a/src/_includes/post.njk b/src/_includes/post.njk
@@ -50,7 +50,7 @@
     </div>
   </header>
   <main class="container">
-    <article class="post-content fade-in">
+    <article class="post-content slide-in-right">
       <h1>{{ title }}</h1>
       {{ content | safe }}
     </article>

diff --git a/src/blog.njk b/src/blog.njk
@@ -25,8 +25,10 @@ title: Blog
 </ul>
 <script>
   function handleBlogClick(url) {
-    document.body.classList.add('fade-out');
+    document.body.classList.add('slide-out-left');
     setTimeout(() => {
+      document.body.classList.remove('slide-out-left');
+      document.body.classList.add('slide-in-right');
       window.location.href = url;
     }, 500);
   }

diff --git a/src/styles/styles.css b/src/styles/styles.css
@@ -219,71 +219,6 @@
   from { opacity: 1; }
   to { opacity: 0; }
 }
-/* Optional: Enhance timeline-item styles for better presentation */
-.timeline-item {
-  background: var(--card-background-color);
-  padding: 1.5rem;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-  margin-bottom: 1rem;
-  position: relative;
-  transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.timeline-item:hover {
-  transform: translateY(-5px);
-  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
-}
-
-.timeline-item h3 a {
-  font-size: 1.2rem;
-  color: var(--link-color);
-  transition: color 0.3s;
-}
-
-.timeline-item h3 a:hover {
-  color: var(--link-hover-color);
-}
-
-.timeline-item p {
-  font-size: 0.95rem;
-  color: var(--text-color);
-  margin: 0.5rem 0;
-}
-
-.timeline-date {
-  font-size: 0.85rem;
-  color: #777;
-  margin-bottom: 0.5rem;
-}
-
-/* Loader Styles */
-.loader {
-  text-align: center;
-  padding: 1rem;
-  font-size: 1.2rem;
-  color: var(--text-color);
-}
-
-/* Responsive Layout Adjustments */
-@media (min-width: 768px) {
-  .timeline {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 2rem;
-  }
-
-  .timeline-item {
-    flex: 1 1 calc(50% - 2rem);
-  }
-}
-
-@media (min-width: 1024px) {
-  .timeline-item {
-    flex: 1 1 calc(33.333% - 2rem);
-  }
-}
 
 .profile-card {
   display: flex;
@@ -490,3 +425,48 @@ img {
   display: flex;
 }
 
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slide-out-left {
+  animation: slideOutLeft 0.5s forwards;
+}
+
+
+@keyframes slideInRight {
+  from {
+    transform: translateX(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.slide-in-right {
+  animation: slideInRight 0.5s forwards;
+}
+
+@keyframes slideOutLeft {
+  from {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+}
+
+.slide-out-left {
+  animation: slideOutLeft 0.5s forwards;
+}