Create Impressive Web Animated Presentation Slides Within 10 Minutes

Home » Tutorials » JavaScript » Create Impressive Web Animated Presentation Slides Within 10 Minutes

Tutorials / JavaScript
Sunday, 18th Mar, 2012

Create Impressive Web Animated Presentation Slides Within 10 Minutes

How are you going to create an impressive animated presentation slides without spending a single cent on animation authoring software? The answer is JavaScript! With the help of – “Impress.js” – an open source library that allow you to create impressive animated slides using purely CSS3′s transition and transform property.

View Demo

Preparing HTML Structure

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Demo - Impressive Web Animated Presentation Slides | onlyWebPro.com</title>
    </head>

    <body onLoad="countNow()">

		<div id="impress">

            <div id="one" class="step" data-x="0" data-y="0">
                <h2>Advertise With onlyWebPro.com</h2>
                <p>We offers time-saving techniques, fresh and useful resources to global audience consisting of designers, developers, web startup owners.</p>
            </div>
            
            <div id="two" class="step" data-x="0" data-y="1200" data-scale="1.8">
                <h2 class="giant">We currently receives</h2>
            </div>
            
            <div id="three" class="step" data-x="-300" data-y="1900" data-scale="0.2"  data-rotate="180" >
                <h2 class="giant">over 10,000 monthly visitors</h2>
            </div>
            
            <div id="four" class="step" data-x="-1500" data-y="1500" data-rotate="270">
                <h2 class="giant">AND 18,504 PAGE VIEWS</h2>
            </div>
            
            <div id="five" class="step" data-x="-2500" data-y="1500" data-rotate="270">
                <h2 class="giant">Contact Us Now!</h2>
            </div>

		</div>
        <script src="impress.js"></script>
    </body>
</html>

The HTML structure is quite simple, we have included the web font from Google, and a wrapper called “impress” that holding all presentation slides. Please take note that, the id “#wrapper” is required, which is recognize by the “impress” library. Besides, you can see that, every slides has attribute call “data-x”, “data-y”, “data-scale” and “data-rotate”, which used to control the position, appearance and placement of the slides. The following data attributes are available for you:

data-x = the x co-ordinate of the slide
data-y = the y co-ordinate of the slide
data-z = the z co-ordinate of the slide (how far/close it appears to the user)
data-scale = scales your slide by a factor of this value. A data-scale of 5 would be 5 times the original size of your slide
data-rotate = rotates your slide by the specified number of degrees
data-rotate-x = For 3D slides. This is the number of degrees it should be rotated about the x-axis. (Tilt forward/lean back)
data-rotate-y = For 3D slides. This is the number of degrees it should be rotated about the y-axis (swing in from the left/right)
data-rotate-z = For 3D slides. This is the number of degrees it should be rotated about the z-axis

Lastly, the impress library is included into the document.

CSS Styling

In order to make the presentation slides looks good and presentable, we need to apply some css styling on it.

<style>
#impress .step{
	width:700px;
	height: 600px;
	position:relative;
	margin:0 auto;

	-moz-transition:1s opacity;
	-webkit-transition:1s opacity;
	transition:1s opacity;
}

#impress .step.active{
	opacity:1;
}

#impress h2{
	font: bold 60px/1 'PT Sans Narrow', sans-serif;
	color:#333;
	margin: 60px 0 5px;
}


#impress p{
	font: normal 28px/1.5 'Open Sans', sans-serif;
	color:#666;
}
</style>

Animate with JavaScript

Now it’s time to make the presentation slides work by initial the animation and run the function every 3 seconds.

<script>
	var playCount = 0;
	var imp = impress();
	var soundEfx = new Audio('zoom.wav');
	
	function countNow() {
		setTimeout("animateNow()",3000);
	};
	
	function animateNow() {
		playCount++;
		if(playCount <= 5) {
			imp.next();	
			countNow();
			soundEfx.play();
		}
	}
</script>

There are 3 variables requires to make the presentation work, which is:

playCount - store the number of slides
img- variable for quick access of initial animation from impress.js
soundEfx- variable for storing the source of sound effects

The animateNow run every 3 seconds which initialized by countNow. Inside the animateNow function, you can see that, we start adding the value of 1 to the playCount, so the presentation slides will stop after all slides has finish. We use the “imp.next” to move in the next slides into the screen and play the sound effects for it.

Animation Initialization On Page Load

Lastly, initial the animation on page load.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Demo - Impressive Web Animated Presentation Slides | onlyWebPro.com</title>
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
        
        <style>
		#impress .step{
			width:700px;
			height: 600px;
			position:relative;
			margin:0 auto;
		
			-moz-transition:1s opacity;
			-webkit-transition:1s opacity;
			transition:1s opacity;
		}
		
		#impress .step.active{
			opacity:1;
		}
		
		#impress h2{
			font: bold 60px/1 'PT Sans Narrow', sans-serif;
			color:#333;
			margin: 60px 0 5px;
		}
		
		
		#impress p{
			font: normal 28px/1.5 'Open Sans', sans-serif;
			color:#666;
		}
		</style>
    </head>

    <body onLoad="countNow()">

		<div id="impress">

            <div id="one" class="step" data-x="0" data-y="0">
                <h2>Advertise With onlyWebPro.com</h2>
                <p>We offers time-saving techniques, fresh and useful resources to global audience consisting of designers, developers, web startup owners and etc.</p>
            </div>
            
            <div id="two" class="step" data-x="0" data-y="1200" data-scale="1.8">
                <h2 class="giant">We currently receives</h2>
            </div>
            
            <div id="three" class="step" data-x="-300" data-y="1900" data-scale="0.2"  data-rotate="180" >
                <h2 class="giant">over 10,000 monthly visitors</h2>
            </div>
            
            <div id="four" class="step" data-x="-1500" data-y="1500" data-rotate="270">
                <h2 class="giant">AND 18,504 PAGE VIEWS</h2>
            </div>
            
            <div id="five" class="step" data-x="-2500" data-y="1500" data-rotate="270">
                <h2 class="giant">Contact Us Now!</h2>
            </div>

		</div>
		<script src="impress.js"></script>
		<script>
			var playCount = 0;
			var imp = impress();
			var soundEfx = new Audio('zoom.wav');
			
        	function countNow() {
				setTimeout("animateNow()",3000);
			};
			
			function animateNow() {
				playCount++;
				if(playCount <= 5) {
					imp.next();	
					countNow();
					soundEfx.play();
				}
			}
        </script>
    </body>
</html>

Done! Now you know to build a presentation slides for your products with the help of impress.js!

View Demo