stackoom
  简体   繁体   中英

Sliding down a div and hiding it, as if it does not exist

 原文  2021-06-22 19:46:13  3   1    javascript/ html/ jquery/ css

Question

I was trying to slide down this ".preloader" div down, after time interval of 2 seconds, and tried JQUERY, but I couldn't figure out why it was not working. Also, I didn't want to have a toggle button. I tried to create an animation with @keyframes, but as soon as the div goes out of the boundaries of the page, a scrollbar is shown, which you could use to scroll down and see that actually the div is placed underneath the html 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; } /* тука са моите бутони */ 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: translateY(0px); overflow: hidden;} 100%{ transform: translateY(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>

As you can see on the snippet, when the div is sliding down, it creates space underneath the main part of the body.

在此处输入图片说明

1 answers

solution1
 0  2021-06-22 20:09:08

Instead of translating the element, which means it still has height so you get a scroll bar as it disappears downwards, you could scale to 0 in the Y direction, having changed the transform-origin of the Y 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; } /* тука са моите бутони */ 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question jquery - sliding iframe hiding a div Div sliding down menu Sliding animation when hiding/showing a div Sliding down new div below another div Why does the div move down before sliding when I try to hide it with jQuery UI? Sliding down the bottom of a div in a grid, without sliding the entire row. jquery .slideUp div keeps sliding back down sliding up down DIV on click with more categories Div sliding down with button and disappearing after scrolling down Slide div up before sliding next div down?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM