Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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');
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Фильтрация товаров из файла JSON по по трем различным фильтрам на чистом JS? nathan111777 Общие вопросы Javascript 4 26.08.2019 15:02
данные от сервера на чистом js atanov AJAX и COMET 3 05.04.2018 12:03
Модальное окно, запретить скролл всему документу на чистом JS TommyWork Общие вопросы Javascript 8 13.04.2017 10:39