Gliding along a div and concealing it out of view, making it seem like it has disappeared

I attempted to slide down the ".preloader" div after a 2-second delay using JQUERY, but I couldn't get it to work as expected. I didn't want to use a toggle button for this effect. I also experimented with creating an animation using @keyframes, but encountered an issue where the div extended beyond the page boundaries and triggered a scrollbar, revealing that the div was actually positioned below the HTML page content.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  background-image: url('background_image_one.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

<!-- Other CSS styles-->

.preloader {
  background: #000823 url("bold-preloader.gif") no-repeat center center; 
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
  animation: slide 4s ease-out forwards;
}

@keyframes slide{
  0% {}
  
  50%{
    transform: translateY(0px);
    overflow: hidden;}
    
  100%{
    transform: translateY(100vh);
    overflow: hidden;
  }
}

While observing the snippet, you can notice that when the div slides down, it causes additional space below the main body of the page.

https://i.stack.imgur.com/WAmqM.png

javascripthtmljquerycss

Answer №1

Instead of shifting the element's position upward, causing it to still occupy space and create a scroll bar as it moves off-screen, you can instead scale it down to 0 in the Y direction by adjusting the transform-origin to the bottom of the page:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Poppins", sans-serif;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  background-image: url('background_image_one.jpg');
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}



.container {
  
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center; 
}

.card {
  transform-style: preserve-3d;
  background-color: rgba(0, 0, 0, 0.5); 
  border: white;
  border-style: solid;
  min-height: 60vh;
  width: 35rem;
  border-radius: 30px;
  padding: 0rem 5rem;
  box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}

