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.

            
              <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;
            
          
!
999px
Loading ..................

Console