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.

JavaScript

1

2

3

4

5

6

7

8

9

10

11

12

13

14

varghost=document.getElementsByClassName("ghost-container")[0];

varsound=newAudio("file.wav");

//Shows ghost and plays sound after five seconds

setTimeout(function(){

sound.load();

sound.play();

ghost.style.visibility="visible";

},5000);

//Hides ghost one second after appears

setTimeout(function(){

ghost.style.visibility="hidden";

},6000);

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.

Default

1

2

3

4

<head>

<link rel="stylesheet"href="main.css">

<script src="main.js"></script>

</head>

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