Note: I'm looking for vanilla JS preferably, since jQuery isn't something I can use in this project
I have a somewhat complex grid structure:
body {
margin: 0;
height: 100vh;
text-align: center;
}
.grid-container {
height: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
grid-template-areas: "tl tr" "bl br";
}
.tl {
background: #fdfdfd;
color: #2f2f2f;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: ". . . ." ". . text-tl ." ". . . button-tl";
grid-area: tl;
}
.button-tl {
grid-area: button-tl;
background: #2f2f2f;
color: #fdfdfd;
}
.text-tl {
grid-area: text-tl;
}
.tr {
background: #2f2f2f;
color: #fdfdfd;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: ". . . ." ". text-tr . ." "button-tr . . .";
grid-area: tr;
}
.button-tr {
grid-area: button-tr;
background: #fdfdfd;
color: #2f2f2f;
}
.text-tr { grid-area: text-tr; }
.br {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: "button-br . . ." ". text-br . ." ". . . .";
grid-area: br;
}
.button-br {
grid-area: button-br;
background: #2f2f2f;
color: #fdfdfd;
}
.text-br { grid-area: text-br; }
.bl {
background: #2f2f2f;
color: #fdfdfd;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr;
grid-template-areas: ". . . button-bl" ". . text-bl ." ". . . .";
grid-area: bl;
}
.button-bl {
grid-area: button-bl;
background: #fdfdfd;
color: #2f2f2f;
}
.text-bl { grid-area: text-bl; }
<div class="grid-container">
<div class="tl">
<div class="button-tl">button A</div>
<div class="text-tl">word A</div>
</div>
<div class="tr">
<div class="button-tr">button B</div>
<div class="text-tr">word B</div>
</div>
<div class="br">
<div class="button-br">button C</div>
<div class="text-br">word C</div>
</div>
<div class="bl">
<div class="button-bl">button D</div>
<div class="text-bl">word D</div>
</div>
</div>
I want to fire an animation when a user clicks one of those button elements using Anime.js, basically what amounts to a window blind or something similar to a window blind going from the top of the screen to the bottom.
This is the code, I'm sorry because I genuinely could not get this to work on sites like CodePen. The only thing you need here in your package.json
is "dependencies": { "animejs":"^3.1.0"}
if you want to see the animation I'm talking about.
import anime from '/node_modules/animejs/lib/anime.es.js';
document.addEventListener('DOMContentLoaded', function() {
setTimeout(function() {
anime({
targets: '.animationBox',
keyframes: [{
height: "10%"
},
{
height: "20%"
},
{
height: "30%"
},
{
height: "40%"
},
{
height: "50%"
},
{
height: "60%"
},
{
height: "70%"
},
{
height: "80%"
},
{
height: "90%"
},
{
height: "100%"
}
],
duration: 2000,
easing: 'linear'
});
}, 500);
});
body {
margin: 0;
background: #241B2F;
height: 100vh;
}
#App {
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
width: 100%;
}
#hiddenBox {
height: 100%;
width: 100%;
}
.animationBox {
background: white;
height: 0%;
width: 100%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="index.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js"></script>
<title>Anime.js</title>
</head>
<body>
<div id="App">
<div id="hiddenBox">
<div class="animationBox"></div>
</div>
</div>
</body>
<script type="module" src="index.js"></script>
</html>
I want to have that white 'window blind' scroll down on top of the all the other elements on the page, but I don't know how to structure my HTML/CSS to avoid breaking the entire layout. I've tried:
z-index
, which didn't seem to accomplish anything, presumably because z-index
requires position:relative
or position:absolute
, which also breaks the griddisplay: none
and other variations like visibility: hidden
, but these didn't work either and still caused the structure to get messed upI guess a TL;DR is: How do I overlay a div on top of a grid without breaking anything in the grid layout? Basically, this image:
You can add a div to the end of your site's HTML, just before the closing tag with the following CSS.
<div id="divname" style="
background-color:white;
position: fixed;
top: 0px;
right: 0px;
height: 0;
width: 100vw;">
</div>
That should create an overlay div that you can QuerySelect in JS to animate.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With