EadeGV

EadeGV.markdown

EadeGV

Forked from Cole Townsend's Pen EadLYJ.

A Pen by Cole Townsend on CodePen.

License.

index.html

<section class="centered padded w60 h5 ">
  <div class="dt h5 w100">
  <h1 id="title" class="dtc tac fs3 tcwhite fwn tsh" contentEditable>Click to Change Me!</h1>
  </div>
</section>
<section class="centered">
  <aside class="padded sidebar mt-5">
    <div class="fill bb h2 tac fs6 tcwhite tr-90">Current Item</div>
    <div class="fill bb h2 tac fs6 tcwhite tr-50">Item Name</div>
    <div class="fill bb h2 tac fs6 tcwhite tr-50">List Name</div>
    <div class="fill bb h2 tac fs6 tcwhite tr-50">List Name</div>
    <div class="fill bb h2 tac fs6 tcwhite tr-50">List Name</div>
    <div class="fill bb h2 tac fs6 tcwhite tr-50">List Name</div>
  </aside>
  <article id="target" class="card mt-3 animsition">
    <header class="tcblack center bb-black"><h3 class="pad-inner-2 fs5 fwn mb0">Click Outside the Card to Undo Animation</h3><hr class="hr"/></header>
</article>
</section>
<div class="bg"></div>

script.js

$(document).ready(function() {
  
  $(".animsition").animsition({
  
    inClass               :   'fade-in-up-sm',
    outClass              :   'fade-out',
    inDuration            :    400,
    outDuration           :    800,
    linkElement           :   '.animsition-link',
    // e.g. linkElement   :   'a:not([target="_blank"]):not([href^=#])'
    loading               :    true,
    loadingParentElement  :   'body', //animsition wrapper element
    loadingClass          :   'animsition-loading',
    unSupportCss          : [ 'animation-duration',
                              '-webkit-animation-duration',
                              '-o-animation-duration'
                            ],
    //"unSupportCss" option allows you to disable the "animsition" in case the css property in the array is not supported by your browser.
    //The default setting is to disable the "animsition" in a browser that does not support "animation-duration".
    
    overlay               :   false,
    
    overlayClass          :   'animsition-overlay-slide',
    overlayParentElement  :   'body'
  });
});

$.Velocity.RegisterUI("click.shift-x", {
    defaultDuration: 3000,
    calls: [ 
      [ { translateX: 100, }, 0.2, { easing: [ 300, 20 ] } ]
    ]
});

$.Velocity.RegisterUI("click.shift-x-back", {
    defaultDuration: 3000,
    calls: [ 
      [ { translateX: 0 }, 0.2, { easing: [ 300, 20 ] } ]
    ]
});

$.Velocity.RegisterUI("click.fadeInRight", {
    defaultDuration: 3000,
    calls: [ 
      [ { opacity: 1, translateX: 30 }, 0.2, { easing: [ 300, 20 ] } ]
    ]
});

$.Velocity.RegisterUI("click.fadeOutLeft", {
    defaultDuration: 3000,
    calls: [ 
      [ { opacity: 0, translateX: -30 }, 0.2, { easing: [ 300, 20 ] } ]
    ]
});

$.Velocity.RegisterUI("click.slideLeft", {
    defaultDuration: 3000,
    calls: [ 
      [ { fontSize: 28, translateX: 0 }, 0.2, { easing: [ 300, 20 ] } ]
    ]
});

$.Velocity.RegisterUI("click.slideRight", {
    defaultDuration: 3000,
    calls: [ 
      [ { fontSize: 20, translateX: -300 }, 0.2, { easing: [ 300, 20 ] } ]
    ]
});

$('#target').click(function(){
    $(this).velocity("click.shift-x");
    $(".sidebar").velocity("click.fadeInRight");  
    $("#title").velocity("click.slideRight");                        
});



$('.bg').click(function(){	  
  $(".sidebar").velocity("click.fadeOutLeft");
  $("#target").velocity("click.shift-x-back");
  $("#title").velocity("click.slideLeft");                        
});

style.scss

@import "bourbon";
html {
  width: 100%;
  height: 100%;
}

body {
font-family: "Karla", "Avenir", "Input";
background: linear-gradient(to bottom right, #4CB8C4 0%, #3CD3AD 100%);
  height: 100%;
  width: 100%;
  position: relative;
}

section {
  width: 90%;
  position: relative;
  z-index: 2;
}

.bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
  background: transparent;
}

.bgrad {
background: -webkit-linear-gradient(left, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.50) 59%, rgba(255,255,255,0.00) 100%);
background-image: -moz-linear-gradient(left, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.50) 59%, rgba(255,255,255,0.00) 100%);
background-image: -o-linear-gradient(left, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.50) 59%, rgba(255,255,255,0.00) 100%);
background-image: linear-gradient(to right, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.50) 59%, rgba(255,255,255,0.00) 100%);
}

.centered {
  margin: 0 auto;
  position: relative;
}

.mt-3 {
  margin-top: 3rem;
}

.mt-5 {
  margin-top: 5rem;
}

.padded {
  padding: 1rem;
}

.sidebar {
  opacity: 0;  
  display: inline-block;
  width: 20%;
  min-height: 300px;
  font-size: 0;
  position: absolute;
  left: 0;
}

.fill {
  width: 100%;
  display: block;
}

.h2 {
  padding: 1rem 0;
}

.tac {
  text-align: center;
}
.w60 {
  width: 60%;
}

.fs3 {
  font-size: 28px;
}

.fs5 {
  font-size: 20px;
}

.fs6 {
  font-size: 14px;
  font-family: "Karla", "Avenir", "Avenir Next", "Helvetica Neue"
}

.fwn {
  font-weight: normal;
}

.tcwhite {
  color: white;
}

.tcblack {
  color: #333;
}

bb-black {
  border-bottom: 1px solid #333;
}

.tr-90 {
  opacity: .90;
}

.tr-50 {
  opacity: .50;
}

.bb {
  border-bottom: 1px solid rgba(255,255,255,.5);
}

.tsh {
  text-shadow: 0 1px 1px rgba(0,0,0,.2);
}

.pad-inner-1 {
  padding: 1rem;
}

.pad-inner-2 {
  padding: 2rem;
}

.hr {
  /* bottom border: */
  background: rgba(71,191,191,0.60);
  height: 1px;
  width: 100%;
  display: block;
  border: none;
  box-shadow: none;
  margin: 0;
}

.mb0 {
  margin-bottom: 0;
}

.h5 {
  height: 5rem;
}

.w100 {
  width: 100%;
}

.dt {
  display: table;
}

.dtc {
  display: table-cell;
  vertical-align: middle;
  width: 100%;
}

.card {
/* body bg: */
background: #FFFFFF;
box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.30);
width: 60%;
 margin: 0 auto;
position: relative;
min-height: 500px;
display: block;
font-size: 0;
}