Jump to content

kertcvc

Members
  • Posts

    1
  • Joined

  • Last visited

Everything posted by kertcvc

  1. 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; }
×
×
  • Create New...