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.

            
              <article class="kontext">
	<div class="layer one show">
		<h2>Kontext</h2>
		<p>A context-shift transition. Use the dots below or your keyoard arrows.</p>
	</div>
	<div class="layer two">
		<h2>Layer Two</h2>
	</div>
	<div class="layer three">
		<h2>Layer Three</h2>
	</div>
</article>

<ul class="bullets"></ul>
            
          
!
            
              .kontext {
	width: 100%;
	height: 100%;
}

.kontext .layer {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	/*box-shadow: 0px 0px 120px rgba( 0, 0, 0, 0.8 );*/
}

.kontext .layer.show {
	visibility: visible;
}

.kontext.capable {
	-webkit-perspective: 1000px;
	   -moz-perspective: 1000px;
	        perspective: 1000px;

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	        transform-style: preserve-3d;
}

.kontext.capable .layer {
	-webkit-transform: translateZ( -100px );
	   -moz-transform: translateZ( -100px );
	        transform: translateZ( -100px );
}

.kontext.capable .layer.show {
	-webkit-transform: translateZ( 0px );
	   -moz-transform: translateZ( 0px );
	        transform: translateZ( 0px );
}

.kontext.capable.animate .layer.show.right {
	-webkit-animation: show-right 1s forwards ease;
	   -moz-animation: show-right 1s forwards ease;
	        animation: show-right 1s forwards ease;
}

.kontext.capable.animate .layer.hide.right {
	-webkit-animation: hide-right 1s forwards ease;
	   -moz-animation: hide-right 1s forwards ease;
	        animation: hide-right 1s forwards ease;
}

.kontext.capable.animate .layer.show.left {
	-webkit-animation: show-left 1s forwards ease;
	   -moz-animation: show-left 1s forwards ease;
	        animation: show-left 1s forwards ease;
}

.kontext.capable.animate .layer.hide.left {
	-webkit-animation: hide-left 1s forwards ease;
	   -moz-animation: hide-left 1s forwards ease;
	        animation: hide-left 1s forwards ease;
}


/* CSS animation keyframes */

@-webkit-keyframes show-right {
	0%   { -webkit-transform: translateZ( -200px ); }
	40%  { -webkit-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -webkit-transform: translateZ( 0px ); }
}

@-webkit-keyframes hide-right {
	0%   { -webkit-transform: translateZ( 0px ); visibility: visible; }
	40%  { -webkit-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -webkit-transform: translateZ( -200px ); visibility: hidden; }
}

@-moz-keyframes show-right {
	0%   { -moz-transform: translateZ( -200px ); }
	40%  { -moz-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -moz-transform: translateZ( 0px ); }
}

@-moz-keyframes hide-right {
	0%   { -moz-transform: translateZ( 0px ); visibility: visible; }
	40%  { -moz-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -moz-transform: translateZ( -200px ); visibility: hidden; }
}

