Slide down/up with transform scale

In this example below you will see how to do a Slide down/up with transform scale with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nanovisor, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nanovisor ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Slide down/up with transform scale</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class='box'>
  &#9733; click here &#9733;
</div>

<div class="sliding-block">
  <article>
    <h2>Боец Росгвардии в баре "Пивко" остановил буйного спортсмена выстрелом в правую ягодицу</h2>
    <p>Стрельба произошла, когда сотрудники Росгвардии попытались усмирить пьяных посетителей бара в городе Абаза. Силовикам удалось схватить одного дебошира, но ему на помощь пришли двое приятелей. Один юноша стал душить росгвардейца, но тот выстрелил из автомата ему в ягодицу.</p>
  </article>
</div>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/nanovisor/slide-downup-with-transform-scale-ZBbjeB */
body {
  min-width: 400px;
  background-color: #111;
}

article {
  padding: 30px 20px;
  font-family: "Palatino Linotype";
  color: indianred;
}
article h2 {
  margin: 0;
  text-align: center;
}

.box {
  height: 50px;
  background-color: lightskyblue;
  text-align: center;
  line-height: 50px;
  font-size: 1.5em;
  text-transform: uppercase;
  font-family: impact;
  color: aliceblue;
  cursor: pointer;
}

.sliding-block {
  background-color: lightcyan;
  transition: opacity .3s ease-out, transform .3s ease-out;
  transform-origin: top;
  overflow: hidden;
}

.slideUp {
  opacity: .5;
  transform: scale(1, 0);
}


/*Downloaded from https://www.codeseek.co/nanovisor/slide-downup-with-transform-scale-ZBbjeB */
var block = document.getElementsByClassName('box')[0],
    slidingBlock = document.getElementsByClassName('sliding-block')[0];

block.onclick = function(e) {
  slidingBlock.classList.toggle('slideUp');
}

Comments