Animation Form

animation-form.markdown

Animation Form

A Pen by Barbara Seidel on CodePen.

License.

index.pug

-img = 'https://media.giphy.com/media/S20K3KfOVVKco/200.gif'
-chain = 'http://www.stickpng.com/assets/images/580b585b2edbce24c47b2bac.png'


#canvas
  #bg
    #plane.hold
      #helicopter
        img(src=img)
        #chain
      #boxes
        input#name(type="text" placeholder="Name")
    input#email(class="box" type="email" placeholder="EMail")
    select#region(class="box")
      option(value='') -- Region --
      option(value="auckland") Auckland
      option(value="wellington") Wellington
    select#school(class="box")
      option(value='') -- School --
      option(value='primary') Primary
      option(value='highschool') High School
    textarea#comment(class="box" placeholder="Comment")

script.js

$.fn.animatedForm = function(options){
  var settings = $.extend({

  },options),
  _me = $(this),
  _bg = _me.find('#bg'),
  _plane = _me.find('#plane'),
  _helicopter = _me.find('#helicopter'),
  _name = _me.find('#name'),
  _boxes = _me.find('#boxes'),
  _chain = _me.find('#chain'),
  _email = _me.find('#email'),
  _region = _me.find('#region'),
  _school = _me.find('#school'),
  _comment = _me.find('#comment'),
  _imgHeight = _helicopter.find('img').height(),
  _step = 1,
  _totalStep = 7,
  _offset = 9;
  
  function _getAccurateShakeAngleClass(){
    var cls = 'shake'
    if(window.outerWidth > 1200){
      cls = 'shake lg';
    } else if(window.outerWidth >= 768){
      cls = 'shake md';
    } 
    return cls;
  }
  
  function _getPaddingBottom(){
    var offset = 65;
    if(window.innerWidth > 1200){
      offset = 80;
    }else if(window.innerWidth >= 1024){
      offset = 70;
    }else if(window.innerWidth >= 768){
      offset = 80;
    }
    
    if(window.innerHeight ==1366 && window.innerWidth ==1024){
      offset = 84;
    } else if(window.innerHeight ==1024 && window.innerWidth ==1366){
      offset = 80;
    } else if(window.innerHeight  > 890){
      offset = 60;
    }
    return offset;
  }
  
  function _getLeftOffset () {
    var offset = 50;

    return offset;
  }
  
  function _shakeHelicopter(){
    _plane.addClass(_getAccurateShakeAngleClass());
  }
  function _stopShakeHelicopter(){
    _plane.removeClass(_getAccurateShakeAngleClass());
    // _chain.css({
    //   'padding-bottom': (_getPaddingBottom() - _step*(_offset-1))+'vh'
    // });
  }
  
  function _updateHelicopter(){
    _plane.css({
      'margin-left': 'calc('+(_getLeftOffset() + _step*100) + 'vw - 115px)'
    })
  }
  
  function _updateChain(){
    if(_step < _totalStep){
      var height = window.innerHeight ;
      height = height -  _imgHeight - 60*_step;
      _chain.css({
        // 'padding-bottom': (65 - _step*(_offset+4))+'vh'
        'padding-bottom': height +'px'
      });
    }
  }
  function _shake(){
    _shakeHelicopter();
    _updateHelicopter();
    _updateChain();
    setTimeout(_stopShakeHelicopter,2000);
  }
  
  function _moveBG(){
     _bg.css({
      'transform': 'translateX(-'+_step*100+'vw)'
    }); 
  }
  
  function _updateStep(){
    if(_step < _totalStep){
      _step++;  
    }
  }
  
  function _loadBox(el){
    el.removeClass('box');
    _boxes.append(el);
    el.prop( "disabled", true);
  }
  
  function _moveForward(){
    _shake();
    _moveBG();
    _updateStep();
  }
  
  function _validateEmail(email) {
    var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    return re.test(email.toLowerCase());
  }
  
  function _registerKeyupEvent(el){
      el.keyup(function(event){
      if(event.which === 13 && $(this).val() != '' ){
      //   if($(this.attr('type')!='email') || $(this).attr('type') == 'email' && _validateEmail($(this).val())){
          _loadBox(el);
          _moveForward();
      //   }
      }
    });
  }
  
  function _registerChangeEvent(el){
    el.change(function(event){
      if($(this).val() != ''){
        _loadBox(el);
        _moveForward();
      }
    });
  }
  
  function _init(){
    _registerKeyupEvent(_name);
    _registerKeyupEvent(_email);
    _registerChangeEvent(_region);
    _registerChangeEvent(_school);
    _registerKeyupEvent(_comment);
  }
  _init();
};

$('#canvas').animatedForm();
  

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.scss

$fly-dealy: 1s;
#canvas{
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}

#bg{
  width: 600vw;
  height: 100vh;
  position: absolute;
  left: 0;
  top: 0;
  background: url('http://www.textures4photoshop.com/tex/thumbs/border-grass-seamless-transparent-background-free-thumb49.png');
  transition: 2.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  transition-delay: $fly-dealy;
  background-position: bottom;
  background-repeat-y: no-repeat;
}

.box{
  position: absolute;
  bottom: 20px;
  transform: translateX(-50%);
  &#email{
    left: 150vw;  
  }
  &#region{
    left: 250vw;
  }
  &#school{
    left: 350vw;
  }
  &#comment{
    left: 450vw;
  }
}

#plane{
  transform-origin: center;
  margin-left: calc(50vw - 120px);
  transition: 2.5s;
  transition-delay: $fly-dealy;
  #helicopter{
    position: relative;
    display: inline-block;
    transition: 2s;
    #chain{
      transition: 1s ease-in;
      padding-bottom: 65vh;
      width: 0;
      border: 3px solid #000;
      margin-top: -80px;
      margin-left: 100px;
      background-image: -o-linear-gradient(#000, transparent);
    }
  }
  #boxes{
    transition: 1s;
    margin-left: -30px;
  }
 animation: shake 2s infinite linear; 
 &.shake{  
   #helicopter{
     transform: rotate(8deg) translateX(20px);
   }
   #boxes {
     transform: rotate(2deg);
   }
   &.lg,&.md{
     #helicopter{
       transform: rotate(4deg) translateX(20px);
     }
     #boxes {
       transform: rotate(.5deg);
     }
   }
  }
}

input,select{
  border: 10px solid blue;
  display: block;
  font-size: 20px;
  line-height: 40px;
  padding: 0 10px;
  width: 250px;
}
select{
  height: 60px;
  width: 290px;
}
textarea{
  border: 10px solid blue;
  display: block;
  width: 270px;
  padding: 0 10px;
  font-size: 20px;
}


@keyframes shake{
  0%{
    transform: translate(0,0);
  }
  25%{
    transform: translateX(-3px);
  }
  45%{
    transform:translateX(3px) translateY(3px);
  }
  75%{
    transform: translateY(-3px);
  } 
}