Fancy Slider

fancy-slider.markdown

Fancy Slider

Based on dribbble shot by Kreativa Studio - https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation

Fullscreen please. Looks best in Webkit browsers, because clip-path not working in FF/IE without SVG fallbacks, which I don't want to use in this demo. Not responsive atm, I will figure out something soon.

Features:

1. Clip-path for image masking rectangle border (webkit only).

2. Blend-mode for this mask.

3. Smart color system, just put your color name and value into sass map and then add proper class with this color name to elements and everything will work!

4. Cool credits side-menu (click small button in the center of demo).

5. Vanilla js with just < 200 lines of code (basically it's just adds/removes classes).

6. Reusable/configurable. I will add some comments to css/js code if I don't forget about it :D

P.S. - background-attachment: fixed does not working with transforms, so I tried to achieve completly static bg-image during mask movement with translateY, but bg-image was "jumpy", so right now bg-image simply goes up when mask rotates, which is ok for me.

A Pen by Nikolay Talanov on CodePen.

License.

index.html

<!-- 
Please note, that you can apply .m--global-blending-active to .fnc-slider 
to enable blend-mode for all background-images or apply .m--blend-bg-active
to some specific slides (.fnc-slide). It's disabled by default in this demo,
because it requires specific images, where more than 50% of bg is transparent or monotone
-->
<div class="demo-cont">
  <!-- slider start -->
  <div class="fnc-slider example-slider">
    <div class="fnc-slider__slides">
      <!-- slide start -->
      <div class="fnc-slide m--blend-green m--active-slide">
        <div class="fnc-slide__inner">
          <div class="fnc-slide__mask">
            <div class="fnc-slide__mask-inner"></div>
          </div>
          <div class="fnc-slide__content">
            <h2 class="fnc-slide__heading">
              <div class="fnc-slide__heading-line">
                <span>Black</span>
              </div>
              <div class="fnc-slide__heading-line">
                <span>Widow</span>
              </div>
            </h2>
            <button type="button" class="fnc-slide__action-btn">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-dark">
        <div class="fnc-slide__inner">
          <div class="fnc-slide__mask">
            <div class="fnc-slide__mask-inner"></div>
          </div>
          <div class="fnc-slide__content">
            <h2 class="fnc-slide__heading">
              <div class="fnc-slide__heading-line">
                <span>Captain</span>
              </div>
              <div class="fnc-slide__heading-line">
                <span>America</span>
              </div>
            </h2>
            <button type="button" class="fnc-slide__action-btn">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-red">
        <div class="fnc-slide__inner">
          <div class="fnc-slide__mask">
            <div class="fnc-slide__mask-inner"></div>
          </div>
          <div class="fnc-slide__content">
            <h2 class="fnc-slide__heading">
              <div class="fnc-slide__heading-line">
                <span>Iron</span>
              </div>
              <div class="fnc-slide__heading-line">
                <span>Man</span>
              </div>
            </h2>
            <button type="button" class="fnc-slide__action-btn">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
      <!-- slide start -->
      <div class="fnc-slide m--blend-blue">
        <div class="fnc-slide__inner">
          <div class="fnc-slide__mask">
            <div class="fnc-slide__mask-inner"></div>
          </div>
          <div class="fnc-slide__content">
            <h2 class="fnc-slide__heading">
              <div class="fnc-slide__heading-line">
                <span>Thor</span>
              </div>
              <div class="fnc-slide__heading-line">
                <span>Just Thor</span>
              </div>
            </h2>
            <button type="button" class="fnc-slide__action-btn">
              Credits
              <span data-text="Credits">Credits</span>
            </button>
          </div>
        </div>
      </div>
      <!-- slide end -->
    </div>
    <nav class="fnc-nav">
      <div class="fnc-nav__bgs">
        <div class="fnc-nav__bg m--navbg-green m--active-nav-bg"></div>
        <div class="fnc-nav__bg m--navbg-dark"></div>
        <div class="fnc-nav__bg m--navbg-red"></div>
        <div class="fnc-nav__bg m--navbg-blue"></div>
      </div>
      <div class="fnc-nav__controls">
        <button class="fnc-nav__control">
          Black Widow
          <span class="fnc-nav__control-progress"></span>
        </button>
        <button class="fnc-nav__control">
          Captain America
          <span class="fnc-nav__control-progress"></span>
        </button>
        <button class="fnc-nav__control">
          Iron Man
          <span class="fnc-nav__control-progress"></span>
        </button>
        <button class="fnc-nav__control">
          Thor
          <span class="fnc-nav__control-progress"></span>
        </button>
      </div>
    </nav>
  </div>
  <!-- slider end -->
  <div class="demo-cont__credits">
    <div class="demo-cont__credits-close"></div>
    <h2 class="demo-cont__credits-heading">Made by</h2>
    <img src="//s3-us-west-2.amazonaws.com/s.cdpn.io/142996/profile/profile-512_5.jpg" alt="" class="demo-cont__credits-img" />
    <h3 class="demo-cont__credits-name">Nikolay Talanov</h3>
    <a href="https://codepen.io/suez/" target="_blank" class="demo-cont__credits-link">My codepen</a>
    <a href="https://twitter.com/NikolayTalanov" target="_blank" class="demo-cont__credits-link">My twitter</a>
    <h2 class="demo-cont__credits-heading">Based on</h2>
    <a href="https://dribbble.com/shots/2375246-Fashion-Butique-slider-animation" target="_blank" class="demo-cont__credits-link">Concept by Kreativa Studio</a>
    <h4 class="demo-cont__credits-blend">Global Blend Mode</h4>
    <div class="colorful-switch">
      <input type="checkbox" class="colorful-switch__checkbox js-activate-global-blending" id="colorful-switch-cb" />
      <label class="colorful-switch__label" for="colorful-switch-cb">
        <span class="colorful-switch__bg"></span>
        <span class="colorful-switch__dot"></span>
        <span class="colorful-switch__on">
          <span class="colorful-switch__on__inner"></span>
        </span>
        <span class="colorful-switch__off"></span>
      </label>
    </div>
  </div>
</div>

script.js

(function() {

  var $$ = function(selector, context) {
    var context = context || document;
    var elements = context.querySelectorAll(selector);
    return [].slice.call(elements);
  };

  function _fncSliderInit($slider, options) {
    var prefix = ".fnc-";

    var $slider = $slider;
    var $slidesCont = $slider.querySelector(prefix + "slider__slides");
    var $slides = $$(prefix + "slide", $slider);
    var $controls = $$(prefix + "nav__control", $slider);
    var $controlsBgs = $$(prefix + "nav__bg", $slider);
    var $progressAS = $$(prefix + "nav__control-progress", $slider);

    var numOfSlides = $slides.length;
    var curSlide = 1;
    var sliding = false;
    var slidingAT = +parseFloat(getComputedStyle($slidesCont)["transition-duration"]) * 1000;
    var slidingDelay = +parseFloat(getComputedStyle($slidesCont)["transition-delay"]) * 1000;

    var autoSlidingActive = false;
    var autoSlidingTO;
    var autoSlidingDelay = 5000; // default autosliding delay value
    var autoSlidingBlocked = false;

    var $activeSlide;
    var $activeControlsBg;
    var $prevControl;

    function setIDs() {
      $slides.forEach(function($slide, index) {
        $slide.classList.add("fnc-slide-" + (index + 1));
      });

      $controls.forEach(function($control, index) {
        $control.setAttribute("data-slide", index + 1);
        $control.classList.add("fnc-nav__control-" + (index + 1));
      });

      $controlsBgs.forEach(function($bg, index) {
        $bg.classList.add("fnc-nav__bg-" + (index + 1));
      });
    };

    setIDs();

    function afterSlidingHandler() {
      $slider.querySelector(".m--previous-slide").classList.remove("m--active-slide", "m--previous-slide");
      $slider.querySelector(".m--previous-nav-bg").classList.remove("m--active-nav-bg", "m--previous-nav-bg");

      $activeSlide.classList.remove("m--before-sliding");
      $activeControlsBg.classList.remove("m--nav-bg-before");
      $prevControl.classList.remove("m--prev-control");
      $prevControl.classList.add("m--reset-progress");
      var triggerLayout = $prevControl.offsetTop;
      $prevControl.classList.remove("m--reset-progress");

      sliding = false;
      var layoutTrigger = $slider.offsetTop;

      if (autoSlidingActive && !autoSlidingBlocked) {
        setAutoslidingTO();
      }
    };

    function performSliding(slideID) {
      if (sliding) return;
      sliding = true;
      window.clearTimeout(autoSlidingTO);
      curSlide = slideID;

      $prevControl = $slider.querySelector(".m--active-control");
      $prevControl.classList.remove("m--active-control");
      $prevControl.classList.add("m--prev-control");
      $slider.querySelector(prefix + "nav__control-" + slideID).classList.add("m--active-control");

      $activeSlide = $slider.querySelector(prefix + "slide-" + slideID);
      $activeControlsBg = $slider.querySelector(prefix + "nav__bg-" + slideID);

      $slider.querySelector(".m--active-slide").classList.add("m--previous-slide");
      $slider.querySelector(".m--active-nav-bg").classList.add("m--previous-nav-bg");

      $activeSlide.classList.add("m--before-sliding");
      $activeControlsBg.classList.add("m--nav-bg-before");

      var layoutTrigger = $activeSlide.offsetTop;

      $activeSlide.classList.add("m--active-slide");
      $activeControlsBg.classList.add("m--active-nav-bg");

      setTimeout(afterSlidingHandler, slidingAT + slidingDelay);
    };



    function controlClickHandler() {
      if (sliding) return;
      if (this.classList.contains("m--active-control")) return;
      if (options.blockASafterClick) {
        autoSlidingBlocked = true;
        $slider.classList.add("m--autosliding-blocked");
      }

      var slideID = +this.getAttribute("data-slide");

      performSliding(slideID);
    };

    $controls.forEach(function($control) {
      $control.addEventListener("click", controlClickHandler);
    });

    function setAutoslidingTO() {
      window.clearTimeout(autoSlidingTO);
      var delay = +options.autoSlidingDelay || autoSlidingDelay;
      curSlide++;
      if (curSlide > numOfSlides) curSlide = 1;

      autoSlidingTO = setTimeout(function() {
        performSliding(curSlide);
      }, delay);
    };

    if (options.autoSliding || +options.autoSlidingDelay > 0) {
      if (options.autoSliding === false) return;
      
      autoSlidingActive = true;
      setAutoslidingTO();
      
      $slider.classList.add("m--with-autosliding");
      var triggerLayout = $slider.offsetTop;
      
      var delay = +options.autoSlidingDelay || autoSlidingDelay;
      delay += slidingDelay + slidingAT;
      
      $progressAS.forEach(function($progress) {
        $progress.style.transition = "transform " + (delay / 1000) + "s";
      });
    }
    
    $slider.querySelector(".fnc-nav__control:first-child").classList.add("m--active-control");

  };

  var fncSlider = function(sliderSelector, options) {
    var $sliders = $$(sliderSelector);

    $sliders.forEach(function($slider) {
      _fncSliderInit($slider, options);
    });
  };

  window.fncSlider = fncSlider;
}());

/* not part of the slider scripts */

/* Slider initialization
options:
autoSliding - boolean
autoSlidingDelay - delay in ms. If audoSliding is on and no value provided, default value is 5000
blockASafterClick - boolean. If user clicked any sliding control, autosliding won't start again
*/
fncSlider(".example-slider", {autoSlidingDelay: 4000});

var $demoCont = document.querySelector(".demo-cont");

[].slice.call(document.querySelectorAll(".fnc-slide__action-btn")).forEach(function($btn) {
  $btn.addEventListener("click", function() {
    $demoCont.classList.toggle("credits-active");
  });
});

document.querySelector(".demo-cont__credits-close").addEventListener("click", function() {
  $demoCont.classList.remove("credits-active");
});

document.querySelector(".js-activate-global-blending").addEventListener("click", function() {
  document.querySelector(".example-slider").classList.toggle("m--global-blending-active");
});

style.scss

.fnc {

  // main variables, basically everything depends on $slidingAT
  $slidingAT: 1s;
  $slidingDelay: $slidingAT / 3 * 2;
  $maskAT: $slidingAT*0.7;
  $headingAT: $slidingAT * 1.5;
  $controlAT: $slidingAT/2;
  $easing: ease-in-out;
  $blendMode: luminosity;

  $contentLeft: 40%;
  $contentTop: 40%;
  
  $headingPadding: 30px;
  $headingFontSize: 100px;
  
  $maskTop: 15%;
  $maskRight: 100% - $contentLeft;
  $maskHeight: 67vh;
  $maskWidth: $maskHeight * 0.75;

  $black: #1F2833;

  /* you can add color names and their values here
  and then simply add classes like .m--blend-$colorName to .fnc-slide 
  to apply specific color for mask blend mode */
  $bgColors: (
    dark: lighten(#242424, 20%),
    green: #42605E,
    red: lighten(#6A0A0D, 10%),
    blue: #2D7791
  );

  &-slider {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
    height: 100vh;

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

    &__slides {
      position: relative;
      height: 100%;
      transition: transform $slidingAT $slidingDelay;
    }
    
    // iterate through color map and set colors for specific classes
    @each $colorTheme, $bgColor in $bgColors {
      .m--blend-#{$colorTheme} {
        .fnc-slide__inner {
          background-color: lighten($bgColor, 20%);
        }

        .fnc-slide__mask-inner {
          background-color: $bgColor;
        }
      }

      .m--navbg-#{$colorTheme} {
        background-color: $bgColor;
      }
    }
  }

  &-slide {
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: translate3d(0,0,0);

    &.m--before-sliding {
      z-index: 2 !important;
      transform: translate3d(100%,0,0);
    }

    &.m--active-slide {
      z-index: 1;
      transition: transform $slidingAT $slidingDelay $easing;
      transform: translate3d(0,0,0);
    }

    &__inner {
      position: relative;
      height: 100%;
      background-size: cover;
      background-position: center top;
      transform: translate3d(0,0,0);

      .m--global-blending-active &,
      .m--blend-bg-active & {
        background-blend-mode: $blendMode;
      }

      .m--before-sliding & {
        transform: translate3d(-100%,0,0);
      }

      .m--active-slide & {
        transition: transform $slidingAT $slidingDelay $easing;
        transform: translate3d(0,0,0);
      }
    }

    &__mask {
      $activeDelay: $slidingAT + $slidingDelay/3;
      $xOffset: 200px;
      $yOffset: 0;
      $deg: 10deg;

      overflow: hidden;
      z-index: 1;
      position: absolute;
      right: $maskRight;
      top: $maskTop;
      width: $maskWidth;
      height: $maskHeight;
      margin-right: $headingPadding * -3;
      // This line basically does all magic with masking effect. Very simple and elegant. Webkit only atm.
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, 6vh 0, 6vh 61vh, 44vh 61vh, 44vh 6vh, 6vh 6vh);
      transform-origin: 50% 0;
      transition-timing-function: $easing;

      .m--before-sliding & {
        transform: rotate($deg*-1) translate3d($xOffset,0,0);
        opacity: 0;
      }

      .m--active-slide & {
        transition: transform $maskAT $activeDelay, opacity $maskAT/2 $activeDelay;
        transform: translate3d(0,0,0);
        opacity: 1;
      }

      .m--previous-slide & {
        transition: transform $maskAT $slidingDelay/2, opacity $maskAT/2 $maskAT/2 + $slidingDelay/2;
        transform: rotate($deg) translate3d($xOffset*-1,0,0);
        opacity: 0;
      }

      &-inner {
        z-index: -1;
        position: absolute;
        left: 50%;
        top: 50%;
        width: 100vw;
        height: 100vh;
        margin-left: -50vw;
        margin-top: -50vh;
        background-size: cover;
        background-position: center center;
        background-blend-mode: $blendMode;
        transform-origin: 50% (100vh - $maskHeight) / 2;
        transition-timing-function: $easing;

        .m--before-sliding & {
          transform: translateY($yOffset) rotate($deg) translateX($xOffset*-1) translateZ(0);
        }

        .m--active-slide & {
          transition: transform $maskAT $activeDelay;
          transform: translateX(0);
        }

        .m--previous-slide & {
          transition: transform $maskAT $slidingDelay/2;
          transform: translateY($yOffset) rotate($deg*-1) translateX($xOffset) translateZ(0);
        }
      }
    }

    &__content {
      z-index: 2;
      position: absolute;
      left: $contentLeft;
      top: $contentTop;
    }

    &__heading {
      margin-bottom: 10px;
      text-transform: uppercase;

      &-line {
        overflow: hidden;
        position: relative;
        padding-right: 20px;
        font-size: $headingFontSize;
        color: #fff;
        word-spacing: 10px;

        &:nth-child(2) {
          padding-left: $headingPadding;
        }

        .m--before-sliding & {
          transform: translateY(100%);
        }

        .m--active-slide & {
          transition: transform $headingAT $slidingDelay*1.5;
          transform: translateY(0);
        }

        .m--previous-slide & {
          transition: transform $headingAT;
          transform: translateY(-100%);
        }

        span {
          display: block;

          .m--before-sliding & {
            transform: translateY(-100%);
          }

          .m--active-slide & {
            transition: transform $headingAT $slidingDelay*1.5;
            transform: translateY(0);
          }

          .m--previous-slide & {
            transition: transform $headingAT;
            transform: translateY(100%);
          }
        }
      }
    }

    &__action-btn {
      $hoverAT: 0.3s;
      $fontSize: 20px;
      $vertPadding: 5px;
      $lineHeight: $fontSize + $vertPadding*2;

      position: relative;
      margin-left: 200px;
      padding: $vertPadding 15px;
      font-size: $fontSize;
      line-height: 1;
      color: transparent;
      border: none;
      text-transform: uppercase;
      background: transparent;
      cursor: pointer;
      text-align: center;
      outline: none;

      span {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        perspective: 1000px;
        transform-style: preserve-3d;
        transition: transform $hoverAT;
        transform-origin: 50% 0;
        line-height: $lineHeight;
        color: #fff;

        &:before {
          content: "";
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          border: 2px solid #fff;
          border-top: none;
          border-bottom: none;
        }

        &:after {
          content: attr(data-text);
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          line-height: $lineHeight;
          background: $black;
          opacity: 0;
          transform-origin: 50% 0;
          transform: translateY(100%) rotateX(-90deg);
          transition: opacity $hoverAT/2 $hoverAT/2;
        }
      }

      &:hover span {
        transform: rotateX(90deg);

        &:after {
          opacity: 1;
          transition: opacity $hoverAT/2;
        }
      }
    }
  }

  &-nav {
    z-index: 5;
    position: absolute;
    right: 0;
    bottom: 0;

    &__bgs {
      z-index: -1;
      overflow: hidden;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }

    &__bg {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;

      &.m--nav-bg-before {
        z-index: 2 !important;
        transform: translateX(100%);
      }

      &.m--active-nav-bg {
        z-index: 1;
        transition: transform $slidingAT $slidingDelay;
        transform: translateX(0);
      }
    }
    
    &__controls {
      font-size: 0;
    }

    &__control {
      $controlWidth: 100px;

      overflow: hidden;
      position: relative;
      display: inline-block;
      vertical-align: top;
      width: $controlWidth;
      height: 50px;
      font-size: 14px;
      color: #fff;
      text-transform: uppercase;
      background: transparent;
      border: none;
      outline: none;
      cursor: pointer;
      transition: background-color $controlAT;

      &.m--active-control {
        background: $black;
      }

      &-progress {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 2px;
        background: #fff;
        transform-origin: 0 50%;
        transform: scaleX(0);
        transition-timing-function: linear !important;

        .m--with-autosliding .m--active-control & {
          transform: scaleX(1);
        }

        .m--prev-control & {
          transform: translateX(100%);
          transition: transform 0.5s !important;
        }

        .m--reset-progress & {
          transform: scaleX(0);
          transition: transform 0s 0s !important;
        }

        .m--autosliding-blocked & {
          transition: all 0s 0s !important;
          transform: scaleX(0) !important;
        }
      }
    }
  }

}


