cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

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.

            
                  <header>
      <h1>Poly Slider Concept</h1>
      <p>This is the demo of part 1. of creating a multi effect slider.<br/> In this version, we are doing simple and complex effects using <a href="https://daneden.github.io/animate.css/">animate.css</a> as our animation library.</p>
      <select id="effect-list">
        <option value="">Select an effect to play</option>
      </select>
    </header>    


    <!-- Slider -->
    <div id="demo" class="poly-slider">
      <!-- Slides -->
      <ul class="poly-viewport">
        <li class="poly-slide">
          <img class="poly-bg" src="http://arnique.net/demos/plugins/polyslider/part-1/demo/images/pic1.jpg" alt="">
        </li>
        <li class="poly-slide">
          <img class="poly-bg"  src="http://arnique.net/demos/plugins/polyslider/part-1/demo/images/pic2.jpg" alt="" />
        </li>
        <li class="poly-slide">
          <img class="poly-bg"  src="http://arnique.net/demos/plugins/polyslider/part-1/demo/images/pic3.jpg" alt="" />
        </li>
        <li class="poly-slide">
          <img class="poly-bg"  src="http://arnique.net/demos/plugins/polyslider/part-1/demo/images/pic4.jpg" alt=""/>
        </li>
      </ul>
      <!-- /Slides -->
      
      <!-- Nav -->
      <a class="poly-nav back" href="#"><i class="fa fa-angle-left"></i></a>
      <a class="poly-nav forward" href="#"><i class="fa fa-angle-right"></i></a>
      <!-- /Nav -->
    </div>
    <!-- /Slider -->
            
          
!
            
              /* PAGE */

body {
  max-width: 800px;
  margin:0 auto;
  font: 300 15px  "Roboto Condensed", Arial, sans-serif;
  color: #888;
  
}
header {
  text-align: center; 
  margin: 80px 0 30px 0;
}
h1 {
  font-weight:300;
  color:#AE1609;
}

#effect-list {
  padding: 10px 15px;
  border:1px solid #ddd;
}

#demo {
  margin:0 0 60px 0;
}

/* SLIDER */
.poly-slider {
  position: relative;
  width: 100%;
  display:block;
}

.poly-viewport {
  display:block;
  list-style:none;
  margin:0;
  padding:0;
  overflow: hidden;
  width: 100%;
  height:100%;
  position: relative;
  perspective: 1000px;
}

.poly-slide {
  display:block;
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  z-index:1;
  visibility: hidden;
}

.poly-slide.active, .poly-slide.incoming {
  visibility: visible;
}

.poly-slide.incoming {
  z-index: 2;
}

.poly-slide.z-top {
  z-index:3;
}

.poly-slide-clone, .poly-slice, .poly-slice-part {
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
}

.poly-slide-clone {
  z-index: 100;
}

.poly-slide.clear-bg {
  background:none!important;
}
.poly-slice-part {
  visibility: hidden;
  z-index:1;
}

.poly-slice-part.active, .poly-slice-part.incoming {
  visibility: visible;
}

.poly-slice-part.incoming {
  z-index: 2;
}

.poly-slice-part.z-top {
  z-index:3;
}

.poly-nav {
  position:absolute;
  display:block;
  background:rgba(0,0,0,0.5);
  color:#fff;
  text-align:center;
  line-height:50px;
  height:50px;
  width:50px;
  top:0;
  bottom:0;
  margin:auto 0;
  left:20px;
  z-index:999;
  font-size:20px;
  border-radius:3px;
  transition: all 0.5s;
}

.poly-nav:hover {
  background:rgba(0,0,0,0.9);
}

.is-working .poly-nav {
  opacity: 0;
}

.poly-nav.forward {
  right: 20px;
  left:auto;
}

            
          
!
            
              /**
 * Polyslider concept.
 * This is just a proof of concept demo. Complete slider will be available soon.
 * Copyright (c) 2015 www.Arnique.net
 * Licensed under the MIT license 
 */
 
var ps = {};
ps.effect = {};
ps.sort = {};

