<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;
