What is Create a Splash Page App in HTML CSS & JavaScript?

In this article, we will learn Create a Splash Page App in HTML CSS & JavaScript,This free Javascript tutorial for complete beginners will help you learn Javascript from scratch.

Create a Splash Page App in HTML CSS & JavaScript

Create a Single Page Application using HTML CSS & JavaScript

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:

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

Javascript

document.addEventListener("DOMContentLoaded",
 function () {
    setTimeout(function () {
        document.getElementById("preloader")
        .style.display = "none";
        setTimeout(function () 
        {
            document.getElementById("splash")
            .style.display = "none";
            document.getElementById("content")
            .style.display = "block";
            addLiveAnimations();
        }, 3000);
    }, 1000);
});

HTML

<!DOCTYPE html>
 
<head>
    <title>w3wiki</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">w3wiki</h1>
                <h3 class="animated-subtitle">Learn, Code, Contribute!</h3>
                <div class="animated-emoji" id="loadingEmoji">
                    ?
                </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> w3wiki
            </h1>
            <p>Learn, Code, Contribute!</p>
            <div class="animated-emoji" id="BeginnerEmoji">
                ?
            </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

body {
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(135deg, #3498db, #8e44ad);
}
 
#preloader {
    position: fixed;
    width: 100%;
    height: 100%;
    background: #fda56b;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
 
#loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}
 
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
 
    100% {
        transform: rotate(360deg);
    }
}
 
#splash {
    height: 100vh;
    display: flex;
    align-items: flex-end;
}
 
.curtain {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    overflow: hidden;
    animation: curtainAnimation 4s ease-out forwards, gradientAnimation 3s ease-out forwards;
}
 
.splash-content {
    text-align: center;
    padding: 20px;
    color: #fff;
    position: relative;
    z-index: 2;
}
 
.splash-content i {
    font-size: 2em;
}
 
.additional-splash-effects {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #ff6b6b, #8e44ad, #3498db, #e74c3c);
    animation: backgroundAnimation 20s infinite alternate;
    z-index: 1;
}
 
#content {
    text-align: center;
    position: relative;
}
 
.card {
    background-color: #dbca34;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    margin: 20px;
    color: rgb(255, 0, 0);
    width: 300px;
    animation: cardAnimation 1.5s ease-out;
}
 
.card i {
    margin-right: 5px;
}
 
.animated-emoji {
    font-size: 2em;
    margin-top: 10px;
    animation: bounce 1s infinite;
}
 
.animated-title {
    animation: fadeInDown 1.5s ease-out;
}
 
.animated-subtitle {
    animation: fadeInUp 1.5s ease-out;
}
 
@keyframes curtainAnimation {
    0% {
        transform: translateY(100%);
    }
 
    100% {
        transform: translateY(0);
    }
}
 
@keyframes gradientAnimation {
    0% {
        opacity: 0;
    }
 
    100% {
        opacity: 1;
    }
}
 
@keyframes backgroundAnimation {
    0% {
        background-position: 0% 50%;
    }
 
    100% {
        background-position: 100% 50%;
    }
}
 
@keyframes cardAnimation {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
 
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
 
@keyframes bounce {
 
    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }
 
    40% {
        transform: translateY(-20px);
    }
 
    60% {
        transform: translateY(-10px);
    }
}
 
@keyframes fadeInDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
 
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
 
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
 
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

Output:

Tags:

#Dev Scripter 2024 #JavaScript-Projects #Dev Scripter #JavaScript #Project #Web Technologies

Create a Single Page Application using HTML CSS & JavaScript