CodePen Embed - Prism Effect Slider

<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Prism Effect Slider | Demo 3</title>
    <meta name="description" content="Prism slider using canvas globalCompositeOperation" />
    <meta name="keywords" content="prism, images, globalCompositeOperation, canvas, demo, web design, slider" />

    <!--[if IE]>
      <script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body class="demo-3">
    <div class="container">
      <header class="codrops-header">
        <h1>Prism Effect Slider</h1>
        
      </header>
      <div class="content">
        <!-- Start Demo -->

        <div class="cache">
          <!-- masks -->
          <img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-a.svg">
          <img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-b.svg">
          <img src="ihttps://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-c.svg">
          <!-- photos -->
          <img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-a.jpg">
          <img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-b.jpg">
          <img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-c.jpg">
          <img src="https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-d.jpg">
        </div>

        <div class="wrapper">
          <div class="prism-slider prism-slider--left">
            <ul class="navigation"></ul>
          </div>
          <div class="copy copy--left">
            <article>
              <h2>Nature Reveals</h2>
              <p>
                Our physical world, respect and explore,
                Where water meets land; a beautiful shore.
              </p>
              <p>
                Mountains we conquer, look down in awe,
                If you're an artist, make sure you draw.
                Nature exciting, adventurously new,
                Much more to see, than a sky that is blue.
                It offers so much, open your eyes,
                Hope of today, with every sunrise.           
              </p>
            </article>
          </div>
        </div>

        <!-- End Demo -->
      </div>
      
    </div><!-- /container -->


  </body>
</html>

header{
  height:50px !important;
}
/* Article Layout */
.wrapper {
  width: 100%;
  background: white;
}

.wrapper:after {
  content: '';
  clear: both;
  display: block;
}

.wrapper .copy {
  width: 40%;
  float: left;
  position: relative;
}

.demo-2 .wrapper .copy {
  float: right;
}

.wrapper .copy:before {
  width: 0;
  height: 0;
  float: left;
  padding-bottom: 119%;
  content: '';
}

