Make absolute positioned div cover the viewport
Question
I'm working on a jQuery animation that have a absolute positioned div that is generated on a specific location of the viewport ( left: 150px ) and this div grows vertically and horizontally, covering the entire viewport
But unfortunately, the div is overflowing the viewport, and not covering the entire screen
$(document).ready(function() { function generateChild(top, bottom, left, right) { $("#divGenerator").append(` <div style="top:${top};bottom:${bottom};left:${left};right:${right};" class="child"></div> `); } generateChild("50vh", "0", "80vw", "0"); /* setInterval(function() { $(".child").animate({ "transform": "translate3d(0, 0, 0)", "transition": "all 0.5s ease-out" }, 3000, function() { $(this).fadeOut().remove(); }); }, 1000); */ })
body { margin: 0; overflow: hidden; } #divGenerator { position: relative; height: 100vh; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: black; border: 1px solid black; } .child { position: absolute; width: 20px; height: 20px; border: 1px solid white; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Trippy Waves</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> </head> <body> <div id="divGenerator"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js"></script> </body> </html>
1 answers
solution1
2 ACCPTED 2018-10-21 17:16:40
In order to achieve this effect you need several conditions:
- use
position:fixed(notabsolute), so your element is positioned relative to the viewport, not to its closest relatively positioned parent. - get the initial
top,left,widthandheightfrom the.getBoundingClientRect()of the element you're starting from. Note this method is defined on the DOM element, not on the jQuery wrapper (so you'll need$(selector).get(0).getBoundingClientRect()) - animate from those positions towards:
top:0;left:0;width:100vw;height:100vh.
In this particular example you don't need getBoundingClientRect() , because you generate your element from arbitrary data (from you function) - but normally you want it as it gets position of an element relative to current position of viewport (including scroll, etc...).
$(document).ready(function() { function generateChild(top, bottom, left, right) { $("#divGenerator").append(` <div style="top:${top};bottom:${bottom};left:${left};right:${right};" class="child"></div> `); } generateChild("50vh", "0", "80vw", "0"); setInterval(function() { $(".child").animate({ "width": "100vw", "height": "100vh", "top":0, "left":0 }, 3000, function() { $(this).fadeOut().remove(); }); }, 1000); })
body { margin: 0; overflow: hidden; } #divGenerator { position: relative; height: 100vh; top: 0; bottom: 0; left: 0; right: 0; margin: auto; background-color: black; border: 1px solid black; } .child { position: fixed; width: 20px; height: 20px; border: 1px solid white; }
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Trippy Waves</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="index.css"> </head> <body> <div id="divGenerator"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="index.js"></script> </body> </html>
Personal advice: don't use .animate() . Use velocity .
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.