How to make a Splash Screen using HTML CSS and JavaScript

Does your university project have a splash screen that welcomes visitors to your humble website?

This is how I made a splash screen using just HTML , CSS and JavaScript. You can copy and paste the code into your single page project and change the HTML as you like. But if you want to dig deeper into how it’s done, read on.

The idea is to overlay a div on top of the main page and change its opacity to 0 when clicked.

The HTML

The HTML is pretty simple. Just make a container div which, at a later stage, we would style using css. From now on we will call it a splash container. This div would block the view of the main page when the site starts. Inside the welcome container div, place the content of your welcome screen. It could be anything you want to show or tell the user at the beginning.

The CSS

In CSS , our main focus would be to make the welcome container cover the entire screen. Choose the height and width of your screen background color as you like. To center the splash container, we use a fixed positioning and a top and left of 50%. But this only centers the top left corner of the splash screen.

To center the splash container around itself, we need to place a transform and move it by -50% on both axes.

To make it look cooler when it disappears, we’d also add a transition. I generally use the check in and check out facility in almost all my projects. Also, it would take 600ms for my splash screen to completely disappear when clicked on. But feel free to change it to your liking.

Now, just to add a little more detail, we’ll add a cursor style on the splash screen. (But this might make us write additional code in CSS and JS 🥲.)

Get the full list of cursor types here

We added a class that hides the container (after opacity is set). change to 0 using JS) so that the pointer won’t be displayed for the next eternity even though the splash screen is not visible to the user.

This hidden class would be added dynamically using JS .

The JS

To manipulate the welcome container, you must first capture the element with class splash. For this, we use the querySelector() method.

We add an Event Listener that listens for a click in the welcome container. (In simple language, we’re telling js to listen for a mouse click on said container.)

As soon as the click occurs, a function is fired. Let’s call this function parentFunction. What does the parentFunction function do?

1. Add a style property to the ‘splash container’ that changes its opacity to 0.

1. Also adds a hidden class to our welcome wrapper class after 600ms. (This is so we don’t see the cursor pointer on the screen.)

setTimeout() is a custom function that takes two parameters. The first parameter is some action to be performed. (A function that adds a class to a div in this case.) The second parameter is the time after which the action should be performed (in milliseconds).

That’s it. You are now ready to create and customize your own home screen. Have fun with my code on codepen and feel free to check out my other pens there. Please put a heart if this helped you in any way.

Thanks for reading. ❤️

.