Slideshow concept

dabblet.css

/**
 * Slideshow concept
 */

#slideshow {
	height: 240px;
	overflow: hidden;
	position: relative;
	width: 480px;
}

#slideshow img {
	opacity: 0;
	position: absolute;
	top: 0;
	transform: scale(0.75);
	transition: top 0.6s ease-out, transform 0.6s ease-out;	
	z-index: 1;
}

#slideshow img.active {
	opacity: 1;
	top: 0;
	transform: scale(1.0);	
	z-index: 2;
}

#slideshow img.inactive {
	opacity: 1;
	top: 100%;	
	transform: scale(1.0);	
	z-index: 3;
}

#btn {
	margin-top: 100px;
}

dabblet.html

<div id="slideshow">
	<img src="http://placekitten.com/480/280" class="active" />
	<img src="http://placekitten.com/g/480/280" />
</div>

<button id="btn">Run the animation!</button>

dabblet.js

var current = 0;
var imgs = document.querySelectorAll('#slideshow img');

document.getElementById('btn').addEventListener('click', function() {
	animate(imgs, current);	
});

var animate = function(imgs, current) {
	var prev = current;
	
	if(imgs[current].getAttribute('class') == 'active') {
		imgs[current].setAttribute('class', 'inactive');
		
		if(++current >= imgs.length) {
			current = 0;
		}
		
		imgs[current].setAttribute('class', 'active');
		
		setTimeout(function() {
			imgs[prev].setAttribute('class', '');
		}, 650);
	}
	
	setTimeout(function() {
		animate(imgs, current);
	}, 2000);
};

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"javascript"}