@keyframes show-right {
	0%   { transform: translateZ( -200px ); }
	40%  { transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { transform: translateZ( 0px ); }
}

@keyframes hide-right {
	0%   { transform: translateZ( 0px ); visibility: visible; }
	40%  { transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { transform: translateZ( -200px ); visibility: hidden; }
}


@-webkit-keyframes show-left {
	0%   { -webkit-transform: translateZ( -200px ); }
	40%  { -webkit-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -webkit-transform: translateZ( 0px ); }
}

@-webkit-keyframes hide-left {
	0%   { -webkit-transform: translateZ( 0px ); visibility: visible; }
	40%  { -webkit-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -webkit-transform: translateZ( -200px ); visibility: hidden; }
}

@-moz-keyframes show-left {
	0%   { -moz-transform: translateZ( -200px ); }
	40%  { -moz-transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { -moz-transform: translateZ( 0px ); }
}

@-moz-keyframes hide-left {
	0%   { -moz-transform: translateZ( 0px ); visibility: visible; }
	40%  { -moz-transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { -moz-transform: translateZ( -200px ); visibility: hidden; }
}

@keyframes show-left {
	0%   { transform: translateZ( -200px ); }
	40%  { transform: translate( -40%, 0 ) scale( 0.8 ) rotateY( 20deg ); }
	100% { transform: translateZ( 0px ); }
}

@keyframes hide-left {
	0%   { transform: translateZ( 0px ); visibility: visible; }
	40%  { transform: translate( 40%, 0 ) scale( 0.8 ) rotateY( -20deg ); }
	100% { transform: translateZ( -200px ); visibility: hidden; }
}


/* Dimmer */

.kontext .layer .dimmer {
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	visibility: hidden;
	background: transparent;
}

	.kontext.capable.animate .layer .dimmer {
		-webkit-transition: background 1s ease;
		   -moz-transition: background 1s ease;
		        transition: background 1s ease;
	}

	.kontext.capable.animate .layer.hide .dimmer {
		visibility: visible;
		background: rgba( 0, 0, 0, 0.7 );
	}




/* Styles for the demo */

html,
body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}

body {
	background-color: #222;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=);
	background-repeat: repeat;

	font-family: Helvetica, sans-serif;
	font-size: 16px;
	color: #fff;
}

.layer {
	text-align: center;
	text-shadow: 1px 1px 0px rgba( 0, 0, 0, 0.1 );
}

.layer h2 {
	position: relative;
	top: 20%;
	margin: 0;
	font-size: 6.25em;
}

.layer p {
	position: relative;
	top: 20%;
	margin: 0;
}

.layer.one {
	background: #dc6c5f;
}

.layer.two {
	background: #95dc84;
}

.layer.three {
	background: #64b9d2;
}

.bullets {
	position: absolute;
	width: 100%;
	bottom: 20px;
	padding: 0;
	margin: 0;
	text-align: center;
}

	.bullets li {
		display: inline-block;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		margin: 0 3px;

		background: rgba( 255, 255, 255, 0.5 );
		box-shadow: 0px 0px 4px rgba( 0, 0, 0, 0.2 );
		cursor: pointer;

		-webkit-tap-highlight-color: rgba( 0, 0, 0, 0 );
	}

		.bullets li:hover {
			background: rgba( 255, 255, 255, 0.8 );
		}

		.bullets li.active {
			cursor: default;
			background: #fff;
		}

@media screen and (max-width: 400px) {
	body {
		font-size: 12px;
	}

	.layer h2 {
		font-size: 5em;
	}

	.bullets li {
		margin: 0 6px;
	}
}


            
          
!
            
              window.kontext = function( container ) {

	// Dispatched when the current layer changes
	var changed = new kontext.Signal();

	// All layers in this instance of kontext
	var layers = Array.prototype.slice.call( container.querySelectorAll( '.layer' ) );

	// Flag if the browser is capable of handling our fancy transition
	var capable =	'WebkitPerspective' in document.body.style ||
					'MozPerspective' in document.body.style ||
					'msPerspective' in document.body.style ||
					'OPerspective' in document.body.style ||
					'perspective' in document.body.style;

	if( capable ) {
		container.classList.add( 'capable' );
	}

	// Create dimmer elements to fade out preceding slides
	layers.forEach( function( el, i ) {
		if( !el.querySelector( '.dimmer' ) ) el.innerHTML += '<div class="dimmer"></div>';
	} );

	/**
	 * Transitions to and shows the target layer.
	 *
	 * @param target index of layer or layer DOM element
	 */
	function show( target, direction ) {

		// Make sure our listing of available layers is up to date
		layers = Array.prototype.slice.call( container.querySelectorAll( '.layer' ) );

		// Flag to CSS that we're ready to animate transitions
		container.classList.add( 'animate' );

		// Flag which direction
		direction = direction || ( target > getIndex() ? 'right' : 'left' );

		// Accept multiple types of targets
		if( typeof target === 'string' ) target = parseInt( target );
		if( typeof target !== 'number' ) target = getIndex( target );

		// Enforce index bounds
		target = Math.max( Math.min( target, layers.length ), 0 );

		// Only navigate if were able to locate the target
		if( layers[ target ] && !layers[ target ].classList.contains( 'show' ) ) {

			layers.forEach( function( el, i ) {
				el.classList.remove( 'left', 'right' );
				el.classList.add( direction );
				if( el.classList.contains( 'show' ) ) {
					el.classList.remove( 'show' );
					el.classList.add( 'hide' );
				}
				else {
					el.classList.remove( 'hide' );
				}
			} );

			layers[ target ].classList.add( 'show' );

			changed.dispatch( layers[target], target );

		}

	}

	/**
	 * Shows the previous layer.
	 */
	function prev() {

		var index = getIndex() - 1;
		show( index >= 0 ? index : layers.length + index, 'left' );

	}

	/**
	 * Shows the next layer.
	 */
	function next() {

		show( ( getIndex() + 1 ) % layers.length, 'right' );

	}

	/**
	 * Retrieves the index of the current slide.
	 *
	 * @param of [optional] layer DOM element which index is
	 * to be returned
	 */
	function getIndex( of ) {

		var index = 0;

		layers.forEach( function( layer, i ) {
			if( ( of && of == layer ) || ( !of && layer.classList.contains( 'show' ) ) ) {
				index = i;
				return;
			}
		} );

		return index;

	}

	/**
	 * Retrieves the total number of layers.
	 */
	function getTotal() {

		return layers.length;

	}

	// API
	return {

		show: show,
		prev: prev,
		next: next,

		getIndex: getIndex,
		getTotal: getTotal,

		changed: changed

	};

};

/**
 * Minimal utility for dispatching signals (events).
 */
kontext.Signal = function() {
	this.listeners = [];
}

kontext.Signal.prototype.add = function( callback ) {
	this.listeners.push( callback );
}

kontext.Signal.prototype.remove = function( callback ) {
	var i = this.listeners.indexOf( callback );

	if( i >= 0 ) this.listeners.splice( i, 1 );
}

kontext.Signal.prototype.dispatch = function() {
	var args = Array.prototype.slice.call( arguments );
	this.listeners.forEach( function( f, i ) {
		f.apply( null, args );
	} );
}

  

  
  

// Create a new instance of kontext
var k = kontext( document.querySelector( '.kontext' ) );


// Demo page JS

var bulletsContainer = document.body.querySelector( '.bullets' );

// Create one bullet per layer
for( var i = 0, len = k.getTotal(); i < len; i++ ) {
	var bullet = document.createElement( 'li' );
	bullet.className = i === 0 ? 'active' : '';
	bullet.setAttribute( 'index', i );
	bullet.onclick = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
	bullet.ontouchstart = function( event ) { k.show( event.target.getAttribute( 'index' ) ) };
	bulletsContainer.appendChild( bullet );
}

// Update the bullets when the layer changes
k.changed.add( function( layer, index ) {
	var bullets = document.body.querySelectorAll( '.bullets li' );
	for( var i = 0, len = bullets.length; i < len; i++ ) {
		bullets[i].className = i === index ? 'active' : '';
	}
} );

document.addEventListener( 'keyup', function( event ) {
	if( event.keyCode === 37 ) k.prev();
	if( event.keyCode === 39 ) k.next();
}, false );
            
          
!
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