Have you ever wanted to have a slide-show presentation on your website that introduces you, your products or your services in an appealing and interactive style? How about creating stunning visualizations right within your website in the style of a PowerPoint presentation? Then you should try impress.js.  This is a JavaScript tool based on the CSS3 transforms and transitions supported by modern browsers.

To use this JavaScript library, you need to define the slideshow on an HTML page and reference the impress.js file. The slideshow is contained within the <div> element wrapper with the id of ‘impress’ as shown below:

<html>
	<head>
		<title>What Can You Do with Impress.js?</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<link href="styles.css" rel="stylesheet" />
	</head>
	<body>
		<div id="impress">
			<div class="no-support-message">
				Your browser doesn't support impress.js.  Try Chrome or Safari.
			</div>

			<div class="step" data-x="0" data-y="0">
				Slide 1.  I start at 0,0.  Welcome.
			</div>

			<div class="step" data-x="500" data-y="0">
				Slide 2.  It slides left 500 pixels.
			</div>

			<div class="step" data-x="500" data-y="-400">
				Slide 3.  It slides down 400 pixels.
			</div>

			<div class="step" data-x="500" data-y="-800" data-scale="0.5">
				Slide 4.  It scales everything up by a factor of 2.
			</div>

			<div class="step" data-x="0" data-y="-800" data-rotate="90">
				Slide 5 and it rotates in.
			</div>

			<div class="step" data-x="-100" data-y="-800" data-rotate-x="60" data-rotate-y="60" data-rotate-z="30">
				Slide 6 and it has a 3D transition.
			</div>

			<div class="step" data-x="-2600" data-y="-800" data-rotate-x="30" data-rotate-y="-60" data-rotate-z="90" data-scale="4">
				Final Slide and it has a 3D transition AND a scale.
			</div>

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

Customize your content to fit your presentation.

Don’t forget to copy and save the impress.js file into the same folder as your html file. A CSS file can also be added to further customize the look of your slideshow.

You can see this code in action here http://www.developerdrive.com/demo/impress-snippet/demo.html

This demo of Impress.js in action shows what you can do when you add some design and flair to your project: http://www.t3kila.com/#/welcome

  • Simple, yet amazing. Great share!

    • Thank you Cliff. We were also amazed by its capabilities.

  • wow, very interesting! can this be used as a intro that can also be skipped? or will this simply replace my whole website?

    • Hi Jens. You can always code an exit anywhere. You are only limited by your creativity.

  • t3kila

    Thank you a lot for sharing my website http://www.t3kila.com !

  • Supports too few browsers.

Home XML WordPress Web Services Web Development Web Design Underscore Uncategorized Tutorial Tools SQL Server Social Apps Snippet SEO Security RoR Responsive Design Resources Python PHP News MySQL Mobile Miscellaneous jQuery JavaScript Java J2EE HTML5 HTML Design Patterns