Spaces:
Running
Running
File size: 1,730 Bytes
4800d91 95c56fc 4800d91 767c597 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Image Change</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Container for all the images -->
<div class="image-container">
<!-- Content inside each section (if any) will be added here -->
</div>
<!-- JavaScript to handle scrolling -->
<script>
const numImages = 240; // Number of images
const imageContainer = document.querySelector('.image-container');
// Function to get the correct image number based on scroll position
function getImageForScroll(scrollPos) {
let imageIndex = Math.floor(scrollPos / 50); // Change every 50 pixels
return imageIndex < numImages ? String(imageIndex + 1).padStart(4, '0') : String(numImages).padStart(4, '0');
}
// Handle scrolling
window.addEventListener('scroll', () => {
const scrollPos = window.scrollY; // Get the scroll position
const imageNumber = getImageForScroll(scrollPos); // Determine which image to show
// Only update the background if the image is different to avoid re-rendering the same image
const currentImage = imageContainer.style.backgroundImage;
const newImage = `url('images/${imageNumber}.png')`;
if (currentImage !== newImage) {
imageContainer.style.backgroundImage = newImage; // Set the background
}
});
// Set the initial background image
imageContainer.style.backgroundImage = `url('images/0001.png')`;
</script>
</body>
</html>
|