Ghost in the Machine!

Tutorial Difficulty Level    

Haunt your website for halloween! Scare your friends and website visitors with a simple JavaScript function and a bit of CSS black magic.

Step 1: Select Your Webpage

First you’ll need to select which webpage you want to haunt. Once you’ve made your pick, all you’ll need to do is drop this code snippet inside your HTML file.

This is the haunting image that will appear when your ghost reveals itself. You can download our cute ghost (right click the link and “save as”) or choose your own picture!

Step 2: Create or Modify Your CSS Stylesheet

Now’s the time to get your ghost in the spirit of haunting. We’re going to change the initial display of your ghost to hidden so that it can pop out and surprise your site’s visitor.

Step 3: Setting up Your JavaScript File

Next we’ll add a JavaScript file that will bring your ghost to life — with sound and sight! The following code sets a timer for 5 seconds using setTimeout that will trigger the appearance of your ghost and the ear piercing scream when the visitor goes to your site. Download our ear piecing scream or use your own sound.

Step 4: Final Steps

Be sure to link your CSS and JavaScript files to your HTML file. Here we included them in the ‘head’ section.

Extra Scary?

Give your text an eerie glow by applying some CSS styles. Simply copy the code below and assign the class “text-glow” to the text you’d like to change. Will work best with a dark bgcolor