New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/page-transitions/
Page Transitions
Download Demo
Page Transitions is a rework of the original idea created by Hakim El Hattab. Created using JavaScript, CSS 3D transforms and CSS Animations.
Transitions
Kontext: Original idea by Hakim El Hattab
Put On: A page drop effect
Circle: Layers do a circle transition
Bounce: Layers bounce after showing
Flip: 360º flip
1. INCLUDE CSS AND JS FILES
<link rel="stylesheet" href="animation.css"> <script src="../../js/transitions.js"></script>
2. HTML
<article class="kontext"> <div class="layer one show"> <h2>deinterfaz</h2> <p>A context-shift transition. Use the dots below or your keyboard arrows.</p> </div> <div class="layer two"> <h2>creating</h2> </div> <div class="layer three"> <h2>improvements</h2> </div> </article>
3. JAVASCRIPT
// Create a new instance of kontext var k = kontext( document.querySelector( '.kontext' ) ); // API METHODS: // k.prev(); // Show prev layer // k.next(); // Show next layer // k.show( 3 ); // Show specific layer // k.getIndex(); // Index of current layer // k.getTotal(); // Total number of layers // DEMO-SPECIFIC: 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 ); var touchX = 0; var touchConsumed = false; document.addEventListener( 'touchstart', function( event ) touchConsumed = false; lastX = event.touches[0].clientX; , false ); document.addEventListener( 'touchmove', function( event ) event.preventDefault(); if( !touchConsumed ) if( event.touches[0].clientX > lastX + 10 ) k.prev(); touchConsumed = true; else if( event.touches[0].clientX < lastX - 10 ) k.next(); touchConsumed = true; , false );