LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
.c-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100vh;
  position: relative;
  overflow: hidden;
}
.c-section__bg {
  display: block;
  min-width: 126%;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) scale(0.8);
          transform: translate(-50%, -50%) scale(0.8);
  -webkit-transition: 2s cubic-bezier(0.5, 0.5, 0.1, 1);
  transition: 2s cubic-bezier(0.5, 0.5, 0.1, 1);
}
.js-opened .c-section__bg {
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
}
.c-section__curtain {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  mix-blend-mode: exclusion;
  box-shadow: inset 0 -100vh 0 black, inset 0 -50vh 0 white, inset 0 50vh 0 white;
  -webkit-transition: 2s cubic-bezier(0.5, 0.5, 0.1, 1);
  transition: 2s cubic-bezier(0.5, 0.5, 0.1, 1);
}
.js-opened .c-section__curtain {
  box-shadow: inset 0 0 0 white, inset 0 0 0 white;
}
.c-section__btn {
  padding: 1.5em 3em;
  position: relative;
  font: bold 1em sans-serif;
  color: black;
  background: white;
  border: none;
  cursor: pointer;
  outline: none;
}
JS
const $btn = document.querySelector('.c-section__btn')
const $section = document.querySelector('.c-section')

$btn.addEventListener('click', () =>
    $section.classList.toggle('js-opened'))
Host Instantly Drag and Drop Website Builder

 

Term
Mon, 11/27/2017 - 22:05

Related Codes

Pen ID
Pen ID
Pen ID