Показать сообщение отдельно
  #1 (permalink)  
Старый 01.12.2020, 16:05
Новичок на форуме
Отправить личное сообщение для GerardJsov Посмотреть профиль Найти все сообщения от GerardJsov
 
Регистрация: 01.12.2020
Сообщений: 2

Сдвиг элементов вверх и влево за пределы экрана на чистом js
Есть несколько блоков, при клике на каждый из них кликнутый блок начинает увеличиваться на всю ширину контейнера, сдвигая другие блоки пропорционально. Например, при клике на центральный блок левый блок смещается влево за пределы экрана, верхний - вверх, правый - вправо, пока центральный блок не станет на всю ширину контейнера. Сдвиг вправо и вниз вроде получился, а как сдвинуть левые и верхние блоки за пределы экрана?

<!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');
}
Ответить с цитированием