(function ($) {
  $.fn.polySlider = function(userOptions) {
    // Defaults
    var defaults = {
      aspect:"6x3",
      slices:"3x6",
      sliceSort: "flowDownRight",
      dur: 600,
      effect: "slicedRollIn",
    };
    
    // Public and private members
    var pub = {};
    var pvt = {};
    
    // Cache main selector
    pub.el = $(this);
    
    // Initialize
    pvt.init = function() {
      // Extend options
      pub.options = $.extend({}, defaults, userOptions);
      
      // Cache selectors
      pub.viewport = pub.el.find(".poly-viewport");
      pub.slides = pub.viewport.children();
      pub.navForward = pub.el.find(".poly-nav.forward");
      pub.navBack = pub.el.find(".poly-nav.back");

      // Set aspect ratio
      var aspectParts = pub.options.aspect.split("x");
      pub.aspectRatio = {};
      pub.aspectRatio.w = parseInt(aspectParts[0], 10);
      pub.aspectRatio.h = parseInt(aspectParts[1], 10);
      
      // Set slice vars
      var sliceParts = pub.options.slices.split("x");
      pub.sliceRows = parseInt(sliceParts[0], 10);
      pub.sliceCols = parseInt(sliceParts[1], 10);
      pub.totalSlices = pub.sliceRows * pub.sliceCols;
      
      // Sort slices
      pub.sortedSlices = ps.sort[pub.options.sliceSort](pub.sliceRows, pub.sliceCols);

      // Compute dimensions
      pub.sliderWidth = pub.el.width();
      pub.sliderHeight = (pub.aspectRatio.h * pub.sliderWidth ) / pub.aspectRatio.w;
      pub.slideWidth = pub.sliderWidth;
      pub.slideHeight = pub.sliderHeight;

      // Set dimensions
      pub.viewport.css({width: pub.sliderWidth, height: pub.sliderHeight});
      
      // Process slides
      pvt.processSlides();
      pub.total = pub.slides.length;
      
      // Bind Forward Nav
      pub.navForward.on("click", function(e) {
        e.preventDefault();
        pub.goForward();
      });
      
      // Bind Back Nav
      pub.navBack.on("click", function(e) {
        e.preventDefault();
        pub.goBack();
      });
      
      // Select first slide
      pub.activeIndex = 0;
      pub.activeSlide = pub.slides.eq(pub.activeIndex);
      pub.activeSlide.addClass("active");
    }
    
    // Process slides
    pvt.processSlides = function() {
      pub.slides.each(function() {
        // Cache selector
        var $slide = $(this);
        
        // Get bg
        var $img = $slide.find(".poly-bg");
        var bg = $img.attr("src");
        $img.hide();
        
        // Remember bg value
        $slide.data("bg", bg);
        $slide.css({"background": "url(" + bg + ")"});

        // Make and set slices
        var slicesMarkup = pvt.slicer(pub.slideWidth, pub.slideHeight, pub.sliceRows, pub.sliceCols, bg);
        $slide.append("<div class='poly-slide-clone'>" + slicesMarkup + "</div>");
        
        // Cache slices
        $slide.data("slices", $slide.find(".poly-slide-clone").children());
      });
    };
    
    // Slicer
    pvt.slicer = function(width, height, rows, cols, bg) {
      var sliceW = Math.ceil(width / cols);
      var sliceH = Math.ceil(height / rows);
      var markup = "";
      var posX, posY, bgX, bgY;
      var i = 0;
      
      for(var r =0; r < rows; r++){
        for(var c=0; c < cols; c++) {
          posX = (c * sliceW);
          posY = (r * sliceH);
          bgX = posX;
          bgY = posY;

          markup += "<div class='poly-slice' style='";
          markup += "left:" + posX + "px; top:" + posY + "px;";
          markup += "width:" + sliceW + "px; height:" + sliceH + "px;'>";
          markup += "<div class='poly-slice-part entry' style='";
          markup += "background:url(" + bg + ") -" + bgX + "px " + "-" + bgY + "px no-repeat;";            
          markup += "'></div>";
          markup += "<div class='poly-slice-part exit' style='";            
          markup += "'></div></div>";
          
          i++;
        }
      }

      return markup;
    };
    
    // Slices updater
    pvt.showSlices = function(slide, refSlide) {
      var bg  = "url(" + refSlide.data("bg") + ") ";

      slide.data("slices").each(function(i) {
        var $slice = $(this);
        var $part = $slice.find(".exit");
        var left = parseInt($slice.css("left"), 10);
        var top = $slice.css("top");

        $part.addClass("active").css({
          "background": bg + "-" + left + "px " + "-" + top + " no-repeat"
        });
      });
    }
    
    // Slide nav
    pub.goToSlide = function(index, dir, effectName) {
      // Police all requests
      if(pub.isWorking) return;
      
      // Declare status
      pub.isWorking = true;
      pub.el.addClass("is-working");
      pub.direction = dir || "forward";
      
      // Select slides
      pub.nextIndex = index;
      pub.activeSlide = pub.slides.eq(pub.activeIndex);
      pub.nextSlide = pub.slides.eq(pub.nextIndex);
      
      // Get effect
      var effectKey = effectName || pub.options.effect;
      pub.effect = ps.effect[effectKey];
      pub.effect.inDur = pub.effect.inDur || pub.effect.dur || pub.options.dur;
      pub.effect.outDur = pub.effect.outDur || pub.effect.dur || pub.options.dur;
      pub.effect.inDelay = pub.effect.inDelay || pub.effect.delay || 0;
      pub.effect.outDelay = pub.effect.outDelay || pub.effect.delay || 0;
      
      // Compute total duration
      if(pub.effect.sliced) {
        pub.effect.totalDur = (pub.effect.delay * (pub.totalSlices - 1)) + pub.effect.dur;
      } else {
        pub.effect.totalDur = Math.max((pub.effect.inDur + pub.effect.inDelay), pub.effect.outDur + (pub.effect.outDelay));
      }
      
      // Perform slide
      if(!pub.effect.sliced) {
        pub.nextSlide.addClass("incoming " + pub.effect[pub.direction + "In"]).css({"animation-duration": pub.effect.inDur + "ms", "animation-delay": pub.effect.inDelay + "ms"});
        pub.activeSlide.addClass(pub.effect[pub.direction + "Out"]).css({"animation-duration": pub.effect.outDur + "ms", "animation-delay": pub.effect.outDelay + "ms"});
      } else {
        // Show slices
        pvt.showSlices(pub.nextSlide, pub.activeSlide);
        
         // Switch slides
        pub.nextSlide.addClass("incoming clear-bg");
        pub.activeSlide.removeClass("active");
        
        // Prepare slice vars
        var del = 0;
        pub.sliceEffect = ps.effect[pub.effect.effect];
        
        // Animate slices
        for(var i=0; i < pub.totalSlices; i++) {
          var $slice = pub.nextSlide.data("slices").eq(pub.sortedSlices[i]);
          $slice.find(".exit").css({"animation-duration": pub.effect.dur + "ms", "animation-delay": del + "ms"}).addClass(pub.sliceEffect[pub.direction + "Out"]);
          $slice.find(".entry").css({"animation-duration": pub.effect.dur + "ms", "animation-delay": del + "ms"}).addClass("incoming " + pub.sliceEffect[pub.direction + "In"]);
          del += pub.effect.delay;
        }
      }
      
      // After perfoming slide
      setTimeout(function() {
        // Reset slices
        if(pub.effect.sliced) {
          pub.nextSlide.find(".entry").removeClass(pub.sliceEffect[pub.direction + "In"] + " incoming");
          pub.nextSlide.find(".exit").removeClass(pub.sliceEffect[pub.direction + "Out"] + " active");
        }  
        
        // Reset slides
        pub.activeSlide.removeClass("active " + pub.effect[pub.direction + "Out"]);
        pub.nextSlide.removeClass("incoming clear-bg " + pub.effect[pub.direction + "In"]).addClass("active");
        pub.activeIndex = pub.nextIndex;
        
        // Declare status
        pub.isWorking = false;
        pub.el.removeClass("is-working");
        
      }, pub.effect.totalDur);
    };
    
    // Go forward 
    pub.goForward = function(effectName) {
      var i = (pub.activeIndex + 1) % pub.total;
      pub.goToSlide(i, "forward", effectName);
    };
    
    // Go Back 
    pub.goBack = function(effectName) {
      var i = (pub.activeIndex - 1) % pub.total;
      if(i < 0) i += pub.total;
      pub.goToSlide(i, "back", effectName);
    };
    
    // Execute
    pvt.init();
    
    // Expose public members
    return pub;
  }; 
})(jQuery);

