cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

            
              <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">      
        <!-- Img -->
        <figure class="velo-slide__figure" style="background-image: url(http://stephenscaff.com/wp-content/uploads/2017/05/post-velo.jpeg)"></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 fine internet goods 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">
        <!-- Img -->
        <figure class="velo-slide__figure" style="background-image: url(http://stephenscaff.com/wp-content/uploads/2017/07/post-nested.jpg)"></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>This slider component thing uses Velocity for enhance animation performance. Nav slides via scroll, click or arrow keys.</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>
    
    <!-- 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">
        <!-- 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.</span></span></p>
        <span class="velo-slide__btn"><a class="btn-draw btn--white" href="http://urbaninfluence.com"><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="#"><i class="icon-down-arrow"></i></a>
        </li>
      </ul>
    </nav>
  </section>
</main>
            
          
!
            
              // ----------------------------------------------
// 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;
    }
  }
}


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


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



//----------------------------------------------
// 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;
}


/**
 * 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;
  }
}


//---------------------------------------------- 
//  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%;
  }

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

  // 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(2em, 3.5em, 4.5em, 5em);
  }

  // Velo-Slide__Text
  &__text{
    color: #fff;
    max-width: 35em;
    display: block;
    margin: 1em 0 1.5em 1%;
    line-height: 1.8;
    font-weight: 300;
    @include font-rwd(0.9em, 1.1em);
  }

  // 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 Hints
//  Vertical line with text, rotated to left of slide
//----------------------------------------------
.velo-slider__hint {
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0.5em;
  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: 2em;
  bottom: 3em;

  @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";
}


            
          
!
            
              /**
 * Velocity Effects
 */

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


//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();
        }
      });
    
      //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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console