<div class=" block block_0">
<h3>Блок 0</h3>
</div>
<div class=" block block_1">
<h3>Блок 1</h3>
</div>
<div class="block block_2">
<h3>Блок 2</h3>
</div>
<div class="block block_3">
<h3>Блок 3</h3>
</div>
<div class="block block_4">
<h3>Блок 4</h3>
</div>
body {
padding: 0;
}
.block {
width: 100%;
height: 50vh;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.block_0 {
background: #30968d;
}
.block_1 {
background: #484848;
}
.block_2 {
background: #a78a8a;
}
.block_3 {
background: #9c9759;
}
.block_4 {
background: #4e756e;
}
h3 {
margin: 0;
color: #fff;
text-transform: uppercase;
font-size: 2rem;
}
$(document).ready(function () {
var slide = function () {
$(".block_0").slideUp(1000, 'swing');
}
window.setTimeout(slide, 4000);
});
This Pen doesn't use any external CSS resources.