LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
CSS
body {
  background-color: #232f38;
  font-family: Lato;
  font-weight: 300;
  color: #54626c;
  font-size: 20px;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: inherit;
}

.plain, .flip-link {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  display: inline;
  background: transparent;
  color: inherit;
  padding: 0;
  border: none;
}

.fill-space, .main {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.fill-width, .login.box .button,
.login.box .input.text {
  width: 100%;
}

.center, .main {
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes loading-spinner {
  from {
    transform: rotateZ(0deg);
  }
  to {
    transform: rotateZ(360deg);
  }
}
.loader {
  width: 62px;
  height: 62px;
  margin-left: -34px;
  margin-top: -34px;
  display: inline-block;
  border-radius: 100%;
  border: 3px solid transparent;
  border-bottom-color: white;
  animation: loading-spinner linear 0.8s infinite;
  opacity: 0;
}

.main {
  pointer-events: none;
  perspective: 1500px;
}

.box {
  background-color: #1c272f;
  box-sizing: border-box;
}
.box .input {
  background-color: rgba(255, 255, 255, 0.75);
}
.box .input:focus {
  background-color: #fff;
  outline: none;
}
.box .button {
  background-color: #253745;
}
.box .button:focus, .box .button:hover {
  outline: none;
  background-color: #274053;
}

.shadowed.box, .login.box {
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.07);
}

.input,
.button {
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  box-sizing: border-box;
  border: none;
  padding: 0.65em 0.9em;
}
.input.big, .login.box .input.button,
.login.box .input.text,
.button.big,
.login.box .button,
.login.box .button.input.text {
  font-size: 22px;
}

.input {
  background-color: #fff;
}
.input::-webkit-input-placeholder {
  color: #54626c;
}

.button {
  cursor: pointer;
  color: #767f85;
  background-color: #274053;
}

.login.box {
  pointer-events: auto;
  backface-visibility: hidden;
  width: 380px;
  padding: 43px;
}
.login.box h1 {
  text-align: center;
  font-size: 56px;
  margin: 0;
  margin-bottom: 1em;
}
.login.box .button,
.login.box .input.text {
  display: block;
  margin-top: 22px;
}

#login-box-background {
  transform: rotateY(180deg);
}
#login-box-background h1 {
  font-size: 44px;
}

.flip-box {
  text-align: center;
}

.flip-link {
  cursor: pointer;
  display: inline-block;
  margin-top: 1.75em;
  text-shadow: 0 0 2.25em rgba(255, 255, 255, 0.75);
  color: #5F717D;
}
.flip-link:hover, .flip-link:focus {
  color: #788B98;
  outline: none;
}
JS
var loginBoxForeground = document.querySelector('#login-box-foreground');
var loginBoxBackground = document.querySelector('#login-box-background');
var loginBoxes = [ loginBoxForeground, loginBoxBackground ];

var sendBtn = document.querySelector('#btn-send');
var submitBtn = document.querySelector('#btn-submit');
var loginBtn = document.querySelector('#btn-login');
var forgottenBtn = document.querySelector('#btn-forgotten');

var flipLoginBox = function() {
  if (loginBoxForeground.hasAttribute('data-gsap-flipped')) {
    loginBoxForeground.removeAttribute('data-gsap-flipped');
    loginBoxBackground.setAttribute('data-gsap-flipped', '');
  } else {
    loginBoxBackground.removeAttribute('data-gsap-flipped');
    loginBoxForeground.setAttribute('data-gsap-flipped', '');
  }

  loginBoxes.filter(function(box) {
    return !box.hasAttribute('data-gsap-flipped');
  })[0].querySelector('[data-autofocus]').focus();
  TweenMax.to(loginBoxForeground, 0.5, { rotationY: '+=180' });
  TweenMax.to(loginBoxBackground, 0.5, { rotationY: '+=180' });
};

var resetBox = function(box) {
  box.removeAttribute('style');
};

var shrinkBox = function(box) {
  box.setAttribute('data-gsap-last-height', box.clientHeight);
  
  var timeline = new TimelineLite;
  
  timeline.set(box, { height: box.clientHeight });
  
  var boxContents = Array.from(box.childNodes);
  boxContents.forEach(function(childNode, i) {
    timeline.to(childNode, 0.3, { opacity: 0 }, '-=0.275');
  });
  
  var loader = document.createElement('span');
  loader.className = 'loader';
  
  var time = timeline.recent().endTime();
  boxContents.forEach(function(childNode, i) {
    timeline.set(childNode, { display: 'none' }, time);
  });
  
  timeline.call(function() {
    box.appendChild(loader);
  });
  
  timeline.to(box, 0.8, {
    borderRadius: '100%',
    width: 0,
    height: 0,
    ease: Power2.easeInOut
  });
  
  timeline.to(loader, 0.4, { opacity: 1 }, '-=0.25');
};

var growBox = function(box) {
  var timeline = new TimelineLite;
  var boxContents = Array.from(box.childNodes);
  boxContents.pop();
  
  timeline.to(box.lastChild, 0.4, { opacity: 0 });
  
  timeline.call(function() {
    box.removeChild(box.lastChild);

    boxContents.forEach(function(childNode) {
      if (childNode.nodeType === 1)
        childNode.style.display = '';
    });
  });

  var height = 0;
  timeline.call(function() {
    height = box.scrollHeight;
  });
  
  timeline.to(box, 0.6, {
    borderRadius: 0,
    width: 380,
    height: box.getAttribute('data-gsap-last-height'),
    ease: Power2.easeInOut,
    immediateRender: false
  });
  
  timeline.set(box, { width: '', height: '' });
  
  boxContents.forEach(function(childNode, i) {
    timeline.to(childNode, 0.3, { opacity: 1 }, i === 0 ? '+=0' : '-=0.275');
  });
};

var shrinkLoginBox = function() {
  var activeBox = loginBoxes.filter(function(box) {
    return !box.hasAttribute('data-gsap-flipped');
  })[0];
  
  shrinkBox(activeBox);
};

var growLoginBox = function() {
  var activeBox = loginBoxes.filter(function(box) {
    return !box.hasAttribute('data-gsap-flipped');
  })[0];
  
  growBox(activeBox);
};

var resetLoginBox = function() {
  var activeBox = loginBoxes.filter(function(box) {
    return !box.hasAttribute('data-gsap-flipped');
  })[0];
  
  resetBox(activeBox);
};

forgottenBtn.addEventListener('click', flipLoginBox);
loginBtn.addEventListener('click', flipLoginBox);
submitBtn.addEventListener('click', shrinkLoginBox);
sendBtn.addEventListener('click', shrinkLoginBox);
window.growLoginBox = growLoginBox;
Host Instantly Drag and Drop Website Builder

 

Term
Tue, 12/26/2017 - 09:49

Related Codes

Pen ID
Pen ID
Pen ID