diff --git a/index.html b/index.html index 08b32410..bf72c757 100644 --- a/index.html +++ b/index.html @@ -477,7 +477,7 @@

Forgot Password

-
+
@@ -527,7 +527,7 @@

Roaming Routes

-
+
@@ -577,7 +577,7 @@

Gaming Chronicle

-
+
@@ -627,7 +627,7 @@

Virtual Realms

-
+
@@ -677,7 +677,7 @@

Laptop Life

-
+
@@ -727,7 +727,7 @@

Mouthwatering Memoirs

-
+
@@ -777,7 +777,7 @@

Tech travels

-
+
@@ -827,7 +827,7 @@

Culinary Delights

-
+
@@ -877,7 +877,7 @@

Voyage Vista: Where Travel Dreams Take Flight

-
+
@@ -924,512 +924,256 @@

Beak & Claw: A Chronicle of Birds in the Wild

- - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - +
+ - +
+ - - +
+ + - +
+ - +
+
@@ -1822,6 +1566,7 @@

Connect with us

+ \ No newline at end of file diff --git a/script.js b/script.js index 086bccd5..23e668c5 100644 --- a/script.js +++ b/script.js @@ -38,3 +38,54 @@ document.getElementById('newsletterForm').addEventListener('submit', function(e) toast.classList.remove('show'); }, 3000); }); + + +// LOAD POSTS +const initialVisibleItems = 6; // Number of items to show initially +const blogItems = document.querySelectorAll('.blog-item'); // Get all blog items +const loadMoreBtn = document.querySelector('.load-posts-btn'); // Load more button + +// Hide items initially except the first few +blogItems.forEach((item, index) => { + if (index >= initialVisibleItems) { + item.classList.add('hidden'); // Add hidden class for items beyond the limit + } +}); + +// Load more items when the button is clicked (~Nivesh2003) +loadMoreBtn.addEventListener('click', function () { + const hiddenItems = Array.from(blogItems).filter(item => item.classList.contains('hidden')); // Find hidden items + + // Show a certain number of hidden items (e.g., the next 3) + hiddenItems.slice(0, 3).forEach((item, index) => { + // Delay for each item's reveal to create a staggered effect + setTimeout(() => { + item.classList.remove('hidden'); // Remove hidden class + item.classList.add('reveal'); // Add reveal class to trigger animation + }, index * 300); // Adjust the delay (300ms) as needed + }); + + // Check if there are no more hidden items + if (hiddenItems.length <= initialVisibleItems) { + loadMoreBtn.style.display = 'none'; // Hide the button if there are no more items to load + } +}); + +// Optional: If you want to control existing animations when new items are added +const manageExistingAnimations = () => { + blogItems.forEach(item => { + // Remove the animation class after a delay to prevent repeated animations + if (item.classList.contains('reveal')) { + setTimeout(() => { + item.classList.remove('reveal'); // Remove animation class after animation completes + }, 500); // Adjust this duration to match your CSS transition duration + } + }); +}; + +// Call manageExistingAnimations whenever new items are revealed +loadMoreBtn.addEventListener('click', function () { + manageExistingAnimations(); // Control existing items' animations +}); + + diff --git a/style.css b/style.css index 7868473f..813b38c4 100644 --- a/style.css +++ b/style.css @@ -548,6 +548,7 @@ background: var(--light); border-radius: 20px; background-color: var(--card-background-light); color: var(--card-text-color-light); + } .blog-card-image img { @@ -2846,4 +2847,22 @@ footer p { { background-color: #0056b3; transform: scale(1.03); - } \ No newline at end of file + } +/*New load post button function */ +.blog-item { + opacity: 1; /* Default visibility */ + /*transition: opacity 0.5s ease-in-out; /* Add animation */ + visibility: visible; /* Ensure visibility is set */ +} + +.hidden { + opacity: 0; /* Fade out effect */ + height: 0; /* Prevent interaction */ + visibility: hidden; /* Hide from layout */ + overflow: hidden; /* Prevent overflow during transition */ +} + +.reveal { + opacity: 1; /* Ensure visible */ + transition: opacity 0.5s ease-in-out; /* Animation for newly revealed items */ +}