Contact Me Animation

contact-me-animation.markdown

Contact Me Animation

Based on a Dribbble by Riccardo Cavallo.

Click on the "Contact Me" button to see it in action.

A Pen by Aaron Taylor on CodePen.

License.

index.html

<div class="contact-area">
  <div class="contact">
    <main>
      <section>
        <div class="content">
          <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/256492/_mLIxaKY_400x400.jpg" alt="Profile Image">

          <aside>
            <h1>Riccardo Cavallo</h1>
            <p>Hi, I'm Riccardo Cavallo and I'm a Graphic and Visual Designer.</p>
          </aside>
          
          <button>
            <span>Contact Me</span>
            
            <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> <g class="nc-icon-wrapper" fill="#444444"> <path d="M14.83 30.83L24 21.66l9.17 9.17L36 28 24 16 12 28z"></path> </g> </svg>
          </button>
        </div>

        <div class="title"><p>Contact Me</p></div>
      </section>

      
    </main>

    <nav>
      <a href="#" class="gmail">
        <div class="icon">
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M16 3v10c0 .567-.433 1-1 1h-1V4.925L8 9.233 2 4.925V14H1c-.567 0-1-.433-1-1V3c0-.283.108-.533.287-.712C.467 2.107.718 2 1 2h.333L8 6.833 14.667 2H15c.283 0 .533.108.713.288.179.179.287.429.287.712z" fill-rule="evenodd"/></svg>
        </div>

        <div class="content">
          <h1>Email</h1>
          <span>Riccavallo@gmail.com</span>
        </div>
        
        <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> <g class="nc-icon-wrapper" fill="#444444"> <path d="M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z"></path> </g> </svg>
      </a>

      <a href="#" class="facebook">
        <div class="icon">
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M15.117 0H.883C.395 0 0 .395 0 .883v14.234c0 .488.395.883.883.883h7.663V9.804H6.46V7.39h2.086V5.607c0-2.066 1.262-3.19 3.106-3.19.883 0 1.642.064 1.863.094v2.16h-1.28c-1 0-1.195.48-1.195 1.18v1.54h2.39l-.31 2.42h-2.08V16h4.077c.488 0 .883-.395.883-.883V.883C16 .395 15.605 0 15.117 0" fill-rule="nonzero"/></svg>
        </div>

        <div class="content">
          <h1>Facebook</h1>
          <span>Riccardo Cavallo</span>
        </div>
        
        <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> <g class="nc-icon-wrapper" fill="#444444"> <path d="M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z"></path> </g> </svg>
      </a>

      <a href="#" class="twitter">
        <div class="icon">
          <svg viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M16 3.038c-.59.26-1.22.437-1.885.517.677-.407 1.198-1.05 1.443-1.816-.634.37-1.337.64-2.085.79-.598-.64-1.45-1.04-2.396-1.04-1.812 0-3.282 1.47-3.282 3.28 0 .26.03.51.085.75-2.728-.13-5.147-1.44-6.766-3.42C.83 2.58.67 3.14.67 3.75c0 1.14.58 2.143 1.46 2.732-.538-.017-1.045-.165-1.487-.41v.04c0 1.59 1.13 2.918 2.633 3.22-.276.074-.566.114-.865.114-.21 0-.41-.02-.61-.058.42 1.304 1.63 2.253 3.07 2.28-1.12.88-2.54 1.404-4.07 1.404-.26 0-.52-.015-.78-.045 1.46.93 3.18 1.474 5.04 1.474 6.04 0 9.34-5 9.34-9.33 0-.14 0-.28-.01-.42.64-.46 1.2-1.04 1.64-1.7z" fill-rule="nonzero"/></svg>
        </div>

        <div class="content">
          <h1>Twitter</h1>
          <span>@RichoxDesign</span>
        </div>
        
        <svg class="arrow" xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"> <g class="nc-icon-wrapper" fill="#444444"> <path d="M17.17 32.92l9.17-9.17-9.17-9.17L20 11.75l12 12-12 12z"></path> </g> </svg>
      </a>
    </nav>
  </div>
</div>

script.js

$('button').click(function(){
  $('button').toggleClass('active');
  $('.title').toggleClass('active');
  $('nav').toggleClass('active');
});

scripts

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

style.scss

/* COLORS
========================================== */

$bg-color: #051321;
$color-1: #eb524a;
$color-2: #c63535;
$color-3: #ffbe44;

$white: #ffffff;
$black: #000000;

// Social media

$gmail: #d14836;
$facebook: #3b5998;
$twitter: #1da1f2;


/* MIXINS
========================================== */

@mixin animation($animation) {
  -webkit-animation: #{$animation};
     -moz-animation: #{$animation};
       -o-animation: #{$animation};
          animation: #{$animation};
}

@mixin keyframes($keyframes) {
  @-webkit-keyframes #{$keyframes} { @content; }
     @-moz-keyframes #{$keyframes} { @content; }
       @-o-keyframes #{$keyframes} { @content; }
          @keyframes #{$keyframes} { @content; }
}

@mixin transform($transform) {
  -webkit-transform: $transform;
     -moz-transform: $transform;
      -ms-transform: $transform;
       -o-transform: $transform;
          transform: $transform;
}

@mixin transition($transition) {
  -webkit-transition: #{$transition};
     -moz-transition: #{$transition};
       -o-transition: #{$transition};
          transition: #{$transition};
}

@mixin transition-delay($transition-delay) {
  -webkit-transition-delay: #{$transition-delay};
     -moz-transition-delay: #{$transition-delay};
       -o-transition-delay: #{$transition-delay};
          transition-delay: #{$transition-delay};
}

/* RESET
========================================== */