.wrapper .copy article {
  margin: auto;
  padding: 4vw;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.wrapper .copy h2 {
  margin: 0;
  font-size: 3em;
  font-size: 4vw;
}

.wrapper .copy p:first-of-type {
  color: #b1b6ba;
  font-size: 1.5em;
  font-size: 2vw;
  margin-bottom: 1.5em;
}

.wrapper .prism-slider {
  width: 60%;
  float: right;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.demo-2 .wrapper .prism-slider {
  float: left;
}

/* PrismSlider */
.cache {
  display: none;
}

.prism-slider {
  width: 1200px;
  max-width: 100%;
  height: 0;
  padding-bottom: 48%;
  position: relative;
}

.prism-slider canvas {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.navigation {
  width: 100%;
  position: absolute;
  bottom: 5%;
  text-align: center;
  list-style: none;
  z-index: 1;
}

.navigation li {
  border: 3px solid #eceff1;
  width: 18px;
  height: 18px;
  margin: 0 5px;
  background: #52525a;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.navigation .active {
  background: #eceff1;
}

/* Media Queries */
@media screen and (max-width: 1024px) {
  .wrapper:after {
    display: none;
  }

  .wrapper .copy, .wrapper .prism-slider {
    width: 100%;
    float: none;
  }

  .wrapper .copy:before {
    display: none;
  }

  .wrapper .copy article {
    position: relative;
    padding: 50px;
    display: block;
  }

  .wrapper .copy h2 {
    font-size: 8vw;
  }

  .wrapper .copy p:first-of-type {
    font-size: 4vw;
  }

  .wrapper .prism-slider {
    padding-bottom: 80%;
  }

  .navigation li {
    width: 24px;
    height: 24px;
  }
}

/**
 * The slideshow controller.
 * Get settings and initialise PrismSlider for each layer,
 * add controls and events, then call slideTo method on click.
 * @return {Object} The set of public methods.
 */
var slideshow = (function(window, undefined) {

  'use strict';


  /**
   * Enum navigation classes, attributes and
   * provide navigation DOM element container.
   */
  var navigation = {
    selector: '.navigation',
    element: null,
    bullet: 'li',
    attrs: {
      active: 'active',
      index: 'data-index'
    }
  };

  /**
   * Enum main element, sizes and provide
   * main DOM element container.
   * @type {Object}
   */
  var container = {
    selector: '.prism-slider',
    element: null,
    sizes: {
      w: 1200,
      h: 960
    }
  };

  /**
   * Set of images to be used.
   * @type {Array}
   */
  var slides = [
    'https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-a.jpg',
    'https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-b.jpg',
    'https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-c.jpg',
    'https://tympanus.net/Tutorials/PrismEffectSlider/img/nature-d.jpg'
  ];

  /**
   * Set of masks with related effects.
   * @type {Array}
   */
  var masks = [
    {
      source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-a.svg',
      effects: {
        flip: 'Y',
        rotate: 167 // degrees
      }
    },
    {
      source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-b.svg',
      effects: {
        flip: 'X',
        rotate: 90 // degrees
      }
    },
    {
      source: 'https://tympanus.net/Tutorials/PrismEffectSlider/img/masks/cube-c.svg',
      effects: {
        flip: false,
        rotate: 13 // degrees
      }
    }
  ];

  /**
   * Set global easing.
   * @type {Function(currentTime)}
   */
  var easing = Easing.easeInOutQuint;

  /**
   * Set global duration.
   * @type {Number}
   */
  var duration = 1000;

  /**
   * Container for PrismSlider instances.
   * @type {Object}
   */
  var instances = {};


  /**
   * Init.
   */
  function init() {

    getContainer_();

    initSlider_();

    initPrism_();

    addNavigation_();

    addEvents_();
  }


  /**
   * Get main container element, and store in container element.
   */
  function getContainer_() {
    container.element = document.querySelector(container.selector);
  }


  /**
   * Init Slides.
   * Create and initialise main background slider (first layer).
   * Since we'll use this as main slider no mask is given.
   */
  function initSlider_() {

    instances.slider = new PrismSlider({
      container: container,
      slides: slides,
      mask: false,
      duration: duration,
      easing: easing
    });

    // Initialise instance.
    instances.slider.init();
  }


  /**
   * Init Masks.
   * Loop masks variable and create a new layer for each mask object.
   */
  function initPrism_() {

    masks.forEach(function(mask, i) {
      // Generate reference name.
      var name = 'mask_' + i;

      instances[name] = new PrismSlider({
        container: container,
        slides: slides,
        mask: mask, // Here is the mask object.
        duration: duration,
        easing: easing
      });

      // Initialise instance.
      instances[name].init();
    });
  }


  /**
   * Add Navigation.
   * Create a new bullet for each slide and add it to navigation (ul)
   * with data-index reference.
   */
  function addNavigation_() {

    // Store navigation element.
    navigation.element = document.querySelector(navigation.selector);

    slides.forEach(function(slide, i) {

      var bullet = document.createElement(navigation.bullet);

      bullet.setAttribute(navigation.attrs.index, i);

      // When it's first bullet set class as active.
      if (i === 0) bullet.className = navigation.attrs.active;

      navigation.element.appendChild(bullet);
    });
  }


  /**
   * Add Events.
   * Bind click on bullets.
   */
  function addEvents_() {
    // Detect click on navigation elment (ul).
    navigation.element.addEventListener('click', function(e) {

      // Get clicked element.
      var bullet = e.target;

      // Detect if the clicked element is actually a bullet (li).
      var isBullet = bullet.nodeName === navigation.bullet.toUpperCase();

      // Check bullet and prevent action if animation is in progress.
      if (isBullet && !instances.slider.isAnimated) {
        // Remove active class from all bullets.
        for (var i = 0; i < navigation.element.childNodes.length; i++) {
          navigation.element.childNodes[i].className = '';
        }
        // Add active class to clicked bullet.
        bullet.className = navigation.attrs.active;

        // Get index from data attribute and convert string to number.
        var index = Number(bullet.getAttribute(navigation.attrs.index));

        // Call slideAllTo method with index.
        slideAllTo_(index);
      }

    });
  }


  /**
   * Call slideTo method of each instance.
   * In order to sync sliding of all layers we'll loop through the
   * instances object and call the slideTo method for each instance.
   * @param {Number} index The index of the destination slide.
   */
  function slideAllTo_(index) {
    // Loop PrismSlider instances.
    for (var key in instances) {
      if (instances.hasOwnProperty(key)) {
        // Call slideTo for current instance.
        instances[key].slideTo(index);
      }
    }
  }


  return {
    init: init
  };

})(window);



/**
 * Bootstrap slideshow plugin.
 * For demo purposes images are preloaded inside a div hidden with css,
 * the plugin initialisation is delayed through window.onload, in a real life
 * scenario would be better to preload images asynchronously with javascript.
 */
window.onload = slideshow.init;

This Pen is owned by victor on CodePen.

See more by @vkanet on CodePen

External CSS

External JavaScript