67 lines
2.2 KiB
JavaScript
67 lines
2.2 KiB
JavaScript
// Hero image transitions and animations
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
// Enhanced slide + zoom hero image transitions
|
|
const imgs = [
|
|
"assets/images/optimized/room_optimized.jpg",
|
|
"assets/images/optimized/chair_optimized.jpg",
|
|
"assets/images/optimized/google_optimized.jpg",
|
|
];
|
|
|
|
const currentImg = document.getElementById("currentImg");
|
|
const nextImg = document.getElementById("nextImg");
|
|
|
|
if (currentImg && nextImg) {
|
|
let currentIndex = 0;
|
|
let isTransitioning = false;
|
|
|
|
// Alternate slide directions for dynamic effect
|
|
const slideDirections = ["left", "right"];
|
|
let slideIndex = 0;
|
|
|
|
function performSlideZoomTransition() {
|
|
if (isTransitioning) return;
|
|
isTransitioning = true;
|
|
|
|
// Get next image index
|
|
const nextIndex = (currentIndex + 1) % imgs.length;
|
|
const slideDirection =
|
|
slideDirections[slideIndex % slideDirections.length];
|
|
slideIndex++;
|
|
|
|
// Set up next image
|
|
nextImg.src = imgs[nextIndex];
|
|
nextImg.style.opacity = "1";
|
|
|
|
// Apply animations based on slide direction
|
|
if (slideDirection === "left") {
|
|
// Current slides out left, next zooms in from right
|
|
currentImg.style.animation = "slideOutLeft 1s ease-in-out forwards";
|
|
nextImg.style.animation = "zoomInFromRight 1s ease-in-out forwards";
|
|
} else {
|
|
// Current slides out right, next zooms in from left
|
|
currentImg.style.animation = "slideOutRight 1s ease-in-out forwards";
|
|
nextImg.style.animation = "zoomInFromLeft 1s ease-in-out forwards";
|
|
}
|
|
|
|
// After animation completes, swap the images
|
|
setTimeout(() => {
|
|
// Swap the images
|
|
currentImg.src = imgs[nextIndex];
|
|
currentImg.style.animation = "";
|
|
currentImg.style.transform = "";
|
|
currentImg.style.opacity = "1";
|
|
|
|
// Reset next image
|
|
nextImg.style.animation = "";
|
|
nextImg.style.transform = "";
|
|
nextImg.style.opacity = "0";
|
|
|
|
currentIndex = nextIndex;
|
|
isTransitioning = false;
|
|
}, 1000); // Match animation duration
|
|
}
|
|
|
|
// Start the transition cycle
|
|
setInterval(performSlideZoomTransition, 10000); // Every 10 seconds for better viewing
|
|
}
|
|
});
|