Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <main role="main">

  <!-- Slider -->
  <section class="velo-slides" data-velo-slider="on" data-velo-theme="light">
  

    <!-- Slide -->
    <section class="velo-slide">
      <!-- Pretitle Hint -->
      <span class="velo-slider__hint"><span><span>Check Them Bldgs</span></span></span> <!-- Slide BG -->
      <div class="velo-slide__bg">
        <!-- Borders -->
        <span class="border"><span></span></span> <!-- Img -->
        <figure class="velo-slide__figure" style="background-image: url(https://source.unsplash.com/VsBl5PwVZpY/2000x1200)"></figure>
      </div>
    
      <!-- Header -->
      <header class="velo-slide__header">
        <h3 class="velo-slide__title"><span class="oh"><span>The Name Is</span></span><span class="oh"><span>Stephen Scaff</span></span></h3>
        <p class="velo-slide__text"><span class="oh"><span>I'm a Creative Developer currently building web things at the Seattle Branding + Interactive firm, Urban Influence.</span></span></p>
        <span class="velo-slide__btn"><a class="btn-draw btn--white" href="#"><span class="btn-draw__text"><span>View Work</span></span></a></span>
      </header>
    </section>

    <!-- Slide -->
    <section class="velo-slide">
      <!-- Pretitle Hint -->
      <span class="velo-slider__hint"><span><span>What's up Playas</span></span></span> 
      <!-- Slide BG -->
      <div class="velo-slide__bg">
        <!-- Borders -->
        <span class="border"><span></span></span> <!-- Img -->
        <figure class="velo-slide__figure" style="background-image: url(https://source.unsplash.com/D8GFCYxyJj8/2000x1200)"></figure>
      </div>
    
      <!-- Header -->
      <header class="velo-slide__header">
        <h3 class="velo-slide__title"><span class="oh"><span>Another Day</span></span><span class="oh"><span>Another Slide</span></span></h3>
        <p class="velo-slide__text"><span class="oh"><span>The here slider interaction thing is using Velocity for ehanced animation performance.</span></span></p>
      </header>
    </section>
    
    <!-- Slide - with Video -->
    <section class="velo-slide">
      <!-- Pretitle Hint -->
      <span class="velo-slider__hint"><span><span>Urban Influence</span></span></span> 
      <!-- Slide BG -->
      <div class="velo-slide__bg">
        <!-- Borders -->
        <span class="border"><span></span></span> <!-- Img -->
        <figure class="velo-slide__figure" style="background-image: url()"></figure>
        <div class="velo-slide__vid-wrap">
          <video autoplay="" class="velo-slide__vid" loop="" poster="">
            <source src="http://uiclients.com/assets/videos/ui-chaun.mp4" type="video/mp4"> Wait, are you still using IE? Bruv. Go get Chrome, or kick rocks.</video>
        </div>
      </div><!-- Header -->
      <header class="velo-slide__header">
        <h3 class="velo-slide__title"><span class="oh"><span>Pigeon Wisdom</span></span><span class="oh"><span>Agency Site</span></span></h3>
        <p class="velo-slide__text"><span class="oh"><span>Live from the Coop, SOTD rocking, folio and storytelling joint for the Pigeon Wizzy squad. Coo Coo Mfers.</span></span></p>
        <span class="velo-slide__btn"><a class="btn-draw btn--white" href="#"><span class="btn-draw__text"><span>View Project</span></span></a></span>
      </header>
    </section>
    
   
    <!-- Slides Nav -->
    <nav class="velo-slides-nav">
      <ul class="velo-slides-nav__list">
        <li>
          <a class="js-velo-slides-prev velo-slides-nav__prev inactive" href="#0"><i class="icon-up-arrow"></i></a>
        </li>
        <li>
          <a class="js-velo-slides-next velo-slides-nav__next" href="#0"><i class="icon-down-arrow"></i></a>
        </li>
      </ul>
    </nav>
  </section>
</main>
              
            
!

CSS

              
                // ----------------------------------------------
