Open In App

Create a Splash Page App in HTML CSS & JavaScript

Last Updated : 26 Jul, 2024
Summarize
Comments
Improve
Suggest changes
Share
1 Like
Like
Report

The Splash Screen is the UI element that appears as the initial screen or the loading screen. Splash Page Application consists of a styled animative splash screen effect which automatically makes the curtain opening splash effect into the application for a specific time and renders the dynamic content once the effect is been completed. We will develop this Splash Page Animative effect using HTML, CSS, and JavaScript.

Preview Image:

Screenshot-(1329)-min-min

Prerequisites:

  • HTML
  • CSS
  • JavaScript

Approach:

  • Create the basic layout or structure of the application using various HTML tags like <h1>,<h3>,<div>, etc. Also, link all the essential external libraries with the CDN links.
  • Create the overall structure for the splash screen inside the #splash div. Add all the other animative components like Loading Spinner, title, etc.
  • Add CSS styling to style the splash screen, dynamic content, and other elements. Also, implement the keyframe animations for various effects like bouncing, etc.
  • In the JavaScript file, use the DOMContentLoaded event to initiate the Splash Screen logic. Set the loading time and hide the splash screen while displaying the dynamic content.

Project Structure:

Example: This example describes the basic implementation for a Splash Page App in HTML CSS and JavaScript

HTML
<!DOCTYPE html>

<head>
    <title>GeeksforGeeks</title>
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
    <link href=
"https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap"
          rel="stylesheet">
    <link rel="stylesheet"
          href="styles.css">
</head>

<body>
    <div id="preloader">
        <div id="loader"></div>
    </div>
    <div id="splash" class="animated-splash">
        <div class="curtain">
            <div class="splash-content">
                <i class="fas fa-spin fa-spinner"></i>
                <h1 class="animated-title">GeeksforGeeks</h1>
                <h3 class="animated-subtitle">Learn, Code, Contribute!</h3>
                <div class="animated-emoji" id="loadingEmoji">
                    &#x1F60D;
                </div>
            </div>
            <div class="additional-splash-effects"></div>
        </div>
    </div>
    <div id="content" style="display: none;">
        <div class="card">
            <h1>
                <i class="fas fa-code">
                </i> GeeksforGeeks
            </h1>
            <p>Learn, Code, Contribute!</p>
            <div class="animated-emoji" id="geeksEmoji">
                &#x1F913;
            </div>
        </div>
    </div>
    <script src=
"https://cdn.jsdelivr.net/npm/splash-screen@4.0.1/dist/splash-screen.min.js">
    </script>
    <script src="app.js">
    </script>
</body>

</html>
CSS JavaScript

Output:



Similar Reads