// EFFECTS
// -------------------------------------------
ps.effect.slicedZoomSlideH = {
  sliced: true,
  dur: 1000,
  delay: 50,
  effect: "zoomSlideH",
};
ps.effect.slicedZoomSlideV = {
  sliced: true,
  dur: 1000,
  delay: 50,
  effect: "zoomSlideV",
};
ps.effect.slicedRollIn = {
  sliced: true,
  dur: 800,
  delay: 50,
  effect: "rollIn",
};
ps.effect.slicedRollOut = {
  sliced: true,
  dur: 800,
  delay: 50,
  effect: "rollOut",
};
ps.effect.slicedRotateOut = {
  sliced: true,
  dur: 800,
  delay: 50,
  effect: "rotateOut",
};
ps.effect.slicedFader = {
  sliced: true,
  dur: 600,
  delay: 50,
  effect: "fader",
};
ps.effect.slicedSlideH = {
  sliced: true,
  dur: 600,
  delay: 50,
  effect: "slideH",
};
ps.effect.slicedBounceH = {
  sliced: true,
  dur: 1000,
  delay: 50,
  effect: "bounceH",
};
ps.effect.slicedSlideV = {
  sliced: true,
  dur: 600,
  delay: 50,
  effect: "slideV",
};
ps.effect.slicedFlip = {
  sliced: true,
  dur: 600,
  delay: 50,
  effect: "flip",
};