// MQs
//-----------------------------------------------
//Smallest phone
$mq-xsmall: 22em;
//phone
$mq-small: 32em;
//Tablet
$mq-med: 54em;
//laptop
$mq-large: 65em;
//Past laptop
$mq-xlarge: 91em;
//Mid Size monitor
$mq-xxlarge: 115em;
//Thunderbold goes to 157em
$mq-xxxlarge: 130em;

$color-alpha:     #00ffc8;
$color-beta:      #003a49;
$color-white:     #fff;
$color-lightgrey: #f5f6f6;
$color-midgrey:   #a7a6a6;

$ease-cb: cubic-bezier(.4,0,.2,1);
$ease-cb-2: cubic-bezier(.19,1,.22,1);
$ease-cb-3: cubic-bezier(.77,0,.175,1);

$font-header: "Montserrat", Helvetica, sans-serif;
$font-paragraph: "Montserrat", Georgia, serif;

%font-links{
  font-family: $font-header;
  font-size: 0.8em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}


//----------------------------------------------
//  bg-overlay()
//  Pseduo overlay element  
//  @param: $bg_hex: [$color-dark] - hex value for rgba conversion
//  @param: $bg_opacity:[0.6] - alpha transparency level
//  @param: $top_layer: element or class name for higher z-index layer
//----------------------------------------------
@mixin bg-overlay($bg_hex: $color-dark, $opacity: 0.6) {
  &:after {
    z-index: 0;
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: $opacity;
    background: $bg_hex;
  }
}

//----------------------------------------------
//  font-rwd
//  Change font-size across breaks 
//  @param: $font_sm  - at small
//  @param: $font_med - at med break
//  @param: $font_lg  - at Large break
//  @param: $font_xl  - at Xlarge break  
//----------------------------------------------
@mixin font-rwd($sm:null, $med:null, $lg:null, $xl:null, $xxl:null) {
  font-size: $sm;
  
  @if $med {
    @media(min-width: $mq-med){
      font-size: $med;
    }
  }

  @if $lg {
    @media(min-width: $mq-large){
      font-size: $lg;
    }
  }

  @if $xl {
    @media(min-width: $mq-xlarge){
      font-size: $xl;
    }
  }

  @if $xxl {
    @media(min-width: $mq-xxlarge){
      font-size: $xxl;
    }
  }
}


body {
  margin: 0;
  width: 100%;
  font-weight: 400;
  font-style: normal;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  text-rendering: optimizeLegibility;
}

/** 
 * Default to Border Box
 */
*, *:before, *:after {
  box-sizing: border-box; 
}


/**
 * Links
 */
a {
  text-decoration:  none;
  background-color: transparent;
  outline: 0;
}

//---------------------------------------------- 
//  Btn Theme
//  Button reset theme
//----------------------------------------------
%btn-theme{
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration:none;
  @extend %font-links;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  transition: all 0.4s ease-in-out;
}

//---------------------------------------------- 
//  Btn-Draw
//  Mixin that creates a button that draws out
// .btn .btn__text span
//----------------------------------------------

$btn-draw-size: 1px;

