How to make a Splash Screen using HTML CSS and JavaScript

Does your college project have a splash screen that welcomes viewers to your humble website?

Here is how I made a splash screen using just HTML, CSS and JavaScript. You can copy paste the code in your single page project and change the HTML as you wish. But if you wish to go in depth of how it was made, then read on.

The idea is to overlay a div over the main page and turn its opacity to 0 when it is clicked.

The HTML

The HTML is quite simple. Just make a container div that we would, at a later stage, style using css. From now on we will call it splash container. This div would block the main page view when the site fires up.
Inside the splash container div put the contents of your splash screen. It could be anything that you want to show or tell the user at the start.

The CSS

In CSS our main focus would be to make the splash container cover the whole screen. Choose the background-color height and width of your screen as you would like.
For centering the splash container, we used fixed positioning and a top and left of 50%. But this just centers the top left corner of the splash-screen.

position : fixed;
top : 50%;
left : 50%;

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

transform : translate(-50%,-50%);

To make it look cooler when it dissapears we would also add a transition. I generally use ease-in-out in almost all my projects. Additionaly, it would take 600ms for my splash screen to fully dissapear when it is clicked.But feel free to change it according to your wish.

transition : all ease-in-out 600ms;

Now, just to add a bit more detailing, We will add a cursor style on the splash screen.
(But this might make us write some extra code in CSS and JS 🥲).

cursor : pointer;

Get the full list of cursor-types here

We add a class which hides the container (after the opacity is turned to 0 using JS) so that the pointer doesn't show for the next eternity even though the splash screen isn't visible to the user.

.hidden{
  transition : 0.5s;
  display : none;
}

This hidden class would be added dynamically using JS.

The JS

var splashScreen = document.querySelector('.splash');

To manipulate the splash container we first have to capture the element with the class splash. For this we use querySelector() method.

We add an event Listener which listens for a click on the splash-container. (In simple language we are telling js to listen for a click of the mouse on the said container).

splashScreen.addEventListener('click',someFunction())

As soon as the click happens, a function is triggered. Lets call this function parentFunction. What does parentFunction function do?

1. It adds a style property to the 'splash container' that turn its opacity to 0.

  splashScreen.style.opacity = 0;
  // CSS style -- opacity : 0;

1. It also adds a hidden class to our splash container class after 600ms. (This is so that we do not see the pointer cursor on the screen).

setTimeout(()=>{
    splashScreen.classList.add('hidden')
  },610)

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

That's it. You are ready to make and customize your own splash 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. ❤️