/* NOT PART OF COMMON SLIDER STYLES */
$font: 'Open Sans', Helvetica, Arial, sans-serif;
$creditsAT: 0.7s;
$creditsWidth: 400px;

body {
  margin: 0;
}

.demo-cont {
  overflow: hidden;
  position: relative;
  height: 100vh;
  perspective: 1500px;
  background: #000;
  
  &__credits {
    box-sizing: border-box;
    overflow-y: auto;
    z-index: 1;
    position: absolute;
    right: 0;
    top: 0;
    width: $creditsWidth;
    height: 100%;
    padding: 20px 10px 30px;
    background: #303030;
    font-family: $font;
    color: #fff;
    text-align: center;
    transition: transform $creditsAT;
    transform: translate3d(100%,0,0) rotateY(-45deg);
    will-change: transform;
    
    .credits-active & {
      transition: transform $creditsAT $creditsAT/3;
      transform: translate3d(0,0,0);
    }
    
    *, *:before, *:after {
      box-sizing: border-box;
    }
    
    &-close {
      position: absolute;
      right: 20px;
      top: 20px;
      width: 28px;
      height: 28px;
      cursor: pointer;
      
      &:before,
      &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 100%;
        height: 2px;
        margin-top: -1px;
        background: #fff;
      }
      &:before {
        transform: rotate(45deg);
      }
      &:after {
        transform: rotate(-45deg);
      }
    }
    
    &-heading {
      text-transform: uppercase;
      font-size: 40px;
      margin-bottom: 20px;
    }
    
    &-img {
      display: block;
      width: 60%;
      margin: 0 auto 30px;
      border-radius: 10px;
    }
    
    &-name {
      margin-bottom: 20px;
      font-size: 30px;
    }
    
    &-link {
      display: block;
      margin-bottom: 10px;
      font-size: 24px;
      color: #fff;
    }
    
    &-blend {
      font-size: 30px;
      margin-bottom: 10px;
    }
  }
}