.btn-draw{
  @extend %btn-theme;
  color: $color-alpha;
  margin-left: 2.3em;

  &:after{
    content: '';
    top: 0;
    right: 0;
    height: $btn-draw-size;
    width: 100%;
    background-color: $color-alpha;
  }
  
  &:before{
    content: '';
    position: absolute;
    top:50%;
    left: -2.4em;
    height: $btn-draw-size;
    width: 3em;
    background-color: $color-alpha;
    transition: all 0.25s ease;
  }

  .btn-draw__text{
    position: relative;
    display: block;
    padding: 0.7555em 2.29em;
    line-height: 1.5;
    transition: transform 0.5s ease;

    &:before, &:after{
      content: '';
      position: absolute;
      height: $btn-draw-size;
      width: 0;
      background-color: $color-alpha;

    }
    &:before{
      top: 0;
      left: 0;
      transition: width 0.15s 0.45s $ease-cb-3; // 4th
    }
    &:after{
      bottom: 0;
      right: 0;
      transition: width 0.15s 0.15s $ease-cb-3; // 2nd
    }
  }

  // Buttons
  .btn-draw__text > span{
    
    &:before, &:after{
      content: '';
      position: absolute;
      height: 0;
      width: $btn-draw-size;
      background-color: $color-alpha;
      transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
    }
    &:before{
      left: 0;
      bottom: 0;
      transition: height 0.15s 0 $ease-cb-3; // 1st
    }
    &:after{
      right: 0;
      top: 0;
      transition: height 0.15s 0.3s $ease-cb-3; // 3rd
    }
  }
  @media (hover) {
  &:hover, a:hover &{
    cursor: pointer;
    color: $color-alpha;

    &:before{
      width: 0;
      transition: all 0.4s ease;
    }

    .btn-draw__text{
      transform: translateX(-2.2em);
      transition: transform 0.5s ease, width 1s ease;

      // Build Top and bottom borders via width
      &:before{
        width: 100%;
        max-width: 100%;
        transition: width 0.15s  $ease-cb-3; // 1st
      }
      &:after{
        width: 100%;
         transition: width 0.15s 0.3s  $ease-cb-3; // 3rd
      }
    }

    // Build Left and Right borders via height;
    .btn-draw__text > span{
      
      &:before{
        left: 0;
        height: 100%;
        transition: height 0.15s 0.45s $ease-cb-3; // 4th
      }
      &:after{
        right: 0;
        height: 100%;
        transition: height 0.15s 0.15s $ease-cb-3; // 2nd
      }
    }  
  }
}
}

//---------------------------------------------- 
//  Btn Draw - White modifier
//----------------------------------------------
.btn-draw.btn--white{
  color: #fff;

  &:before, 
  &:after, 
  .btn-draw__text:before, 
  .btn-draw__text:after,
  .btn-draw__text > span:before, 
  .btn-draw__text > span:after{
    background-color: #fff
  }

  &:hover, 
  a:hover &{
    color: #fff;
  }
}



//----------------------------------------------
// Typography
//----------------------------------------------
body {
  font-family: $font-paragraph;
  line-height: 1.6;
}