*, *:before, *:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: $bg-color;
  //font-family: 'Open Sans', sans-serif;
  font-family: 'Roboto Condensed', sans-serif;
}

/* CONTACT
========================================== */ 

.contact-area {
  width: 100%;
  height: 100vh;
  position: relative;
}

.contact {
  position: relative;
  max-width: 420px;
  padding: 40px 20px;
  overflow: hidden;
  margin: 0 auto;
  
  @media (min-width: 1024px) {
    position: absolute;
    top: 50%;
    left: 50%;
    @include transform(translate(-50%, -50%));
  }
  
  main {
    float: left;
    width: 100%;
    position: relative;
    
    section {
      border-radius: 5px;
      float: left;
      width: 100%;
      background-color: $color-1;
      
      .content {
        float: left;
        width: 100%;
        padding: 20px 30px 50px 30px;
        position: relative;
        text-align: center;
        
        @media (min-width: 414px) {
          text-align: left;
        }

        img {
          display: inline-block;
          width: 140px;
          border-radius: 50%;
          
          @media (min-width: 414px) {
            float: left;
            width: 30%;
            margin-right: 10%;
          }
        }

        aside {
          float: left;
          width: 100%;
          color: $white;
          margin-top: 10px;
          
          @media (min-width: 414px) {
            width: 60%;
          }
          
          h1 {
            font-weight: 100;
            font-size: 22px;
            margin-bottom: 10px;
          }
          
          p {
            font-size: 14px;
            letter-spacing: .5px;
            line-height: 160%;
          }
        }
      }
    }
    
    .title {
      float: left;
      width: 100%;
      background-color: $color-2;
      max-height: 0px;
      border-bottom-left-radius: 5px;
      border-bottom-right-radius: 5px;
      overflow: hidden;
      @include transition(all .55s);
      
      &.active {
        max-height: 100px;
        @include transition(all 1.3s);
        
        p {
          @include transform(scale(1));
          transition-delay: .2s;
        }
      }
      
      p {
        padding: 15px 30px;
        color: $white;
        font-size: 16px;
        display: inline-block;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: .5px;
        @include transition(all .3s);
        @include transform(scale(0));
      }
    }
    
    button {
      position: absolute;
      bottom: 0;
      right: 50%;
      background-color: $color-3;
      color: $color-2;
      border: 0;
      width: 200px;
      height: 48px;
      text-align: center;
      border-radius: 30px;
      font-size: 16px;
      letter-spacing: .5px;
      text-transform: uppercase;
      margin-bottom: -24px;
      margin-right: -100px;
      @include transition(all .4s);
      transition-delay: .1s;
      outline: none;
      overflow: hidden;
      z-index: 10;
      font-family: inherit;
      
      span {
        opacity: 1;
        @include transition(opacity .2s);
        transition-delay: .4s;
        display: block;
        width: 200px;
        float: left;
        padding: 15px 0px;
      }
      
      svg {
        position: absolute;
        top: 50%;
        left: 50%;
        @include transform(translate(-50%, -50%));
        opacity: 0;
        @include transition(all .4s);
        
        path {
          fill: $color-2;
        }
      }
      
      &.active {
        margin-right: 0;
        right: 20px;
        width: 65px;
        height: 65px;
        margin-bottom: -32.5px;
        text-indent: 100%;
        white-space: nowrap;
        overflow: hidden;
        border-radius: 65px;
        box-shadow: 0px 3px 15px rgba(0,0,0,0.2);
        
        span {
          opacity: 0;
          transition-delay: 0s;
          width: 200px;
        }
        
        svg {
          opacity: 1;
          transition-delay: .5s;
        }
      }
    }
  }
  
  nav {
    float: left;
    width: 100%;
    overflow: hidden;
    max-height: 0px;
    @include transition(all .5s);
    
    &.active {
      max-height: 600px;
      @include transition(all 1s);
      
      a {
        opacity: 1;
        @include transform(translateY(0px));
        @include transition(all .7s);
        
        &:nth-of-type(1) {
          transition-delay: .5s;
        }
        
        &:nth-of-type(2) {
          transition-delay: .7s;
        }
        
        &:nth-of-type(3) {
          transition-delay: .9s;
        }
      }
    }
    
    a {
      float: left;
      width: 100%;
      margin-top: 18px;
      background-color: $white;
      padding: 18px 20px;
      border-radius: 5px;
      text-decoration: none;
      @include transition(all .3s);
      opacity: 0;
      @include transform(translateY(-10px));
      position: relative;
      
      @media (min-width: 414px) {
        padding: 18px 30px;
      }
      
      .arrow {
        position: absolute;
        right: 15px;
        top: 50%;
        @include transform(translateY(-50%));
        
        path {
          fill: darken($white, 10%);
        }
      }
      
      &.gmail {
        .icon {
          svg {
            background-color: $gmail;
          }
        }
        
        .content {
          h1 {
            color: $gmail;
          }
        }
      }
      
      &.facebook {
        .icon {
          svg {
            background-color: $facebook;
          }
        }
        
        .content {
          h1 {
            color: $facebook;
          }
        }
      }
      
      &.twitter {
        .icon {
          svg {
            background-color: $twitter;
          }
        }
        
        .content {
          h1 {
            color: $twitter;
          }
        }
      }
      
      .icon {
        float: left;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        
        svg {
          width: 100%;
          height: 100%;
          padding: 14px;
          
          path {
            fill: $white;
          }
        }
      }
      
      .content {
        h1 {
          font-size: 20px;
          font-weight: 400;
          line-height: 160%;
          letter-spacing: .4px;
        }
        
        span {
          font-size: 14px;
          color: darken($white, 30%);
          display: block;
          letter-spacing: .4px;
        }
      }
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />