Есть несколько блоков, при клике на каждый из них кликнутый блок начинает увеличиваться на всю ширину контейнера, сдвигая другие блоки пропорционально. Например, при клике на центральный блок левый блок смещается влево за пределы экрана, верхний - вверх, правый - вправо, пока центральный блок не станет на всю ширину контейнера. Сдвиг вправо и вниз вроде получился, а как сдвинуть левые и верхние блоки за пределы экрана?
<!DOCTYPE html>
<html lang="ru">
</head>
<style>
#header {
text-align: center;
background: crimson;
color: white;
width: 20%;
}
#header2 {
text-align: center;
background: black;
color: white;
width: 20%;
clear: both;
}
#header3 {
text-align: center;
background: red;
color: white;
width: 20%;
clear: both;
}
#header4 {
text-align: center;
background: red;
color: white;
width: 20%;
}
.header {
height: 20px;
transition: width 10s, height 10s;
transform: translate(-50%. -50%);
display: inline-block;
}
.header__20 {
height: 20px;
}
.header__100 {
height: 100vh;
width: 100vw!important;
}
img {
width: 100%;
}
.container {
position: relative;
left: 50%;
margin-right: -50%;
transform: translate(-50%, 0%);
background: #000;
max-width: 1440px;
min-width: 1024px;
white-space: nowrap;
}
header {
width: 100%;
height: 20%;
background: #000;
padding: 0;
margin: 0;
}
.container .ratio16-9 {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.container:before {
content: '';
display: block;
padding-top: 56.25%;
background: crimson;
}
</style>
<body>
<div class="container">
<div class="ratio16-9">
<div id="header3" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
<div id="header" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
<div id="header2" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div><br>
<div id="header4" class="header"><img src="http://codelamp.uk/images/jsf/blue_parrot_wallpaper-normal.jpg" /></div>
</div></div>
</body>
</html>
function classToggle() {
this.classList.toggle('header__100');
}
document.querySelector('#header').addEventListener('click', classToggle);
function classToggle() {
this.classList.toggle('header__100');
}
document.querySelector('#header2').addEventListener('click', classToggle);
function classToggle() {
this.classList.toggle('header__100');
}
document.querySelector('#header4').addEventListener('click', classToggle);
function classToggle() {
this.classList.toggle('header__100');
}
