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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

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


            
          
!
            
              /**
 * 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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console