xxxxxxxxxx264
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Image Sequence with Text Animation</title> <style> body, html { margin: 0; padding: 0; overflow: hidden; background-color: black; } canvas { display: block; margin: auto; } </style></head><body> <!-- Set canvas size to 750x500 --> <canvas id="myCanvas" width="750" height="500"></canvas> <script> const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); // List of images to cycle through const images = [ 'frame1.png', 'frame2.png', 'frame3.png', 'frame4.png', 'frame5.png', 'frame6.png' ]; // List of corresponding texts for each image const texts = [ "Victoria is walking home after a long shift...", "Huh?? What is that over there?", "Oh wow!!! It's glowing!", "There is more...where does this go to?", "What the F&#*!?", "Should I go in?" ]; let currentImageIndex = -1; // Start with -1 to show the black screen first let currentTextIndex = 0; // Index for the typewriter effect const typeSpeed = 100; // Typing speed for text let currentText = ''; // Current text being displayed let clickOpacity = 0; // Opacity for the '(click anywhere)' text let fadeDirection = 1; // 1 for fade-in, -1 for fade-out let clickTextActive = false; // To ensure the click text appears after the main text animation const initialText = "Time To Go Home"; // Text for the black screen const initialClickText = "(click anywhere)"; // Click text for the black screen let initialScreenFinished = false; // Track if the initial black screen is done const eggshellColor = '#FDF6E3'; // Creamy eggshell color // Function to display the black screen with "Time To Go Home" and "(click anywhere)" text function showBlackScreen() { currentTextIndex = 0; // Reset the text index for typing ctx.fillStyle = "black"; // Set background to black ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill the canvas with black // Typewriter effect for the "Time To Go Home" text function typeHomeText() { if (currentTextIndex < initialText.length) { ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas ctx.fillStyle = "white"; ctx.font = "36px 'Courier New', monospace"; ctx.textAlign = "center"; ctx.fillText(initialText.substring(0, currentTextIndex + 1), canvas.width / 2, canvas.height / 2); currentTextIndex++; setTimeout(typeHomeText, typeSpeed); } else { setTimeout(fadeInInitialClickMessage, 1000); // Fade in "(click anywhere)" after 1 second } } typeHomeText(); // Start typing the "Time To Go Home" text } // Function to fade in the "(click anywhere)" text on the black screen function fadeInInitialClickMessage() { clickOpacity += fadeDirection * 0.02; if (clickOpacity >= 1) { clickOpacity = 1; // Cap the opacity at 1 } // Draw the "(click anywhere)" text ctx.fillStyle = "white"; ctx.font = "36px 'Courier New', monospace"; ctx.textAlign = "center"; ctx.fillText(initialText, canvas.width / 2, canvas.height / 2); // Keep the main text visible ctx.globalAlpha = clickOpacity; // Apply opacity for the click message ctx.font = "20px 'Courier New', monospace"; // Smaller font for "(click anywhere)" ctx.fillText(initialClickText, canvas.width / 2, canvas.height / 2 + 40); // Position below the main text ctx.globalAlpha = 1.0; // Reset alpha if (clickOpacity < 1) { requestAnimationFrame(fadeInInitialClickMessage); // Continue fading in the click message } else { initialScreenFinished = true; // Enable click detection for the black screen } } // Function to handle click and move to the first image or to handle the final transition for frame6.png function handleClick() { if (initialScreenFinished && currentImageIndex === -1) { currentImageIndex = 0; // Move to `frame1.png` after the black screen initialScreenFinished = false; // Reset the flag to avoid multiple clicks on black screen currentTextIndex = 0; showNextImage(); // Show the first image } else if (currentImageIndex >= 0 && currentImageIndex < images.length - 1) { currentImageIndex++; // Move to the next image currentTextIndex = 0; // Reset the text index for typewriter effect clickOpacity = 0; // Reset the opacity for '(click anywhere)' clickTextActive = false; // Reset the flag for the click text showNextImage(); // Show the next image and its text } else if (currentImageIndex === images.length - 1) { // Final click on frame6.png to start the fade to eggshell and show "FIN" fadeToEggshell(); } } // Function to show the next image and text function showNextImage() { typeText(texts[currentImageIndex], images[currentImageIndex]); // Start typing the text for the next image } // Typewriter effect for the text (re-drawing image and text together) function typeText(text, imagePath) { clickTextActive = false; // Reset the state for the click text if (currentTextIndex < text.length) { currentText = text.substring(0, currentTextIndex + 1); // Add one character at a time drawImageAndText(imagePath, currentText); // Redraw the image and updated text together currentTextIndex++; setTimeout(() => typeText(text, imagePath), typeSpeed); } else { setTimeout(() => requestAnimationFrame(fadeInClickMessage), 2000); // Start fading in '(click anywhere)' after 2 seconds } } // Function to draw the image and text together function drawImageAndText(imagePath, text) { const img = new Image(); img.src = imagePath; img.onload = function () { ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the entire canvas before drawing the image let imgWidth, imgHeight; const aspectRatioImage = img.width / img.height; const aspectRatioCanvas = canvas.width / canvas.height; if (aspectRatioImage > aspectRatioCanvas) { imgWidth = canvas.width; imgHeight = imgWidth / aspectRatioImage; } else { imgHeight = canvas.height; imgWidth = imgHeight * aspectRatioImage; } const imgX = (canvas.width - imgWidth) / 2; const imgY = (canvas.height - imgHeight) / 2; // Draw the image once ctx.globalAlpha = 1; // Ensure full opacity ctx.drawImage(img, imgX, imgY, imgWidth, imgHeight); // Draw the current text if (text) { ctx.fillStyle = "white"; ctx.font = "20px 'Courier New', monospace"; ctx.textAlign = "center"; ctx.fillText(text, canvas.width / 2, canvas.height - 20); // Draw text at bottom middle } }; } // Function to fade to eggshell color over 7 seconds and then slowly fade in "FIN" function fadeToEggshell() { let fadeOpacity = 0; const fadeSpeed = 1 / (60 * 7); // 7-second fade function fade() { if (fadeOpacity < 1) { ctx.fillStyle = eggshellColor; ctx.globalAlpha = fadeOpacity; ctx.fillRect(0, 0, canvas.width, canvas.height); // Fill the canvas with eggshell color fadeOpacity += fadeSpeed; requestAnimationFrame(fade); // Continue the fade } else { ctx.globalAlpha = 1.0; fadeInFin(); // Once the fade is done, fade in "FIN" } } fade(); // Start the fade to eggshell color } // Function to slowly fade in "FIN" after the fade is done function fadeInFin() { let finOpacity = 0; const finFadeSpeed = 0.01; // Control how quickly "FIN" fades in function fadeFin() { if (finOpacity < 1) { ctx.globalAlpha = finOpacity; ctx.fillStyle = "black"; ctx.font = "36px 'Courier New', monospace"; ctx.textAlign = "center"; ctx.fillText("FIN", canvas.width / 2, canvas.height / 2); finOpacity += finFadeSpeed; requestAnimationFrame(fadeFin); // Continue fading in "FIN" } else { ctx.globalAlpha = 1.0; // Reset alpha when fully faded in } } fadeFin(); // Start the fade-in for "FIN" } // Function to fade in and softly flash '(click anywhere)' text function fadeInClickMessage() { if (!clickTextActive) return; // Ensure the click text appears after the main text animation // Keep the image and main text intact by not clearing the entire canvas drawImageAndText(images[currentImageIndex], currentText); // Redraw image and text (without clearing) // Fade in/out effect for '(click anywhere)' clickOpacity += fadeDirection * 0.02; if (clickOpacity >= 1) { clickOpacity = 1; // Cap the opacity at 1 fadeDirection = -1; // Start fading out } else if (clickOpacity <= 0) { clickOpacity = 0; // Cap opacity at 0 fadeDirection = 1; // Start fading in } // Draw '(click anywhere)' text in gold color ctx.globalAlpha = clickOpacity; ctx.fillStyle = "#dfbe7e"; // Gold color ctx.font = "bold 16px 'Courier New', monospace"; // Bold typewriter style ctx.textAlign = "left"; // Align to the left ctx.fillText("(click anywhere)", 20, 40); // Upper left corner ctx.globalAlpha = 1.0; // Reset alpha // Continue the flashing effect requestAnimationFrame(fadeInClickMessage); } // Initial load: show the black screen with "Time To Go Home" window.onload = function () { showBlackScreen(); // Show the black screen first }; // Add a click event listener to the canvas to load the first image or next image canvas.addEventListener('click', handleClick); </script></body></html>