This project is a funny-but-scary Halloween prank page built with HTML, CSS, and JavaScript. It starts off lighthearted with the legendary “Tung Tung Sahur” meme audio, but after a few seconds… it suddenly transforms into a jump scare mode! Perfect for tricking your friends during Halloween 👀.
Features:
-
🎵 Plays the famous Tung Tung Sahur meme audio
-
🌈 Animated colorful background effects
-
😱 Switches to a scary flashing red background after 5 seconds
-
👻 Jump scare with loud sound + spooky image
-
🎨 Built with pure HTML, CSS & JavaScript
Why try this project?
This is not just a meme—it’s a Halloween prank project you can share with friends. You’ll also learn how to:
-
Use JavaScript timeouts to trigger events after delays
-
Apply CSS animations & transitions for backgrounds and effects
-
Combine audio and visuals for a fun interactive webpage
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS/JS code for the project 👇
<!-- Created by CodingPorium, 2025. Visit https://youtube.com/c/CodingPorium --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Tung Tung Sahur Meme Scare Page 🎃</title> <style> /*Import Poppins Font*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); body{ margin: 0; padding: 0; font-family: poppins,sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background: black; color:white; overflow: hidden; } .container{ text-align: center; } button{ padding: 15px 30px; font-family: poppins; font-size:1.5rem; border: none; border-radius:10px; background: #ffcc00; color:black; cursor: pointer; font-weight: bold; transition: transform 0.2s; } button:hover{ transform:scale(1.1); } .meme-mode{ background: linear-gradient(45deg, #ff00ff, #00ffff,#ff9900); animation: bgmove 3s infinite alternate; } @keyframes bgmove{ 0%{filter:hue-rotate(0deg);} 100%{filter: hue-rotate(360deg);} } .scare{ background: red; animation: flash 0.1s infinite; } @keyframes flash{ 0%{background: red;} 50%{background: black;} 100%{background: red;} } .scary-text{ display: none; font-family:poppins,sans-serif; font-weight:bold; font-size:3rem; color:white; text-shadow: 2px 2px 10px black,0 0 30px red; animation: shake 0.1s infinite; } @keyframes shake{ 0%{transform: translate(2px,2px);} 25%{transform: translate(-2px,2px);} 50%{transform: translate(2px,-2px);} 75%{transform: translate(-2px,-2px);} 100%{transform: translate(2px 2px);} } img{ display: none; max-width: 100%; max-height:100%; } </style> </head> <body> <div class="container"> <h1>Tung Tung Sahur Meme Audio</h1> <button onclick="startMeme()">Play Meme</button> <p class="scary-text">WAKE UP...IT'S HALLOWEEN 🎃👻</p> <img id="scaryImg" src="https://static.wikia.nocookie.net/character-stats-and-profiles/images/5/52/Sahur2.webp/revision/latest/scale-to-width-down/340?cb=20250510085254" alt="Scary Face"> </div> <!-- Meme audio --> <audio id="memeAudio" src="https://www.myinstants.com/media/sounds/tung-tung-sahur.mp3"></audio> <!-- Scare audio --> <audio id="scareAudio" src="https://www.myinstants.com/media/sounds/jumpscare.mp3"></audio> <script> function startMeme(){ document.body.classList.add("meme-mode"); let meme = document.getElementById("memeAudio"); meme.play(); setTimeout(() =>{ //switch to scare mode document.body.classList.remove("meme-mode"); document.body.classList.add("scare"); document.querySelector(".scary-text").style.display = "block"; document.getElementById("scaryImg").style.display = "block"; let scare = document.getElementById("scareAudio"); meme.pause(); scare.play(); },5000); } </script> </body></html>
✨ With just a few lines of code, you’ve built your own version of this project! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment