144 lines
3.9 KiB
JavaScript
144 lines
3.9 KiB
JavaScript
// Smooth Page Transitions for Sky Art Shop
|
|
// Provides fade-out/fade-in effects when navigating between pages
|
|
|
|
(function () {
|
|
"use strict";
|
|
|
|
// Add page transition styles (less aggressive approach)
|
|
const style = document.createElement("style");
|
|
style.textContent = `
|
|
body {
|
|
transition: opacity 0.25s ease-in-out;
|
|
}
|
|
|
|
body.page-transitioning {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
`;
|
|
document.head.appendChild(style);
|
|
|
|
// Fade in page on load (if coming from a transition)
|
|
function initPageTransition() {
|
|
// Check if we're coming from a transition
|
|
const isTransitioning = sessionStorage.getItem("page-transitioning");
|
|
if (isTransitioning === "true") {
|
|
document.body.style.opacity = "0";
|
|
sessionStorage.removeItem("page-transitioning");
|
|
|
|
// Wait for content to be ready, then fade in
|
|
requestAnimationFrame(() => {
|
|
requestAnimationFrame(() => {
|
|
document.body.style.opacity = "1";
|
|
});
|
|
});
|
|
}
|
|
}
|
|
|
|
// Handle navigation with transitions
|
|
function setupNavigationTransitions() {
|
|
// Get all internal links
|
|
document.addEventListener("click", function (e) {
|
|
const link = e.target.closest("a");
|
|
|
|
if (!link) return;
|
|
|
|
const href = link.getAttribute("href");
|
|
|
|
// Skip if:
|
|
// - External link
|
|
// - Opens in new tab
|
|
// - Has download attribute
|
|
// - Is a hash link on same page
|
|
// - Is a javascript: link
|
|
// - Is a mailto: or tel: link
|
|
if (
|
|
!href ||
|
|
link.target === "_blank" ||
|
|
link.hasAttribute("download") ||
|
|
href.startsWith("javascript:") ||
|
|
href.startsWith("mailto:") ||
|
|
href.startsWith("tel:") ||
|
|
href.startsWith("#") ||
|
|
(href.includes("://") && !href.includes(window.location.host))
|
|
) {
|
|
return;
|
|
}
|
|
|
|
// Prevent default navigation
|
|
e.preventDefault();
|
|
|
|
// Start transition
|
|
document.body.classList.add("page-transitioning");
|
|
sessionStorage.setItem("page-transitioning", "true");
|
|
|
|
// Navigate after fade-out completes
|
|
setTimeout(() => {
|
|
window.location.href = href;
|
|
}, 250); // Match CSS transition duration
|
|
});
|
|
}
|
|
|
|
// Use View Transitions API if available (Chrome 111+, Safari 18+)
|
|
function setupViewTransitions() {
|
|
if (!document.startViewTransition) return;
|
|
|
|
document.addEventListener(
|
|
"click",
|
|
function (e) {
|
|
const link = e.target.closest("a");
|
|
|
|
if (!link) return;
|
|
|
|
const href = link.getAttribute("href");
|
|
|
|
// Same checks as above
|
|
if (
|
|
!href ||
|
|
link.target === "_blank" ||
|
|
link.hasAttribute("download") ||
|
|
href.startsWith("javascript:") ||
|
|
href.startsWith("mailto:") ||
|
|
href.startsWith("tel:") ||
|
|
href.startsWith("#") ||
|
|
(href.includes("://") && !href.includes(window.location.host))
|
|
) {
|
|
return;
|
|
}
|
|
|
|
e.preventDefault();
|
|
|
|
// Use View Transitions API for smooth cross-page transitions
|
|
sessionStorage.setItem("page-transitioning", "true");
|
|
document.startViewTransition(() => {
|
|
window.location.href = href;
|
|
});
|
|
},
|
|
true
|
|
); // Use capture to run before other handlers
|
|
}
|
|
|
|
// Initialize
|
|
if (document.readyState === "loading") {
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
initPageTransition();
|
|
setupNavigationTransitions();
|
|
});
|
|
} else {
|
|
initPageTransition();
|
|
setupNavigationTransitions();
|
|
}
|
|
|
|
// For browsers that support View Transitions API (progressive enhancement)
|
|
if ("startViewTransition" in document) {
|
|
const viewStyle = document.createElement("style");
|
|
viewStyle.textContent = `
|
|
::view-transition-old(root),
|
|
::view-transition-new(root) {
|
|
animation-duration: 0.25s;
|
|
}
|
|
`;
|
|
document.head.appendChild(viewStyle);
|
|
}
|
|
})();
|