July 11, 2012 5 Comments
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
Add New Comment
Showing 5 comments