Create a Splash Page App in HTML CSS & JavaScript Last Updated : 26 Jul, 2024 Comments Improve Suggest changes Like Article 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:Prerequisites:HTMLCSSJavaScriptApproach: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"> 😍 </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"> 🤓 </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); } } 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); }); Output: Comment More infoAdvertise with us Next Article Create a Splash Page App in HTML CSS & JavaScript G gpancomputer Follow Improve Article Tags : Project JavaScript Web Technologies Dev Scripter JavaScript-Projects Dev Scripter 2024 +2 More Similar Reads Create a Single Page Application using HTML CSS & JavaScript In this article, we are going to design and build a cool and user-friendly single-page application (SPA) using just HTML, CSS, and JavaScript. A single-page application contains multiple pages which can be navigated or visited without loading the page every time. This makes things faster and more in 4 min read Create an Infinite Scroll Page using HTML CSS & JavaScript In this article, we will create an infinite scroll page using HTML, CSS, and JavaScript. Infinite scrolling allows you to load and display content as the user scrolls down the page, providing a seamless browsing experience. We'll fetch and append new content dynamically as the user reaches the end o 2 min read Build A Weather App in HTML CSS & JavaScript A weather app contains a user input field for the user, which takes the input of the city name. Once the user enters the city name and clicks on the button, then the API Request is been sent to the OpenWeatherMap and the response is been retrieved in the application which consists of weather, wind s 7 min read How to create a Landing page using HTML CSS and JavaScript ? A landing page, also referred to as a lead capture page, static page, or destination page, serves a specific purpose and typically appears as a result of online advertising or search engine optimization efforts. Unlike a homepage, a landing page is stripped of distractions and focuses on capturing v 7 min read Create a Build A Simple Alarm Clock in HTML CSS & JavaScript In this article, we will develop an interactive simple Alarm Clock application using HTML, CSS, and JavaScript languages.Develop an alarm application featuring date and time input fields for setting alarms. Implement comprehensive validation to prevent duplicate alarms and enforce a maximum limit of 5 min read Create a Music Website Template using HTML, CSS & JavaScript A Music Website Template is a pre-designed layout for creating a music-themed webpage. By utilizing HTML, CSS, and JavaScript, developers can craft a functional and visually appealing website with features like play/pause controls, sections for home, music, about, and contact.Step-by-Step Guide to c 3 min read Create a Bookmark Landing Page using HTML CSS and JavaScript In this article, we are going to implement a Bookmark Landing Page using HTML, CSS, and JavaScript. Users can effortlessly add, manage, and remove bookmarks, resulting in a tidy digital library for their favorite websites. Bookmarking the Landing Page refers to a web page or website where the users 4 min read Create a Coin Flip using HTML, CSS & JavaScript We will display the styled INR coin to the user and there will be a styled button (Toss Coin). We will create the entire application structure using HTML and style the application with CSS classes and properties. Here, JavaScript will be used to manage the behavior of the Coin Flip and will be used 4 min read How to create a revealing sidebar using HTML CSS and JavaScript? A revealing sidebar is a hidden UI element that becomes visible upon user interaction, such as clicking or swiping, providing navigation links. The content of the page will rotate and the navigation bar will reveal itself when the menu button is clicked. ApproachCreate an HTML file with headings and 3 min read Create an Online Payment Project using HTML CSS & JavaScript In this article, We will create a responsive online payment page using HTML, CSS & Javascript.Here, we will learn about the project's structure before beginning to code each page individually. To ensure adequate understanding, we also gave the project's output after it was created.Prerequisites: 4 min read Like