.example-slider {
  z-index: 2;
  transform: translate3d(0,0,0);
  transition: transform $creditsAT;
  
  .credits-active & {
    transform: translate3d($creditsWidth*-1,0,0) rotateY(10deg) scale(0.9);
  }

  .fnc-slide {

    &-1 {
      .fnc-slide__inner,
      .fnc-slide__mask-inner {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/blackwidow.jpg');
      }
    }
    &-2 {
      .fnc-slide__inner,
      .fnc-slide__mask-inner {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/captainamerica.jpg');
      }
    }
    &-3 {
      .fnc-slide__inner,
      .fnc-slide__mask-inner {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/ironman-alt.jpg');
      }

      .fnc-slide__inner:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(255,255,255,0.1);
      }
    }
    &-4 {
      .fnc-slide__inner,
      .fnc-slide__mask-inner {
        background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/thor.jpg');
      }

      .fnc-slide__inner:before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.2);
      }
    }
  }

  .fnc-slide__heading,
  .fnc-slide__action-btn,
  .fnc-nav__control {
    font-family: $font;
  }
}

/* COLORFUL SWITCH STYLES 
   ORIGINAL DEMO - https://codepen.io/suez/pen/WQjwOb */
$w: 180px;
$_baseW: 280;
$h: $w * 120 / $_baseW;
$br: $w * 50 / $_baseW;
$outerOffset: 5px;
$animTime: 0.5s;
$dotS: $w * 8 / $_baseW;
$dotLeft: $w * 204 / $_baseW;
$dotLeftOffset: $w * -125 / $_baseW;
$offS: $w * 64 / $_baseW;
$onLeft: $w * 162 / $_baseW;
$onTop: $w * 35 / $_baseW;
$onWidth: $w * 30 / $_baseW;
$onHeight: $w * 56 / $_baseW;
$cubIn: cubic-bezier(.52,-0.96,.51,1.28);
$cubOut: cubic-bezier(.67,-0.16,.47,1.61);

@mixin switchOn() {
  .colorful-switch__checkbox:checked ~ .colorful-switch__label & {
    @content;
  }
}

.colorful-switch {
  position: relative;
  width: $w;
  height: $h;
  margin: 0 auto;
  border-radius: $br;
  background: #cfcfcf;

  &:before {
    content: "";
    z-index: -1;
    position: absolute;
    left: -$outerOffset;
    top: -$outerOffset;
    width: $w + $outerOffset*2;
    height: $h + $outerOffset*2;
    border-radius: $br + $outerOffset;
    background: #314239;
    transition: background-color 0.3s;
  }

  &:hover:before {
    background: #4C735F;
  }

  &__checkbox {
    z-index: -10;
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
  }

  &__label {
    z-index: 1;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: $br;
    cursor: pointer;
  }

  &__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: $w * 3;
    height: 100%;
    background: linear-gradient(90deg, #14DCD6 0, #10E7BD $w, #EF9C29 $w*2, #E76339 100%);
    transition: transform $animTime;
    transform: translate3d($w*-2,0,0);

    @include switchOn {
      transform: translate3d(0,0,0);
    }
  }

  &__dot {
    position: absolute;
    left: $dotLeft;
    top: 50%;
    width: $dotS;
    height: $dotS;
    margin-left: $dotS/-2;
    margin-top: $dotS/-2;
    border-radius: 50%;
    background: #fff;
    transition: transform $animTime;
    transform: translate3d(0,0,0);

    @include switchOn {
      transform: translate3d($dotLeftOffset,0,0);
    }
  }

  &__on {
    position: absolute;
    left: $onLeft;
    top: $onTop;
    width: $onWidth;
    height: $onHeight;
    transition: transform $animTime;
    transform: translate3d(0,0,0);

    @include switchOn {
      transform: translate3d($dotLeftOffset,0,0);
    }

    &__inner {
      position: absolute;
      width: 100%;
      height: 100%;
      transition: transform $animTime/2 0s $cubIn;
      transform-origin: 100% 50%;
      transform: rotate(45deg) scale(0) translateZ(0);

      @include switchOn {
        transition: transform $animTime/2 $animTime/2 $cubOut;
        transform: rotate(45deg) scale(1) translateZ(0);
      }

      &:before,
      &:after {
        content: "";
        position: absolute;
        border-radius: $dotS/2;
        background: #fff;
      }
      &:before {
        left: 0;
        bottom: 0;
        width: 100%;
        height: $dotS+1px;
      }
      &:after {
        right: 0;
        top: 0;
        width: $dotS+1px;
        height: 100%;
      }
    }
  }

  &__off {
    position: absolute;
    left: $dotLeft;
    top: 50%;
    width: $offS;
    height: $offS;
    margin-left: $offS/-2;
    margin-top: $offS/-2;
    transition: transform $animTime;
    transform: translate3d(0,0,0);

    @include switchOn {
      transform: translate3d($dotLeftOffset,0,0);
    }

    &:before,
    &:after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      width: 100%;
      height: $dotS;
      margin-top: $dotS/-2;
      border-radius: $dotS/2;
      background: #fff;
      transition: transform $animTime/2 $animTime/2;

      @include switchOn {
        transition-delay: 0s;
      }
    }
    &:before {
      transform: rotate(45deg) scaleX(1) translateZ(0);

      @include switchOn {
        transform: rotate(45deg) scaleX(0) translateZ(0);
      }
    }
    &:after {
      transition-timing-function: $cubOut;
      transform: rotate(-45deg) scaleX(1) translateZ(0);

      @include switchOn {
        transition-timing-function: ease;
        transform: rotate(-45deg) scaleX(0) translateZ(0);
      }
    }
  }
}

styles

<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />