Jump to content

Shifting elements up and left off screen in pure js


kertcvc
 Share

Recommended Posts

There are several blocks, when you click on each of them, the clicked block begins to grow to the full width of the container, shifting other blocks proportionally. For example, when you click on the center box, the left box moves to the left off the screen, the top box moves up, and the right box moves to the right, until the center box fits the full width of the container. The shift to the right and down seems to work, but how to shift the left and top blocks off the screen?

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');
}
<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
<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>

#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 {
  width: 1440px;
}

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;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...