Building Impressive Presentations with impress.js

Rakhitha Nimesh Ratnayake

• Publisher: Packt Publishing
• Year: 2013
• eBook ISBN: 9781849696487
• Edition: 1
• Topic: Ciencia de la computación
• Subtopic: Medios digitales

In Detail

Everyone has had to present during their lifetime. We've all spent agonizing hours trying to make those PowerPoint presentations engaging. Well now there is a tool that will make those presentations look like child's play.

Impress.js is a powerful library that eases the task of creating presentations with smooth animations without depending on a software tool. You are no longer limited to desktop tools as these presentations run on any supported browser anywhere on the Internet.

"Building Impressive Presentations with impress.js" is a quick guide to creating professional presentations using the best aspects of CSS3. It will also guide you through several practical examples which go beyond the conventional slide-based presentations, covering each aspect of the Impress library.

From simple presentations to your own personal website this handy practical guide will ensure you get the most out of Impress.JS as quickly as you can. Starting with a simple slide-based presentation we move quickly on adding in sliders, galleries and portfolios to utilize this amazing tool. 3D transitions, rotations, scaling, and transforms are also covered to give your presentations that something extra. The final step is bringing all this together to create a personal website that is viewable on all impress supported browsers.

"Building Impressive Presentations with impress.js" gives you the chance to stand out from the competition and engage with audiences in a way you never have before.

Approach

This book gives you exactly what you need, exactly when you need it. Using easy-to-follow practical examples, this guide takes you from simple presentations to complete websites in no time.

Who this book is for

If you want to engage your audience on a level not previously possible on software such as PowerPoint or Prezi, then this book is for you. With basic knowledge of HTML, CSS, and JavaScript you can start making presentations that truly Impress.

Building Impressive Presentations with impress.js

---

Table of Contents

Building Impressive Presentations with impress.js

Credits

About the Author

About the Reviewers

www.PacktPub.com

Support files, eBooks, discount offers and more

Free Access for Packt account holders

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Downloading the example code

Errata

Piracy

Questions

1. Getting Started with Impressive Presentations

What is impress.js?

Built-in features

Beyond presentations with impress.js

Why is it important?

Presentation outline

Using bullet points

Animations

Using themes

Downloading and configuring impress.js

Creating your first presentation

Designing the presentation

Creating the presentation container

Creating your first step

Applying styles on steps

Creating Step 1

Creating Step 2

Limiting the visibility of steps

Presentation overview

Summary

2. Exploring Impress Visualization Effects

Introduction to CSS transformations

Positioning effects

Positioning on the x axis

Positioning on the y axis

Positioning on the z axis

Rotating effects

Rotation around the x axis

Rotation around the y axis

Rotation around the z axis

Rotations in practice

Scaling effects

The importance of positioning in scaling

Scaling in practice

Planning the design

Data perspective

impress.js under the hood

Summary

3. Diving into the Core of impress.js

impress.js configuration

Default configurations

Customizing configurations

Configuring the width and height

Configuring the minScale and maxScale

Configuring the perspective

Configuring the transition duration

Looking at configurations inside the core

Understanding the impress API functions

Inside the next function

Inside the prev function

Inside the goto function

Automating presentations

Creating custom transition timing

impress.js step events

How to use the step class

Working with keyboard configurations

Default keyboard configurations

Inside the impress core

Assigning custom keys for custom events

Adding new keys for new events

Handling the step click event

Summary

4. Presenting on Different Viewports

Fullscreen presentations

Using impress.js inside a container

Developing a content slider

Planning the design

Designing slides

Wrapping the presentation inside a container

Playing the slider automatically

Creating navigation controls

Creating the play/pause features

Adding slide numbers

Highlighting the active slide

impress.js presentations on mobile devices

Issues in designing for mobile devices

Scenario 1

Scenario 2

Scenario 3

Best design practices for mobiles devices

Summary

5. Creating Personal Websites

Planning the website structure

Designing the header

Creating the presentation wrapper

Creating pages

Designing the home page

Designing the portfolio page

Portfolio gallery

Portfolio single

Designing the timeline page

Defining the timeline navigation

Designing the services page

Handling the navigation menu

Creating the navigation hint

Summary

6. Troubleshooting

Browser compatibility

Handling unsupported browsers

Limitations and new features

Positioning steps relative to other steps

Defining the previous and next steps

Transition duration for individual steps

Adding and removing navigation keys

Creating substeps

Troubleshooting and support

Summary

A. Impress Tools and Resources

Impress presentation tools

Strut

Impressionist

Impressive presentations

impress.js demos from the book

Index

Building Impressive Presentations with impress.js

Copyright © 2013 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author, nor Packt Publishing, and its dealers and distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot guarantee the accuracy of this information.

First published: March 2013

Production Reference: 1190313

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham B3 2PB, UK.

ISBN 978-1-84969-648-7

www.packtpub.com

Cover Image by Duraid Fatouhi (<[email protected]>)

Credits

Author

Rakhitha Nimesh Ratnayake

Reviewers

Chetankumar Akarte

Christian Ziebarth

Acquisition Editor

Martin Bell

Commissioning Editor

Maria D'souza

Technical Editor

Nitee Shetty

Project Coordinator

Esha Thakker

Proofreader

Maria Gould

Indexer

Tejal Soni

Graphics

Aditi Gajjar

Production Coordinator

Pooja Chiplunkar

Cover Work

Pooja Chiplunkar

About the Author

Rakhitha Nimesh Ratnayake is a software engineer working in a leading software development firm in Sri Lanka. His work there includes planning and implementing projects in a wide range of technologies based on PHP frameworks.

He is the creator of www.innovativephp.com, where he writes tutorials on the latest web development and design technologies. He is also a regular contributor to a number of popular websites such as 1stwebdesigner, the tuts+ network, and the Sitepoint network.

He likes to watch cricket and stay with the family when he isn't working on coding or writing. Make sure to visit him online at www.innovativephp.com and follow him on Twitter at twitter.com/innovativephp.

I would like to thank my parents and my brother for providing great support throughout the book. This was ...

Table of contents

• Building Impressive Presentations with impress.js