.avatar {
  min-height: 35vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatarimg {
  width: 40rem;
  z-index: 2;
  transition: all 0.75s ease-out;
}


.info h1 {
  font-size: 3rem;
  transition: all 0.75s ease-out;
  display: flex;
  justify-content: center;
  color: white;
}
.info h3 {
  font-size: 1.3rem;
  padding: 2rem 0rem;
  color: #585858;
  font-weight: lighter;
  transition: all 0.75s ease-out;
}
.sizes {
  display: flex;
  justify-content: space-evenly;
  transition: 0.5s ease-out;
  padding-bottom: 2rem;
}
.sizes button {
  /* padding: 0.5rem 2rem; */
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  font-weight: bold;
  width: 100%;
  padding: 1rem 0rem ;
  background: #f54642;
  border: none;
  color: white;
  border-radius: 30px;
  font-weight: bolder;
  margin: 1rem;
  
}
button.active {
  background: #585858;
  color: white;
}
.purchase {
  margin-top: 5rem;
  transition: all 0.75s ease-out;
}


/* My Custom Buttons Here */
input[type="text"], input[type="password"] {
  border: none;
  border-bottom: 0px;
  background: rgba(255, 255, 255, 0.2);
  color: whitesmoke;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  outline: none;
  height: 40px;
  width: 100%;
  font-size: 16px;
  transition: all 0.75s ease-out;
}

.forminput p {
  font-size: 18px;
  color: white;
}

.forminput {
  padding-bottom: 3rem;
}

.preloader {
  background: #000823 url("bold-preloader.gif") no-repeat center center; 
  min-height: 100vh;
  height: 100vh;
  width: 100%;
  position: fixed;
  z-index: 100;
  animation: slide 4s ease-out forwards;
  
}

@keyframes slide{
  0% {}
  
  50%{
    transform: scaleY(1);
    overflow: hidden;
    }
    
  100%{
    transform: scaleY(0);
    transform-origin: 0 100vh;
    overflow: hidden;
  }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d Card Effect</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    

</head>
<body>
    <div class="preloader">
    </div>

    <div class="container">
        <div class="card">
            <div class="avatar">
                <div class="circle"></div>
                <img src="./userAvatar.png" alt="avatarimg" class="avatarimg">
            </div>
            <div class="info">
                <h1 class="title">Log In</h1>
                
                <div class="forminput">
                    <p>Email:</p>
                    <input type="text" name="" placeholder="">
                    <p>Password:</p>
                    <input type="password" name="" placeholder="">
                </div>
                </div>
                <div class="sizes">
                    <button>Login</button>
                    
                    <button>Register</button>
                </div>
            
        </div>
    </div>
</div>
    <script src="./app.js"></script>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering 'Illegal Invocation' error while running a basic script

Exploring the Speech Recognition API has been on my to-do list, so I decided to create a simple page that initiates recognition when clicking on the body element. Here is a snippet from my scripts.js file: var recognition = new window.webkitSpeechRecognit ...

javascript

How can the useEffect Hook be utilized to perform a specific operation just one time?

My goal was to have a modal popup appear if the user moves their cursor outside of the window. I experimented with the following code: React.useEffect(() => { const popupWhenLeave = (event) => { if ( event.clientY <= 0 || ...

javascriptreactjsreact-hooksevent-handling

How to use bootstrap to resize and center a div element

I'm struggling with formatting a form that is enclosed in a bordered fieldset. Currently, all the form fields are filling the entire width of the fieldset. However, I want certain textfields to be shorter and centered within the fieldset. I have attem ...

csstwitter-bootstrap

Display or conceal <ul>'s using JavaScript when the mouse enters or leaves

I'm encountering an issue with a basic JavaScript function. The goal is to toggle the dropdown menu on my website when the mouse hovers over or leaves the menu. The problem arises because my script is triggered by the ul tags within my menu, and I ha ...

javascripthtmlcss

The bootstrap modal is appearing correctly, but the content within it is not displaying properly

I've been working on a website and added a modal for signup. However, when the user clicks on the signup button, the modal appears but the content inside it is not clickable. Can someone please help me with this issue? Here is the code snippet I am us ...

javascriptcsstwitter-bootstrap

Adding a button to the right of a text-field input in Vuetify app

I need advice on the best way to use Vuetify in order to display a button to the right of a text-field (attached). I've checked the main site for information but couldn't find anything related to this specific scenario. <v-row clas ...

cssvue.jsvuejs2vue-componentvuetify.js

Attempting to design a customized dropdown navigation feature using HTML

I am having some trouble creating a dropdown menu that functions properly. Here is the code I have written: <div> <H1><FONT="TIMES ROMAN" FONT-COLOR="BLUE" > SELECT A Subject:</H1> <select id ="dropDownId"> <!-- as ...

jqueryhtml

Angular: the page continues to display outdated information after using router.navigate

My web app allows users to select products to purchase. They can pause the configuration process and resume it later. Currently, I am using localStorage to store information about the products and their prices. There is a page in my app that displays a ta ...

javascriptangular

The variable within the jQuery AJAX function appears to be undefined

Here is the code snippet I am working with: function updateValue(type, id, updatedValue) { // The log below shows "updatedValue-encodeURIComponent(updatedValue)" console.log(updatedValue + "-" + encodeURIComponent(updatedValue)); if (type > ...

jqueryajax

Choose a HTML element <a> containing a hyperlink reference and a nested child element <li>

Does anyone know of a way in javascript/css to select the (n) <li> in my code, while also specifying that the <li> must have a parent with the current <a> tag containing a specific href link? <a href="www.link.com">CATEGORY NAME& ...

javascripthtmljquerycss

Having issues with Vue.js v-repeat not displaying any content

I have just started learning about vue.js. I attempted to display a simple list, but it is not showing anything. Here is my code: <html> <head> <title>VUE Series</title> <link rel="stylesheet" type="text/css" ...

javascriptvue.jsrepeat

Navigate through content easily using the arrow keys on your keyboard with the help of Easy Slider

I'm attempting to modify the Easy Slider in order to enable navigation of the slideshow with the arrow keys on the keyboard. I made adjustments to the javascript's animate function, changing it from: default: t = dir; break; ...to: default: t ...

javascriptjquerykeyboardslideshow

Align content to the bottom using Bootstrap 4

Looking for help with aligning content to the middle and bottom on a full-page bootstrap layout? The first page has a background image in the first div, and a darker layer on top in the second div. <div class="h-100 w-100"> <div class="h-100 w-10 ...

htmlcsstwitter-bootstrapflexbox

use ajax to retrieve response using jquery

I am trying to implement a full div modal in Bootstrap 4 that fetches content using AJAX/PHP response. The PHP code I have contains the #ofTheLinkCallAction identifier. <a href="#demoModal" data-toggle="modal" data-target="#demoModal" class="modal-acti ...

phpjqueryajax

Is there a way to ensure that this ajax code functions seamlessly with all types of HTML files?

Currently, I am facing a challenge with an ajax call that retrieves data from a database, which I need to load into an HTML file. The issue lies in the fact that I have various HTML files and I am unaware of their contents. Despite spending countless hour ...

javascripthtmlajax

I'm so confused about the operation of each method in this context

I am experimenting with a simple process involving setTimeout function. My goal is to make the letters of a name appear individually and gradually at different times. For example, if the name is NAZ, I want the letters to appear in this order: first N, the ...

javascriptjquery

I am attempting to trigger a mouseup event following a mousedown action

elements[0].onmousedown = function(){ console.log('screen clicked.'); triggerMouseUp(); }; I just need to incorporate a function in my code that simulates mouseup event, even when the user is still holding down the click button. e ...

javascripthtmlcssangularjs

Arranging nested divs in relation to one another in a specific position

This code represents a chart in HTML. The goal is to have the second (middle) div start where the first (top) div ends, which has a width of 75px. To achieve this, the margin-left for the middle div is set to 75px in the following styles. Following the sam ...

htmlcss

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

htmlangularnavigationnavbar

Parsing through JSON data to showcase numerous rows

I have been struggling with JSON data for the past few days, as I haven't had much experience working with it. Part of my application that utilizes jQuery data tables displays information about available funds on a service contract. When diving deepe ...

jqueryjson