my website at ewancroft.uk
add post transitions
+102
+33
assets/css/post-transitions.css
+33
assets/css/post-transitions.css
···
1
+
/* Post transition styles */
2
+
.post-transition {
3
+
opacity: 1;
4
+
transform: translateY(0);
5
+
transition: opacity 0.4s ease, transform 0.4s ease;
6
+
}
7
+
8
+
/* Initial state controlled by JavaScript */
9
+
.post {
10
+
will-change: opacity, transform;
11
+
}
12
+
13
+
/* Post container transitions */
14
+
post-container {
15
+
display: block;
16
+
min-height: 100px; /* Provide space for loading state */
17
+
}
18
+
19
+
/* Optional loading indicator between page changes */
20
+
post-container:empty::after {
21
+
content: "Loading...";
22
+
display: block;
23
+
text-align: center;
24
+
padding: 20px;
25
+
color: var(--text-color);
26
+
font-style: italic;
27
+
opacity: 0.7;
28
+
}
29
+
30
+
/* Smoothly handle tag pages */
31
+
if-tag-page .post {
32
+
transition: opacity 0.4s ease, transform 0.4s ease;
33
+
}
+67
assets/scripts/post-transitions.js
+67
assets/scripts/post-transitions.js
···
1
+
document.addEventListener("DOMContentLoaded", function() {
2
+
// Set up an observer to watch for new posts being added to the DOM
3
+
const postContainer = document.querySelector('post-container');
4
+
5
+
if (!postContainer) {
6
+
console.warn("Post container not found");
7
+
return;
8
+
}
9
+
10
+
// Function to add transition classes to posts
11
+
function setupPostTransitions() {
12
+
// Get all posts that don't have the transition class yet
13
+
const posts = document.querySelectorAll('.post:not(.has-transition)');
14
+
15
+
posts.forEach((post, index) => {
16
+
// Mark this post as having transitions
17
+
post.classList.add('has-transition', 'post-transition');
18
+
19
+
// Set initial state (invisible)
20
+
post.style.opacity = '0';
21
+
post.style.transform = 'translateY(20px)';
22
+
23
+
// Stagger the appearance of posts
24
+
setTimeout(() => {
25
+
post.style.opacity = '1';
26
+
post.style.transform = 'translateY(0)';
27
+
}, 100 * index); // Stagger each post by 100ms
28
+
});
29
+
}
30
+
31
+
// Initial setup for any posts that are already in the DOM
32
+
setupPostTransitions();
33
+
34
+
// Watch for changes in the post container (new posts being added)
35
+
const observer = new MutationObserver((mutations) => {
36
+
mutations.forEach((mutation) => {
37
+
if (mutation.addedNodes.length > 0) {
38
+
setupPostTransitions();
39
+
}
40
+
});
41
+
});
42
+
43
+
// Start observing the post container for added posts
44
+
observer.observe(postContainer, { childList: true, subtree: true });
45
+
46
+
// Handle page navigation (when the user navigates between pages)
47
+
window.addEventListener('hashchange', function() {
48
+
// Fade out all existing posts
49
+
const posts = document.querySelectorAll('.post');
50
+
posts.forEach((post, index) => {
51
+
post.style.opacity = '0';
52
+
post.style.transform = 'translateY(20px)';
53
+
});
54
+
55
+
// After posts fade out, new ones will be loaded and fade in due to the observer
56
+
setTimeout(setupPostTransitions, 400); // Wait for fade out to complete
57
+
});
58
+
59
+
// Handle theme changes to reapply transitions
60
+
const themeToggle = document.getElementById('theme-toggle');
61
+
if (themeToggle) {
62
+
themeToggle.addEventListener('click', function() {
63
+
// Brief delay to allow theme change to process
64
+
setTimeout(setupPostTransitions, 100);
65
+
});
66
+
}
67
+
});
+2
index.html
+2
index.html
···
29
29
<link rel="stylesheet" href="/assets/css/layout.css">
30
30
<link rel="stylesheet" href="/assets/css/components.css">
31
31
<link rel="stylesheet" href="/assets/css/media-queries.css">
32
+
<link rel="stylesheet" href="/assets/css/post-transitions.css">
32
33
33
34
<!-- Favicon and Icons (Static Fallbacks) -->
34
35
<link id="icon-32" rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicon/favicon-32x32.png">
···
206
207
<script src="/assets/scripts/settings.js"></script>
207
208
<script src="/assets/scripts/copyright.js"></script>
208
209
<script src="/assets/scripts/theme.js"></script>
210
+
<script src="/assets/scripts/post-transitions.js"></script>
209
211
</body>
210
212
211
213
</html>