Slide contact form on pure js

index.html

<!-- 
autor: zhukov sergey
website: www.websiterog.ru
email : [email protected]
-->

<div id="contactform">
  <div id="contact-button">   
    <div class="rotated-text">Contact</div>
  </div>
  <form>
    <input type="text"/><input type="text"/><input type="text"/>
    <textarea row="6" col="5"></textarea> 
  </form> 
</div>

script.js

/* easing functions from: https://github.com/gdsmith/jquery.easing/blob/master/jquery.easing.js
*/

var easeOutBounce = function (x, t, b, c, d) {
		if ((t/=d) < (1/2.75)) {
			return c*(7.5625*t*t) + b;
		} else if (t < (2/2.75)) {
			return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
		} else if (t < (2.5/2.75)) {
			return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
		} else {
			return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
		}
}

function Animate(elem, propName, duration, start, end)  {
    var start_time = new Date().getTime();
    var interval = setInterval(function() {
      var current_time = new Date().getTime(),
        remaining = Math.max(0, start_time + duration - current_time),
        temp = remaining / duration || 0,
        percent = 1 - temp;

      if (start_time + duration < current_time) clearInterval(interval);

      var pos = easeOutBounce(null, duration * percent, 0, 1, duration),
        current = (end - start) * pos + start;

      elem.style[propName] = current + 'px';
    }, 1);
  }

var elem = document.getElementById('contactform');
var opened = false; 

document.getElementById('contact-button').onclick = function() {
  if (opened) {
    Animate(elem, 'left', 800, 0, -405);    
    opened = false;
  } else {
    Animate(elem, 'left', 800, -405, 0);
    opened = true;  
  }  
}

style.css

#contactform {  
  width: 400px;
  left: -405px;
  height: 500px;
  margin: 25px 0;
  position: fixed;
  box-shadow: 0 0 12px 0 #333;  
}

#contact-button { 
  width: 5%;  
  padding: 7% 3%;  
  cursor: pointer;
  margin-left: 400px;
  margin-top: 40px;
  font-size: 23px; 
  color: white;  
  position: absolute;
}

#contactform, #contact-button {
  background-color: #1D1F20;
  border-radius: 0 15px 15px 0; 
  border: 5px solid #666666; 
  border-left: none;
}

.rotated-text {
    display: inline-block;
    white-space: nowrap;
    /* this is for shity "non IE" browsers
       that dosn't support writing-mode */
    -webkit-transform: translate(1.1em,0) rotate(90deg);
       -moz-transform: translate(1.1em,0) rotate(90deg);
         -o-transform: translate(1.1em,0) rotate(90deg);
            transform: translate(1.1em,0) rotate(90deg);
    -webkit-transform-origin: 0 0;
       -moz-transform-origin: 0 0;
         -o-transform-origin: 0 0;
            transform-origin: 0 0;*/
   /* IE9+ */
   -ms-transform: none;
   -ms-transform-origin: none;
   /* IE8+ */
   -ms-writing-mode: tb-rl;
   /* IE7 and below */
   *writing-mode: tb-rl;
}

.rotated-text:before {
    content: "";
    float: left;
    margin-top: 100%;
}

form {
  width: 100%;
  padding: 20px;
}

form input {
  display: block;
  border: none;
  width: 300px;
  height: 35px; 
  margin: 15px 30px;  
}

form textarea {
  width: 300px;
  margin: 40px 30px;
  height: 170px;
}

form textarea, form input { 
  border: 3px solid #666666;
  border-radius: 5px;
  background: #f2f2f2;  
}

yYeMGG.markdown

yYeMGG

A Pen by sergey on CodePen.

License.