jacobp100 · August 29, 2015 14:13
diff --git a/gistfile1.html b/gistfile1.html
 <!doctype html>
 <meta charset=utf-8>
 <title>Carousel</title>
 <style>
 	body {
 		font: 200 12pt 'Helvetica Neue';
 	}
 	/* Fallback indifferent styles */
 	.carousel .menu li {
 		display: inline;
 		-webkit-flex: 1 0 auto;
 		flex: 1 0 auto;
 		text-align: center;
 	}
 	.carousel .menu  a {
 		display: block;
 		padding: 1em 1em 0;
 	}
 	/* Using fallback */
 	.carousel .menu {
 		display: none;
 	}
 	/* Explicitly not using fallback */
 	.carousel.active .menu {
 		display: block;
 		display: -webkit-flex;
 		display: flex;
 		padding: 0;
 		list-style: none;
 	}
 	.carousel.active .slides {
 		position: relative;
 	}
 	.carousel.active .slides > div {
 		position: absolute;
 		z-index: 0;
 	}
 	.carousel .slides > div.active {
 		z-index: 1;
 		transition: 0.4s -webkit-clip-path ease-in,
 			0.4s clip-path ease-in;
 	}

 	/* Slide styles (irrelevant to carousel) */
 	.slides > div {
 		width: 100%;
 		height: 400pt;
 		padding: 1em 4em;
 		box-sizing: border-box;
 	}
 	.slides .a {
 		color: #fff;
 		background-color: #FC6E51;
 	}
 	.slides .b {
 		color: #fff;
 		background-color: #A0D468;
 	}
 	.slides .c {
 		color: #000;
 		background-color: #FFCE54;
 	}
 </style>
 <div class=carousel>
 	<ul class=menu>
 		<li><a href=# data-slide=0>Slide 1</a></li>
 		<li><a href=# data-slide=1>Slide 2</a></li>
 		<li><a href=# data-slide=2>Slide 3</a></li>
 	</ul>
 	<div class=slides>
 		<div class=a>
 			<h1>Red background</h1>
 			<p>Lorem ipsum dolor sit amet.</p>
 			<ul>
 				<li>Item 1</li>
 				<li>Item 2</li>
 				<li>Item 3</li>
 			</ul>
 		</div>
 		<div class=b>
 			<h1>HEADING</h1>
 			<h2>Subheading</h2>
 		</div>
 		<div class=c>
 			<h6>Text</h6>
 		</div>
 	</div>
 </div>
 <script>
 	(function () {
 		"use strict";
 		// Safari 8 freezes when you try to animate clip-path via JS. No idea why.
 		var animate = !/^((?!chrome).)*safari/i.test(navigator.userAgent);

 		var animationDuration = animate ? 400 : 0;

 		function activateCarousel(carousel) {
 			carousel.classList.add('active');
 			var menuItems = carousel.querySelectorAll('.menu a');
 			var slides = carousel.querySelectorAll('.slides > div');

 			function setClipPath(element, size, x) {
 				if (animate) {
 					var circle = 'circle(' + size + ' at ';
 					if (x === 'center') {
 						circle += 'center center';
 					} else {
 						circle += String(((x - 1) / menuItems.length + 0.5) * 100) + '% 0';
 					}
 					circle += ')';

 					element.style.setProperty('-webkit-clip-path', circle);
 					element.style.setProperty('clip-path', circle);
 				}
 			}

 			function menuItemClicked(e) {
 				var i = Number(e.target.getAttribute('data-slide'));
 				var newSlide = slides[i];
 				if (!newSlide.classList.contains('active')) {
 					setTimeout(function() {
 						for (var j = 0, slide; slide = slides[j]; j++) {
 							if (i !== j) {
 								setClipPath(slide, 0, j);
 							}
 						}
 					}, animationDuration);

 					for (var j = 0, slide; slide = slides[j]; j++) {
 						slide.classList.remove('active');
 					}

 					if (newSlide) {
 						setClipPath(newSlide, 0, i);
 						newSlide.classList.add('active');
 						setClipPath(newSlide, '100%', 'center');
 					}
 				}
 			}

 			for (var i = 0, menuItem; menuItem = menuItems[i]; i++) {
 				menuItem.addEventListener('click', menuItemClicked);
 			}
 			menuItemClicked({ target: menuItems[0] });
 		}



 		if (window.hasOwnProperty('DOMTokenList') && document.hasOwnProperty('querySelectorAll') && Element.prototype.hasOwnProperty('classList')) {
 			// <=IE8 will fail this, and fallback to displaying all images
 			var carousels = document.getElementsByClassName('carousel');
 			for (var i = 0, carousel; carousel = carousels[i]; i++) {
 				activateCarousel(carousel);
 			}
 		}
 	})();
 </script>
	<!doctype html>
	<meta charset=utf-8>
	<title>Carousel</title>
	<style>
	body {
	font: 200 12pt 'Helvetica Neue';
	}
	/* Fallback indifferent styles */
	.carousel .menu li {
	display: inline;
	-webkit-flex: 1 0 auto;
	flex: 1 0 auto;
	text-align: center;
	}
	.carousel .menu a {
	display: block;
	padding: 1em 1em 0;
	}
	/* Using fallback */
	.carousel .menu {
	display: none;
	}
	/* Explicitly not using fallback */
	.carousel.active .menu {
	display: block;
	display: -webkit-flex;
	display: flex;
	padding: 0;
	list-style: none;
	}
	.carousel.active .slides {
	position: relative;
	}
	.carousel.active .slides > div {
	position: absolute;
	z-index: 0;
	}
	.carousel .slides > div.active {
	z-index: 1;
	transition: 0.4s -webkit-clip-path ease-in,
	0.4s clip-path ease-in;
	}

	/* Slide styles (irrelevant to carousel) */
	.slides > div {
	width: 100%;
	height: 400pt;
	padding: 1em 4em;
	box-sizing: border-box;
	}
	.slides .a {
	color: #fff;
	background-color: #FC6E51;
	}
	.slides .b {
	color: #fff;
	background-color: #A0D468;
	}
	.slides .c {
	color: #000;
	background-color: #FFCE54;
	}
	</style>
	<div class=carousel>
	<ul class=menu>
	<li><a href=# data-slide=0>Slide 1</a></li>
	<li><a href=# data-slide=1>Slide 2</a></li>
	<li><a href=# data-slide=2>Slide 3</a></li>
	</ul>
	<div class=slides>
	<div class=a>
	<h1>Red background</h1>
	<p>Lorem ipsum dolor sit amet.</p>
	<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
	</ul>
	</div>
	<div class=b>
	<h1>HEADING</h1>
	<h2>Subheading</h2>
	</div>
	<div class=c>
	<h6>Text</h6>
	</div>
	</div>
	</div>
	<script>
	(function () {
	"use strict";
	// Safari 8 freezes when you try to animate clip-path via JS. No idea why.
	var animate = !/^((?!chrome).)*safari/i.test(navigator.userAgent);

	var animationDuration = animate ? 400 : 0;

	function activateCarousel(carousel) {
	carousel.classList.add('active');
	var menuItems = carousel.querySelectorAll('.menu a');
	var slides = carousel.querySelectorAll('.slides > div');

	function setClipPath(element, size, x) {
	if (animate) {
	var circle = 'circle(' + size + ' at ';
	if (x === 'center') {
	circle += 'center center';
	} else {
	circle += String(((x - 1) / menuItems.length + 0.5) * 100) + '% 0';
	}
	circle += ')';

	element.style.setProperty('-webkit-clip-path', circle);
	element.style.setProperty('clip-path', circle);
	}
	}

	function menuItemClicked(e) {
	var i = Number(e.target.getAttribute('data-slide'));
	var newSlide = slides[i];
	if (!newSlide.classList.contains('active')) {
	setTimeout(function() {
	for (var j = 0, slide; slide = slides[j]; j++) {
	if (i !== j) {
	setClipPath(slide, 0, j);
	}
	}
	}, animationDuration);

	for (var j = 0, slide; slide = slides[j]; j++) {
	slide.classList.remove('active');
	}

	if (newSlide) {
	setClipPath(newSlide, 0, i);
	newSlide.classList.add('active');
	setClipPath(newSlide, '100%', 'center');
	}
	}
	}

	for (var i = 0, menuItem; menuItem = menuItems[i]; i++) {
	menuItem.addEventListener('click', menuItemClicked);
	}
	menuItemClicked({ target: menuItems[0] });
	}



	if (window.hasOwnProperty('DOMTokenList') && document.hasOwnProperty('querySelectorAll') && Element.prototype.hasOwnProperty('classList')) {
	// <=IE8 will fail this, and fallback to displaying all images
	var carousels = document.getElementsByClassName('carousel');
	for (var i = 0, carousel; carousel = carousels[i]; i++) {
	activateCarousel(carousel);
	}
	}
	})();
	</script>