Fashion Interactive Slider With jQuery And Velocity - Velo Slider

Fashion Interactive Slider With jQuery And Velocity - Velo Slider
File Size: 7.6 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

The jQuery Velo Slider helps you create a fashion, interactive, vertical slider with smooth transition effects powered by Velocity.js library. The users are able to navigate between slides via scroll, click or arrow keys.

How to use it:

1. Add the slides together with the nav buttons to the webpage.

<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(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 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(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>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>
  
  <!-- 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>

2. The primary CSS/CSS3 styles.

.btn-draw, .velo-slider__hint > span {
  font-family: "Montserrat", Helvetica, sans-serif;
  font-size: 0.8em;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

/** 
 * Default to Border Box
 */

*, *:before, *:after { box-sizing: border-box; }

body {
  margin: 0;
  width: 100%;
  font-family: "Montserrat", Georgia, serif;
  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;
}

body {
  font-family: "Montserrat", Georgia, serif;
  line-height: 1.6;
}

body { font-size: 100%; }
@media (min-width: 32em) {

body { font-size: 102%; }
}
@media (min-width: 54em) {

body { font-size: 103%; }
}
@media (min-width: 65em) {

body { font-size: 107%; }
}
@media (min-width: 75em) {

body { font-size: 110%; }
}
@media (min-width: 91em) {

body { font-size: 120%; }
}
@media (min-width: 115em) {

body { font-size: 130%; }
}
@media (min-width: 130em) {

body { font-size: 140%; }
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Montserrat", Helvetica, sans-serif;
  font-weight: 700;
}

/**
 * Links
 */

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

.btn-draw {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  width: auto;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}

.btn-draw {
  color: #00ffc8;
  margin-left: 2.3em;
}

.btn-draw:after {
  content: '';
  top: 0;
  right: 0;
  height: 1px;
  width: 100%;
  background-color: #00ffc8;
}

.btn-draw:before {
  content: '';
  position: absolute;
  top: 50%;
  left: -2.4em;
  height: 1px;
  width: 3em;
  background-color: #00ffc8;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}

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

.btn-draw .btn-draw__text:before, .btn-draw .btn-draw__text:after {
  content: '';
  position: absolute;
  height: 1px;
  width: 0;
  background-color: #00ffc8;
}

.btn-draw .btn-draw__text:before {
  top: 0;
  left: 0;
  -webkit-transition: width 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
  transition: width 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-draw .btn-draw__text:after {
  bottom: 0;
  right: 0;
  -webkit-transition: width 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
  transition: width 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-draw .btn-draw__text > span:before, .btn-draw .btn-draw__text > span:after {
  content: '';
  position: absolute;
  height: 0;
  width: 1px;
  background-color: #00ffc8;
  -webkit-transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
  transition: all 0.2s cubic-bezier(0.2, 0.3, 0.25, 0.9);
}

.btn-draw .btn-draw__text > span:before {
  left: 0;
  bottom: 0;
  -webkit-transition: height 0.15s 0 cubic-bezier(0.77, 0, 0.175, 1);
  transition: height 0.15s 0 cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-draw .btn-draw__text > span:after {
  right: 0;
  top: 0;
  -webkit-transition: height 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  transition: height 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}
@media (hover) {

.btn-draw:hover, a:hover .btn-draw {
  cursor: pointer;
  color: #00ffc8;
}

.btn-draw:hover:before, a:hover .btn-draw:before {
  width: 0;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

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

.btn-draw:hover .btn-draw__text:before, a:hover .btn-draw .btn-draw__text:before {
  width: 100%;
  max-width: 100%;
  -webkit-transition: width 0.15s cubic-bezier(0.77, 0, 0.175, 1);
  transition: width 0.15s cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-draw:hover .btn-draw__text:after, a:hover .btn-draw .btn-draw__text:after {
  width: 100%;
  -webkit-transition: width 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
  transition: width 0.15s 0.3s cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-draw:hover .btn-draw__text > span:before, a:hover .btn-draw .btn-draw__text > span:before {
  left: 0;
  height: 100%;
  -webkit-transition: height 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
  transition: height 0.15s 0.45s cubic-bezier(0.77, 0, 0.175, 1);
}

.btn-draw:hover .btn-draw__text > span:after, a:hover .btn-draw .btn-draw__text > span:after {
  right: 0;
  height: 100%;
  -webkit-transition: height 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
  transition: height 0.15s 0.15s cubic-bezier(0.77, 0, 0.175, 1);
}
}

.btn-draw.btn--white { color: #fff; }

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

.btn-draw.btn--white:hover, a:hover .btn-draw.btn--white { color: #fff; }

.velo-slides {
  z-index: 8;
  position: relative;
  height: 100vh;
  background-color: #111;
}

.velo-slides[data-velo-slider="on"] { overflow: hidden; }

.velo-slide {
  height: 100vh;
  z-index: 4;
}

@media (min-width: 54em) and (max-width: 65em) {

.velo-slide { font-size: 80%; }
}

@media (min-width: 54em) and (min-height: 0) and (max-height: 45em) {

.velo-slide { font-size: 70%; }
}

[data-velo-slider="on"] .velo-slide {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.velo-slide.is-active { z-index: 8; }

.velo-slide__bg {
  z-index: 7;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  color: #111;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  background-color: #111;
  overflow: hidden;
}

.velo-slide__bg:after {
  z-index: 0;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.4;
  background: #111;
}

.velo-slide__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;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.is-hovering .velo-slide__figure {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.velo-slide__vid-wrap {
  z-index: 5;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

.velo-slide__vid-wrap:after {
  z-index: 0;
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  opacity: 0.4;
  background: #111;
}

.is-hovering .velo-slide__vid-wrap {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  -webkit-transition: -webkit-transform 0.5s ease;
  transition: -webkit-transform 0.5s ease;
  transition: transform 0.5s ease;
  transition: transform 0.5s ease, -webkit-transform 0.5s ease;
}

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

.velo-slide__header {
  z-index: 9;
  position: relative;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  overflow-y: hidden;
  padding: 6%;
}

.velo-slide__pretitle {
  color: #fff;
  max-width: 22em;
}

@media (min-width: 54em) {

.velo-slide__pretitle { margin-left: 7%; }
}

.velo-slide__title {
  margin-bottom: 0.1em;
  line-height: 1.1;
  color: #fff;
  letter-spacing: -0.025em;
  font-weight: 700;
  font-size: 2em;
}

@media (min-width: 54em) {

.velo-slide__title { font-size: 3.5em; }
}

@media (min-width: 65em) {

.velo-slide__title { font-size: 4.5em; }
}

@media (min-width: 91em) {

.velo-slide__title { font-size: 5em; }
}

.velo-slide__text {
  color: #fff;
  max-width: 35em;
  display: block;
  margin: 1em 0 1.5em 1%;
  line-height: 1.8;
  font-weight: 300;
  font-size: 0.9em;
}

@media (min-width: 54em) {

.velo-slide__text { font-size: 1.1em; }
}

.velo-slide__btn { opacity: 0; }

@media (min-width: 54em) {

.velo-slide__btn { margin-left: 1vw; }
}

.is-active .velo-slide__btn { opacity: 1; }

.velo-slide__btn > a > span {
  opacity: 0;
  overflow-y: hidden;
  -webkit-transform: translate3d(0, 100%, 0);
  transform: translate3d(0, 100%, 0);
}

.is-active .velo-slide__btn > a > span {
  opacity: 1;
  z-index: 9999;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: transform 0.4s ease, opacity 0.8s ease;
  transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
}

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

.velo-slides[data-velo-theme="light"] .velo-slide { margin-top: -1em; }

.velo-slides[data-velo-theme="light"] .velo-slide__bg { color: #c5cac5; }
 [data-velo-theme="dark"] {
 background: #111;
}

[data-velo-theme="dark"] .velo-slides__bg {
  background-color: #111;
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}

.oh {
  display: block;
  overflow-y: hidden;
  padding: 0.02em 0;
}

.oh span {
  display: inline-block;
  -webkit-transform: translate3d(0, 140%, 0);
  transform: translate3d(0, 140%, 0);
  opacity: 0;
  -webkit-transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: opacity 0.8s ease, -webkit-transform 0.4s ease;
  transition: transform 0.4s ease, opacity 0.8s ease;
  transition: transform 0.4s ease, opacity 0.8s ease, -webkit-transform 0.4s ease;
}

.is-active .oh span {
  -webkit-transform: translate3d(0, 0%, 0);
  transform: translate3d(0, 0%, 0);
  opacity: 1;
  -webkit-transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease;
  transition: transform 0.6s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.1s ease, -webkit-transform 0.6s cubic-bezier(0.77, 0, 0.175, 1);
}

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

.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: 54em) {

.velo-slider__hint { display: block; }
}

.velo-slider__hint > span {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  -webkit-transform: translate(-50%, -50%) rotate(-90deg);
  transform: translate(-50%, -50%) rotate(-90deg);
  overflow: hidden;
}

.velo-slider__hint > span > span {
  display: inline-block;
  -webkit-transform: translateY(-110%);
  transform: translateY(-110%);
}

.is-active .velo-slider__hint > span > span {
  opacity: 1;
  top: 50%;
  -webkit-transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
  transition: 1s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  -webkit-transition: 0.4 ease;
  transition: 0.4 ease;
}

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

@media (min-width: 54em) {

.velo-slides-nav {
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
}

.velo-slides-nav__list { list-style: none; }

.velo-slides-nav li:first-child { margin-bottom: 0.25em; }

.velo-slides-nav a {
  display: block;
  color: rgba(255, 255, 255, 0.9);
  -webkit-transition: color 0.5s ease, text-shadow 0.5s ease;
  transition: color 0.5s ease, text-shadow 0.5s ease;
}

.velo-slides-nav a:hover {
  color: white;
  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.6);
  -webkit-transition: color 0.5s ease, text-shadow 0.5s ease;
  transition: color 0.5s ease, text-shadow 0.5s ease;
}

.velo-slides-nav a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}

.velo-slides-nav i { font-size: 2.2em; }
@media (min-width: 54em) {

.velo-slides-nav i { 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"; }

3. Load the needed jQuery and Velocity.js libraries at the end of the document.

<script src="/path/to/jquery.min.js"></script> 
<script src="/path/to/velocity.js"></script>
<script src="/path/to/velocity.ui.js"></script> 

4. The main JavaScript for the slider.

/**
 * 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();

This awesome jQuery plugin is developed by StephenScaff. For more Advanced Usages, please check the demo page or visit the official website.