ps.effect.slicedZoom = {
  sliced: true,
  dur: 600,
  delay: 50,
  effect: "zoom",
};
ps.effect.slicedHinge = {
  sliced: true,
  dur: 1200,
  delay: 100,
  effect: "hinge",
};
ps.effect.fader = {
  forwardIn: "fadeIn animated",
  forwardOut: "fadeOut animated",
  backIn: "fadeIn animated",
  backOut: "fadeOut animated",
  dur: 600,
};
ps.effect.zoom = {
  forwardIn: "zoomIn animated",
  forwardOut: "",
  backIn: "zoomIn animated",
  backOut: "",
  dur: 1000,
};
ps.effect.flip = {
  forwardIn: "flipInX animated",
  forwardOut: "",
  backIn: "flipInX animated",
  backOut: "",
  dur: 1000,
};
ps.effect.slideH = {
  forwardIn: "slideInRight animated",
  forwardOut: "",
  backIn: "slideInLeft animated",
  backOut: "",
  dur: 1000,
};
ps.effect.bounceH = {
  forwardIn: "bounceInRight animated",
  forwardOut: "",
  backIn: "bounceInLeft animated",
  backOut: "",
  dur: 1000,
};
ps.effect.slideV = {
  forwardIn: "slideInDown animated",
  forwardOut: "",
  backIn: "slideInUp animated",
  backOut: "",
  dur: 1000,
};
ps.effect.zoomSlideV = {
  forwardIn: "slideInDown animated",
  forwardOut: "zoomOut animated",
  backIn: "slideInUp animated",
  backOut: "zoomOut animated",
  dur: 1000,
  outDelay: 200,
};
ps.effect.zoomSlideH = {
  forwardIn: "slideInRight animated",
  forwardOut: "zoomOut animated",
  backIn: "slideInLeft animated",
  backOut: "zoomOut animated",
  dur: 1000,
  outDelay: 200,
};
ps.effect.hinge = {
  forwardIn: "",
  forwardOut: "hinge animated z-top",
  backIn: "",
  backOut: "hinge animated z-top",
  dur: 1500,
};
ps.effect.rollIn = {
  forwardIn: "rollIn animated",
  forwardOut: "",
  backIn: "rollIn animated",
  backOut: "",
  dur: 1000,
};
ps.effect.rollOut = {
  forwardIn: "",
  forwardOut: "rollOut animated z-top",
  backIn: "",
  backOut: "rollOut animated z-top",
  dur: 1000,
};
ps.effect.rotateIn = {
  forwardIn: "rotateIn animated",
  forwardOut: "",
  backIn: "rotateIn animated",
  backOut: "",
  dur: 1000,
};
ps.effect.rotateOut = {
  forwardIn: "",
  forwardOut: "rotateOut animated z-top",
  backIn: "",
  backOut: "rotateOut animated z-top",
  dur: 1000,
};
/* SLICE SORTING FUNCTIONS 
-------------------------------- */
ps.sort.random = function(rows,cols) {
  var sorted = [];
  var total = rows * cols;
  for(var i=0; i < total; i++) {
    sorted.push(i);
  }
  for (var i = sorted.length - 1; i > 0; i--) {
    var j = Math.floor(Math.random() * (i + 1));
    var temp = sorted[i];
    sorted[i] = sorted[j];
    sorted[j] = temp;
  }
  return sorted;
};
ps.sort.flowDownRight = function(rows,cols) {
  var sorted = [];
  var total = rows * cols;
  for(var y=0; y < cols ; y++) {
    for(var x=0; x < rows ; x++) {
      var yVal = y;
      var xVal = x;
      var v = (xVal * cols) + yVal;
      sorted.push(v);
    }
  }
  return sorted;
}
ps.sort.flowDownLeft = function(rows,cols) {
  var sorted = [];
  var total = rows * cols;
  for(var y=0; y < cols ; y++) {
    for(var x=0; x < rows ; x++) {
      var yVal = cols - y -1;
      var xVal = x;
      var v = (xVal * cols) + yVal;
      sorted.push(v);
    }
  }
  return sorted;
}

/* DEMO
--------------------------------- */
      // Setup the slider
      var demo = $("#demo").polySlider();
      
      // Prepare effect list
      var $efList = $("#effect-list");
      var listCode = "";
      
      // Build list
      for(var key in ps.effect) {
        if(ps.effect[key].sliced) {
          listCode += "<option value='" + key +"'> * " + key + "</option>";
        } else {
          listCode += "<option value='" + key +"'>" + key + "</option>";
        }
      }
      
      // Append list
      $efList.append(listCode);
      
      // Bind select
      $efList.change(function() {
        var ef = $efList.val();
        demo.goForward(ef);
        demo.options.effect = ef;
      });
            
          
!
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