Please note that I am specifically seeking vanilla JS solutions, as jQuery is not compatible with this project
I have a grid structure that is somewhat complex:
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>My objective is to trigger an animation when a user clicks on one of the buttons utilizing Anime.js. The animation should simulate a window blind effect moving from the top to bottom of the screen.
The code provided below did not work properly on platforms like CodePen. To view the intended animation using Anime.js, you only need to include
"dependencies": { "animejs":"^3.1.0"}package.json.
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 am facing challenges trying to overlay a div element on top of my existing grid layout without disrupting the overall design. I experimented with different approaches such as:
- Using
z-index, however, it didn't yield the desired results probably because it requiresposition:relativeorposition:absolute - Applying styles like
display: noneandvisibility: hidden, but these methods also caused layout issues - Moving the animated white div off-screen and positioning it onclick
In essence, how can I create an overlay on my grid layout without affecting its structure? The end goal is achieving an effect similar to the following image:https://i.sstatic.net/I6fg6.png