Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/contact-me-animation.markdown

Created July 11, 2018 20:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save CodeMyUI/98d4f107b39f2f249e14b540d3ad188f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save CodeMyUI/98d4f107b39f2f249e14b540d3ad188f to your computer and use it in GitHub Desktop.
Download ZIP
Contact Me Animation
Raw
contact-me-animation.markdown
Raw
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>
Raw
script.js
$('button').click(function(){
$('button').toggleClass('active');
$('.title').toggleClass('active');
$('nav').toggleClass('active');
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Raw
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;
}
}
}
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment