<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@500&display=swap" rel="stylesheet">
<div class="panels">
<div class="panel panel1">
<h3>hey</h3>
<h1>let's</h1>
<h3>dance</h3>
</div>
<div class="panel panel2">
<h3>give</h3>
<h1>take</h1>
<h3>receive</h3>
</div>
<div class="panel panel3">
<h3>experience</h3>
<h1>it</h1>
<h3>today</h3>
</div>
<div class="panel panel4">
<h3>give</h3>
<h1>all</h1>
<h3>you can</h3>
</div>
<div class="panel panel5">
<h3>life</h3>
<h1>in</h1>
<h3>motion</h3>
</div>
</div>
*{
margin: 0;
padding: 0;
}
.panels{
height: 100vh;
display: flex;
}
.panel{
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-around;
flex: 1;
transition:
flex cubic-bezier(.61,-0.19,.7,-0.1) 600ms,
font-size 0s;
overflow: hidden;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;
filter: brightness(50%);
font-family: 'Noto Sans JP', sans-serif;
font-size: 15px;
}
.panel>*{
color: white;
text-transform: capitalize;
text-shadow: 0 0 4px rgba(0, 0, 0, 0.72), 0 0 14px rgba(0, 0, 0, 0.45);
transition: 300ms;
}
.panel1{
background: url("https://cdn.pixabay.com/photo/2016/11/19/09/45/action-1838330_1280.jpg") center no-repeat;
background-size: cover;
}
.panel2{
background: url("https://cdn.pixabay.com/photo/2015/03/17/14/05/sparkler-677774_1280.jpg") center no-repeat;
background-size: cover;
}
.panel3{
background: url("https://cdn.pixabay.com/photo/2018/08/21/23/29/fog-3622519_1280.jpg") center no-repeat;
background-size: cover;
}
.panel4{
background: url("https://cdn.pixabay.com/photo/2015/11/07/11/16/coffee-1030971_1280.jpg") center no-repeat;
background-size: cover;
}
.panel5{
background: url("https://cdn.pixabay.com/photo/2014/04/07/16/51/leaf-318743_1280.jpg") center no-repeat;
background-size: cover;
}
.panel>*:first-child{
transform: translateY(-200px);
}
.panel.open-active>*:first-child{
transform: translateY(0);
}
.panel>*:last-child{
transform: translateY(200px);
}
.panel.open-active>*:last-child{
transform: translateY(0);
}
.open{
flex: 5;
filter: brightness(100%);
font-size: 1.5em;
}
let panels = document.querySelectorAll('.panel');
function f(){
this.classList.toggle('open');
}
function openActive(event){
if (event.propertyName.includes('flex')) {
this.classList.toggle('open-active')
}
}
panels.forEach((panel)=>panel.addEventListener('click',f));
panels.forEach((panel)=>panel.addEventListener('transitionend',openActive))