//----------------------------------------------
// Fluid body sizing
//----------------------------------------------
body {
  font-size: 100%;
  
  @media (min-width: $mq-small) {
    font-size: 102%;
  }
  @media (min-width: $mq-med) {
    font-size: 103%;
  }
  @media (min-width: $mq-large) {
    font-size: 107%;
  }
  @media (min-width: 75em) {
    font-size: 110%;
  }
  @media (min-width: $mq-xlarge) {
    font-size: 120%;
  }
  @media (min-width: $mq-xxlarge) {
    font-size: 130%;
  }
  @media (min-width: $mq-xxxlarge) {
    font-size: 140%;
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: $font-header;
  font-weight: 700;
}



//---------------------------------------------- 
//  CP Slider - CP-Slides
//  The Container for CP Slides, with requirements for 
//  scroll jacking interaction.
//----------------------------------------------
.velo-slides{
  z-index: 8;
  position: relative;
  height: 100vh;
  background-color: #111;

  // Might need to do above $mq-large
  &[data-velo-slider="on"]{
    overflow: hidden;
  }
}

//---------------------------------------------- 
//  CP Slider - CP-Slide
//  The single slide instances
//----------------------------------------------
.velo-slide{
  height: 100vh;
  z-index: 4;

  @media (min-width: $mq-med) and (max-width: $mq-large){
    font-size: 80%;
  }

  @media (min-width: $mq-med) and  (min-height: 0) and (max-height: 45em){
    font-size: 70%;
  }

  // scroll jack requirement
  [data-velo-slider="on"] &{
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }

  // Is active
  &.is-active{
    z-index: 8;
  }

  // The Slide Background
  &__bg{
    z-index: 7;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    color: #111;
    transform: translateZ(0);
    backface-visibility: hidden;
    background-color: #111;
    // Apply box shadow for a more 3d effect. js applies this value.
    //box-shadow: 0 0 0 rgba(25, 30, 46, 0.4);
    overflow: hidden;
    @include bg_overlay(#111, 0.4);
  }

  // Apply Colors to our backgrounds and set currentColor
  &:nth-of-type(1n) .velo-slide__bg{
    //background-color: $color-alpha;
    //color: $color-alpha;
  }


  // Slide Background Image
  &__figure{
    z-index: 0;
    position: relative;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    transform: scale(1);
    transition: transform 0.5s ease;

    //padding: 7em;
    .is-hovering &{
      transform: scale(1.1);
      transition: transform 0.5s ease;
    }
  }

  ///
  &__vid-wrap{
    z-index: 5;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow:hidden;
    transform: scale(1);
    transition: transform 0.5s ease;
    @include bg_overlay(#111, 0.4);
    .is-hovering &{
      transform: scale(1.1);
      transition: transform 0.5s ease;
    }
  }

  &__vid{
    z-index: -1;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: auto;
    min-width: 100%;
    max-width: none;
    height: auto;
    min-height: 100%;
    object-fit:cover;
  }

  // Our main content wrap for each slide instance
  &__header{
    z-index: 9;
    position: relative;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    overflow-y: hidden;
    padding: 6%;
    //transform: translateX(5%);
  }

  // Velo-Slide__Pretitle
  &__pretitle{
    color: #fff;
    max-width: 22em;
    @media (min-width: $mq-med){
      margin-left: 7%;
    }
    @media (max-width: $mq-med){
      //order:2;
    }
  }

  // Velo-Slide__Title
  // The Title for each slide
  &__title{
    margin-bottom: 0.1em;
    line-height: 1.1;
    color: #fff;
    letter-spacing: -0.025em;
    font-weight: 700;
    
    @include font-rwd(2.25em, 5em, 5em, 5em);
  }

  // Velo-Slide__Text
  &__text{
    color: #fff;
    max-width: 30em;
    display: block;
    margin: 1em 0 1.5em 1%;
    font-size: 1.1em;
    line-height: 1.8;
    font-weight: 300;
  }

  // Velo-Slide__Btn
  &__btn{
    opacity: 0;
    @media (min-width: $mq-med){
      margin-left: 1vw;
    }
    .is-active &{
      opacity: 1;
    }
  }
  &__btn > a > span{
    opacity: 0;
    overflow-y: hidden;
    transform: translate3d(0,100%,0);

    .is-active &{
      opacity: 1;
      z-index: 9999;
      transform: translate3d(0,0,0);
      transition: transform 0.4s ease, opacity 0.8s ease;
    }
  }
}


.velo-slides[data-velo-theme="light"]{
  background: #212121;
  border: 1em solid #c5cac5;

  .velo-slide{
    margin-top: -1em;
  }

  .velo-slide__bg{
    color: #c5cac5;
  }
}



[data-velo-theme="dark"]{
  background: #111;

  .velo-slides__bg{
    background-color: #111;
    filter: grayscale(100%);
  }
}

//---------------------------------------------- 
//  Overflow Hidden
//  Styles to enable slice effect for text entrances  
//----------------------------------------------
.oh{
  display: block;
  overflow-y: hidden;
  padding: 0.02em 0;
}
  
.oh span{
  display: inline-block;
  transform:translate3d(0,140%,0);
  opacity: 0;
  transition: transform 0.4s ease, opacity 0.8s ease;
}

.is-active .oh span{
  transform:translate3d(0,0%,0);
  opacity: 1;
  transition: transform 0.6s $ease-cb-3, opacity 0.1s ease;
}

.is-active .oh:nth-of-type(2n) span{
  transition-delay:0.2s;
}


//---------------------------------------------- 
//  CP Slider Border Interactions  
//----------------------------------------------

$border-resting-sm:0vw;
$border-animating-sm: 8vw;
$border-resting:10vw;
$border-resting-xl:7vw;
$border-resting-xxl:7vw;
$border-animating: 12vw;
$border-hovering: 0vw;

@mixin velo-slider-border($h_w, $sm, $med, $xl, $xxl){
    #{$h_w}: $sm;
  @media (min-width: $mq-med){
    #{$h_w}:  $med;
  }
  @media (min-width: $mq-xlarge){
    #{$h_w}: $xl;
  }
  @media (min-width: $mq-xxlarge){
    #{$h_w}:  $xxl;
  }
}


.border, 
.border:before, 
.border:after, 
.border span{
  z-index: 91;
  position: fixed;
  background-color: currentColor;
  transition: 0.35s ease-in-out;

  .is-hovering &{
    transition: 0.5s ease-in-out;
  }
  .velocity-animating &{
    transition: 0.5s $ease-cb-3;
  }
}

.border{
  top: 0;
  left:0;
  width: 100%;

  @include velo-slider-border(height, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);

  .is-hovering &{
    height: $border-hovering;
  }
  .velocity-animating &{
    height: $border-animating-sm;
    @media (min-width: $mq-med){
      height: $border-animating;
    }
  }
}

.border:before{
  content:'';
  bottom: 0;
  left: 0;
  width: $border-resting-sm;
  height: 100%;
  @include velo-slider-border(width, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);

  .is-hovering &{
    width: $border-hovering;
  }

  .velocity-animating &{
    width: $border-animating-sm;
    @media (min-width: $mq-med){
      width: $border-animating;
    }
  }
}

.border:after{
  content:'';
  bottom: 0;
  right: 0;
  height:100%;
  width: $border-resting-sm;
  @include velo-slider-border(width, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);
  
  .is-hovering &{
    width: $border-hovering;
  }

  .velocity-animating &{
    width: $border-animating-sm;
    @media (min-width: $mq-med){
      width: $border-animating;
    }
  }
}

.border span{
  bottom: 0;
  left: 0;
  height: $border-resting-sm;
  width: 100%;
  @include velo-slider-border(height, $border-resting-sm, $border-resting, $border-resting-xl, $border-resting-xxl);

  .is-hovering &{
    height: $border-hovering;
  }
  .velocity-animating &{
    height: $border-animating-sm;
    @media (min-width: $mq-med){
      height: $border-animating;
    }
  }
}


//---------------------------------------------- 
//  CP Slider Hints
//  Vertical line with text, rotated to left of slide
//----------------------------------------------
.velo-slider__hint {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  display: none;
  height: 100vh;
  width: 4em;
  font-size: 0.9em;
  color: #fff;

  @media (min-width: $mq-med){
    display: block;
  }
  
  & > span {
    position: absolute;
    top: 50%;
    left: 50%;
    white-space: nowrap;
    transform: translate(-50%, -50%) rotate(-90deg);
    @extend %font-links;
    overflow:hidden;

  }

  & > span > span{
    display: inline-block;
    transform: translateY(-110%);
    
    .is-active &{
      opacity: 1;
      top: 50%;
      transition: 1s  $ease-cb-2;
      transform: translateY(0%);
      transition: 0.4 ease;
    }
  }
}
  
//---------------------------------------------- 
//  CP Slides: Nav
//  Up/Down nav for CP Slider
//----------------------------------------------

.velo-slides-nav {
  /* lateral navigation */
  position: fixed;
  z-index: 91;
  right: 3%;
  bottom: 1em;

  @media (min-width: $mq-med){
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  &__list{
    list-style: none;
  }

  li:first-child{
    margin-bottom: 0.25em;
  }
  
  a {
    display: block;
    color: rgba(#fff,0.9);
    transition: color 0.5s ease, text-shadow 0.5s ease;

    &:hover{
      color: rgba(#fff,1);
      text-shadow: 0px 0px 6px rgba(255,255,255,0.6);
      transition: color 0.5s ease, text-shadow 0.5s ease;
    }
  }

  a.inactive {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s 0s, visibility 0s 0.2s;
  }
  i{
    font-size: 2.2em;

    @media (min-width: $mq-med){
      font-size: 1.5em;
    }
  }
}



















@font-face {
  font-family: 'ssicons';
  src: url("data:application/x-font-ttf;charset=utf-8;base64,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") format('truetype');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'ssicons' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-down-chev:before {
  content: "\e900";
}
.icon-right-chev:before {
  content: "\e901";
}
.icon-up-chev:before {
  content: "\e902";
}
.icon-left-chev:before {
  content: "\e903";
}
.icon-up-arrow:before {
  content: "\e904";
}
.icon-down-arrow:before {
  content: "\e905";
}
.icon-left-arrow:before {
  content: "\e906";
}
.icon-right-arrow:before {
  content: "\e907";
}


              
            
!

JS

              
                /**
 * Velocity Effects
 *
 * First, A few Registered effects for velocity's ui kit.
 * Actual slider stuff below
 */

var scaleDownAmnt = 0.7;
var boxShadowAmnt = '40px';

$.Velocity.RegisterEffect("translateUp", {
  defaultDuration: 1,
  calls: [
    [{
      translateY: '-100%'
    }, 1]
  ]
});
$.Velocity.RegisterEffect("translateDown", {
  defaultDuration: 1,
  calls: [
    [{
      translateY: '100%'
    }, 1]
  ]
});
$.Velocity.RegisterEffect("translateNone", {
  defaultDuration: 1,
  calls: [
    [{
      translateY: '0',
      opacity: '1',
      scale: '1',
 
    }, 1]
  ]
});
//scale down
$.Velocity.RegisterEffect("scaleDown", {
  defaultDuration: 1,
  calls: [
    [{
      opacity: '0',
      scale: '0.7',
 
    }, 1]
  ]
});

//gallery
$.Velocity.RegisterEffect("scaleDown.moveUp", {
  defaultDuration: 1,
  calls: [
    [{
      translateY: '0%',
      scale: scaleDownAmnt,
 
    }, 0.20],
    [{
      translateY: '-100%'
    }, 0.60],
    [{
      translateY: '-100%',
      scale: '1',
      // boxShadowBlur: '0'
    }, 0.20]
  ]
});
$.Velocity.RegisterEffect("scaleDown.moveUp.scroll", {
  defaultDuration: 1,
  calls: [
    [{
      translateY: '-100%',
      scale: scaleDownAmnt,
 
    }, 0.60],
    [{
      translateY: '-100%',
      scale: '1',
      // boxShadowBlur: '0'
    }, 0.40]
  ]
});
$.Velocity.RegisterEffect("scaleUp.moveUp", {
  defaultDuration: 1,
  calls: [
    [{
      translateY: '90%',
      scale: scaleDownAmnt,
      // boxShadowBlur: boxShadowAmnt     
    }, 0.20],
    [{
      translateY: '0%'
    }, 0.60],
    [{
      translateY: '0%',
      scale: '1',
      // boxShadowBlur: '0'
    }, 0.20]
  ]
});
$.Velocity.RegisterEffect("scaleUp.moveUp.scroll", {
  defaultDuration: 1,
  calls: [
    [{
      translateY: '0%',
      scale: scaleDownAmnt,
      // boxShadowBlur: boxShadowAmnt
    }, 0.60],
    [{
      translateY: '0%',
      scale: '1',
      // boxShadowBlur: '0'
    }, 0.40]
  ]
});
$.Velocity.RegisterEffect("scaleDown.moveDown", {
  defaultDuration: 1,
  calls: [
    [{
      translateY: '0%',
      scale: scaleDownAmnt,
      // boxShadowBlur: boxShadowAmnt
    }, 0.20],
    [{
      translateY: '100%'
    }, 0.60],
    [{
      translateY: '100%',
      scale: '1',
      // boxShadowBlur: '0'
    }, 0.20]
  ]
});
$.Velocity.RegisterEffect("scaleDown.moveDown.scroll", {
  defaultDuration: 1,
  calls: [
    [{

    }, 0.60],
    [{
      translateY: '100%',
      scale: '1',
      // boxShadowBlur: '0'
    }, 0.40]
  ]
});
$.Velocity.RegisterEffect("scaleUp.moveDown", {
  defaultDuration: 1,
  calls: [
    [{
      translateY: '-90%',
      scale: scaleDownAmnt,
      // boxShadowBlur: boxShadowAmnt
    }, 0.20],
    [{
      translateY: '0%'
    }, 0.60],
    [{
      translateY: '0%',
      scale: '1',
      // boxShadowBlur: '0'
    }, 0.20]
  ]
});



/**
 * Velo Slider
 * A Custom Slider using Velocity and Velocity UI effects
 */

var VeloSlider = (function() {

  /**
   * Global Settings 
   */
  var settings = {
    veloInit: $('.velo-slides').data('velo-slider'),
    $veloSlide: $('.velo-slide'),
    veloSlideBg: '.velo-slide__bg',
    navPrev:  $('.velo-slides-nav').find('a.js-velo-slides-prev'),
    navNext:  $('.velo-slides-nav').find('a.js-velo-slides-next'),
    veloBtn:   $('.velo-slide__btn'),
    delta: 0,
    scrollThreshold: 7,
    currentSlide: 1,
    animating: false,
    animationDuration: 2000
  };


  // Flags
  var delta = 0,
      animating = false;

  return {
   
      /**
       * Init 
       */
      init: function() {
        this.bind();
      },
    
    /**
     * Bind our click, scroll, key events
     */
    bind: function(){
 
      //  Add active to first slide to set it off
      settings.$veloSlide.first().addClass('is-active');

      //  Init with a data attribute, 
      //  Binding the animation to scroll, arrows, keys
      if (settings.veloInit == 'on') {
        VeloSlider.initScrollJack();
        $(window).on('DOMMouseScroll mousewheel', VeloSlider.scrollJacking);
      }

      // Arrow / Click Nav
      settings.navPrev.on('click', VeloSlider.prevSlide);
      settings.navNext.on('click', VeloSlider.nextSlide);
    
      // Key Nav
      $(document).on('keydown', function(e) {
        var keyNext = (e.which == 39 || e.which == 40),
            keyPrev = (e.which == 37 || e.which == 38);

        if (keyNext && !settings.navNext.hasClass('inactive')) {
          e.preventDefault();
          VeloSlider.nextSlide();

        } else if (keyPrev && (!settings.navPrev.hasClass('inactive'))) {
          e.preventDefault();
          VeloSlider.prevSlide();
        }
      });
      
      // // Swipes
      // $(window).swipe(function( direction, offset ) {
      //   //if (offset < 100) { return; }
      //   if (direction == "up") { 
      //     VeloSlider.prevSlide(); 
      //     console.log('swipe up');

      //   }
      //   if (direction == "down") { VeloSlider.nextSlide(); } 
      // });
    
      //set navigation arrows visibility
      VeloSlider.checkNavigation();

      // Call Button Hover animation
      VeloSlider.hoverAnimation();
     
    },

    /**
     * Hover Animation
     * Adds 'is-hovering' class to the current slide
     * when hovering over the button.
     */
    hoverAnimation: function(){
      settings.veloBtn.hover(function (){
        $(this).closest(settings.$veloSlide).toggleClass('is-hovering');
      });
    },

    /** 
     * Set Animation
     * Defines the animation sequence, calling our registered velocity effects
     * @see js/components/_velocity-effects.js
     */
    setAnimation: function(midStep, direction) {
      
      // Vars for our velocity effects
      var animationVisible = 'translateNone',
          animationTop = 'translateUp',
          animationBottom = 'translateDown',
          easing = 'ease',
          animDuration = settings.animationDuration;

      // Middle Step
      if (midStep) {
        animationVisible = 'scaleUp.moveUp.scroll';
        animationTop = 'scaleDown.moveUp.scroll';
        animationBottom = 'scaleDown.moveDown.scroll';
      
      } else {
        animationVisible = (direction == 'next') ? 'scaleUp.moveUp' : 'scaleUp.moveDown';
        animationTop = 'scaleDown.moveUp';
        animationBottom = 'scaleDown.moveDown';
      }

      return [animationVisible, animationTop, animationBottom, animDuration, easing];
    },

    /** 
     * Init Scroll Jaclk
     */
    initScrollJack: function() {

      var visibleSlide = settings.$veloSlide.filter('.is-active'),
          topSection = visibleSlide.prevAll(settings.$veloSlide),
          bottomSection = visibleSlide.nextAll(settings.$veloSlide),
          animationParams = VeloSlider.setAnimation(false),
          animationVisible = animationParams[0],
          animationTop = animationParams[1],
          animationBottom = animationParams[2];
          console.log(animationParams);
          console.log(animationParams[4]);

      visibleSlide.children('div').velocity(animationVisible, 1, function() {
        visibleSlide.css('opacity', 1);
        topSection.css('opacity', 1);
        bottomSection.css('opacity', 1);
      });

      topSection.children('div').velocity(animationTop, 0);
      bottomSection.children('div').velocity(animationBottom, 0);
    },

    /**
     * Scroll Jack
     * On Mouse Scroll
     */
    scrollJacking: function(e) {
      if (e.originalEvent.detail < 0 || e.originalEvent.wheelDelta > 0) {
        delta--;
        (Math.abs(delta) >= settings.scrollThreshold) && VeloSlider.prevSlide();
      } else {
        delta++;
        (delta >= settings.scrollThreshold) && VeloSlider.nextSlide();
      }
      return false;
    },

    /**
     * Previous Slide
     */
    prevSlide: function(e) {
      //go to previous section
      typeof e !== 'undefined' && e.preventDefault();
      
      var visibleSlide = settings.$veloSlide.filter('.is-active'),
          animationParams = VeloSlider.setAnimation(midStep, 'prev'),
          midStep = false;
      
      visibleSlide = midStep ? visibleSlide.next(settings.$veloSlide) : visibleSlide;

      console.log(midStep);

      if (!animating && !visibleSlide.is(":first-child")) {
        animating = true;
        
        visibleSlide
          .removeClass('is-active')
          .children(settings.veloSlideBg)
          .velocity(animationParams[2], animationParams[3], animationParams[4])
          .end()
          .prev(settings.$veloSlide)
          .addClass('is-active')
          .children(settings.veloSlideBg)
          .velocity(animationParams[0], animationParams[3], animationParams[4], function() {
            animating = false;
          });
        currentSlide = settings.currentSlide - 1;
      }
      VeloSlider.resetScroll();
    },


    /** 
     * Next Slide
     */
    nextSlide: function(e) {
      
      //go to next section
      typeof e !== 'undefined' && e.preventDefault();
      
      var visibleSlide = settings.$veloSlide.filter('.is-active'),
          animationParams = VeloSlider.setAnimation(midStep, 'next'),
          midStep = false;

      if (!animating && !visibleSlide.is(":last-of-type")) {
        animating = true;

        visibleSlide.removeClass('is-active')
          .children(settings.veloSlideBg)
          .velocity(animationParams[1], animationParams[3])
          .end()
          .next(settings.$veloSlide)
          .addClass('is-active')
          .children(settings.veloSlideBg)
          .velocity(animationParams[0], animationParams[3], function() {
            animating = false;
        });
        currentSlide = settings.currentSlide + 1;
      }
      VeloSlider.resetScroll();
    },

    /**
     * Reset SCroll
     */
    resetScroll: function() {
      delta = 0;
      VeloSlider.checkNavigation();
    },

    /**
     * Check Nav
     * Adds / hides nav based on first/last slide
     * @todo - loop slides, without cloning if possible
     */
    checkNavigation: function() {
      //update navigation arrows visibility
      (settings.$veloSlide.filter('.is-active').is(':first-of-type')) ? settings.navPrev.addClass('inactive'): settings.navPrev.removeClass('inactive');
      (settings.$veloSlide.filter('.is-active').is(':last-of-type')) ? settings.navNext.addClass('inactive'): settings.navNext.removeClass('inactive');

    },
  };
})();

// INIT
VeloSlider.init();
  
              
            
!
999px

Console