CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 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 Creating Step Limiting the visibility of steps Presentation overview Summary Exploring Impress Visualization Effects CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 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 Presenting on Different Viewports Fullscreen presentations CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 Scenario Scenario Best design practices for mobiles devices Summary 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 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt A Impress Tools and Resources Impress presentation tools Strut Impressionist Impressive presentations impress.js demos from the book Index CuuDuongThanCong.com https://fb.com/tailieudientucntt Building Impressive Presentations with impress.js CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 () CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 CuuDuongThanCong.com https://fb.com/tailieudientucntt Pooja Chiplunkar CuuDuongThanCong.com https://fb.com/tailieudientucntt 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 my first book and I really appreciate the encouragement they gave in tough periods while writing the book Special thanks to Bartek Szopka, who is the creator of impress.js, for helping me in the early stages of this book I would also like to thank Packt team members, Shrutika Kalbag for finding my article on 1stwebdesigner and providing me with the idea about this book, Maria D'souza for the support throughout the book and being the editor, and Esha Thakker for being the project coordinator of the book Finally, I would like to thank you for reading my book and being one of the most important people who helped me to make this book a success Thank you CuuDuongThanCong.com https://fb.com/tailieudientucntt Impressionist Impressionist is another tool to automate the presentation creation process You can find the demo at http://hsivaram.com/impressionist/0.1/ The only limitation of impressionist compared to strut is that it only works on WebKit browsers, so we will be using the Chrome browser to demonstrate the functionality The following is the main slide creation screen of impressionist It is quite similar to the previous slide creation screen: Once we are done with all the slides, we can move into the overview of slides using the Orchestration View button on the top-right corner of the screen There you can position elements like we did earlier All the controls are given in the menu bar for positioning, rotating, and scaling The following is the preview of Orchestration View: We can click on the Preview button to see the presentation in action These tools are very CuuDuongThanCong.com https://fb.com/tailieudientucntt handy for non-technical users Feel free to check out these tools and create simplified presentations CuuDuongThanCong.com https://fb.com/tailieudientucntt Impressive presentations We have created various kinds of presentations throughout this book Now let's see some awesome presentations created by others using impress.js: What the Heck is Responsive Web Design by John Polacek at http://johnpolacek.github.com/WhatTheHeckIsResponsiveWebDesignimpressjs/#/title 12412.org presentation to Digibury by Stephen Fulljames at http://extra.12412.org/digibury/#/title Bonne année 2012 by Edouard Cunibil at http://duael.fr/voeux/2012/#/since-2009 WordPress 201: Performance and Security by Jason Cosper at http://jasoncosper.com/talks/wcphx/wp201/#/step-1 The Revolutionary CSS3: a non-technical intro to CSS3 by Scott Cheng at http://scottcheng.github.com/revolutionary-css3/#/title CuuDuongThanCong.com https://fb.com/tailieudientucntt impress.js demos from the book We created sample applications to explain each concept and technique in impress.js in this book Here you can find the online resources for accessing these demos A complete list of all the demos from the book can be found at the following link: http://innovativephp.com/demo/impress-js-demos/ Full source code of the examples in this book can be downloaded from the following link: http://innovativephp.com/demo/impress-js-demos.zip CuuDuongThanCong.com https://fb.com/tailieudientucntt Index A active class / Inside the goto function active slide highlighting / Highlighting the active slide animations, impress.js / Animations api.goto(id) method / Understanding the impress API functions api.goto function / Inside the goto function api.init() method / Understanding the impress API functions api.next() function / Inside the next function, Automating presentations, Inside the impress core api.next() method / Understanding the impress API functions api.prev() function / Inside the prev function, Automating presentations, Inside the impress core api.prev() method / Understanding the impress API functions B browser compatibility, impress.js / Browser compatibility browser prefixes -ms / Introduction to CSS transformations -moz / Introduction to CSS transformations -webkit / Introduction to CSS transformations -o / Introduction to CSS transformations bullet points, impress.js / Using bullet points C clearInterval function / Creating the play/pause features computeWindowScale function / Looking at configurations inside the core configuration, impress.js / Downloading and configuring impress.js config variable / Looking at configurations inside the core container impress.js, using in / Using impress.js inside a container presentation, wrapping inside / Wrapping the presentation inside a container content slider CuuDuongThanCong.com https://fb.com/tailieudientucntt about / Developing a content slider developing / Developing a content slider design, planning / Planning the design slides, designing / Designing slides presentation, wrapping inside container / Wrapping the presentation inside a container playing, automatically / Playing the slider automatically navigation controls, creating / Creating navigation controls Play/Pause features, creating / Creating the play/pause features slide numbers, adding / Adding slide numbers active slide, highlighting / Highlighting the active slide CSS3 about / Introduction to CSS transformations css function / impress.js under the hood CSS transformations about / What is impress.js?, Introduction to CSS transformations URL, for info / What is impress.js? custom events custom keys, assigning for / Assigning custom keys for custom events custom keys assigning, for custom events / Assigning custom keys for custom events custom transition timing creating / Creating custom transition timing D data-perspective.html file / Data perspective data-perspective attribute / Data perspective data-positioning.html file / Positioning on the z axis data-rotate-application.html file / Rotations in practice data-rotate-x attribute / Rotation around the x axis data-rotate-z attribute / Rotation around the z axis data-scale attribute / Creating your first step data-x attribute / Positioning on the x axis data-y attribute / Positioning on the y axis data-z attribute / Positioning on the z axis data perspective, scaling / Data perspective default configurations, impress.js CuuDuongThanCong.com https://fb.com/tailieudientucntt about / Default configurations width option / Default configurations, Configuring the width and height height option / Default configurations, Configuring the width and height maxScale option / Default configurations, Configuring the minScale and maxScale minScale option / Default configurations, Configuring the minScale and maxScale perspective option / Default configurations, Configuring the perspective transitionDuration option / Default configurations, Configuring the transition duration defaults variable / Default configurations design planning, for content slider / Planning the design desktop presentations drawbacks / Why is it important? E effects positioning / Positioning effects rotating / Rotating effects scaling / Scaling effects effects, positioning on x axis / Positioning on the x axis on y axis / Positioning on the y axis on z axis / Positioning on the z axis elements, rotating around x axis / Rotation around the x axis around y axis / Rotation around the y axis around z axis / Rotation around the z axis events keys, adding for / Adding new keys for new events F features, impress.js CuuDuongThanCong.com https://fb.com/tailieudientucntt positioning / Built-in features scaling / Built-in features rotating / Built-in features working on 3D space / Built-in features fullscreen presentations about / Fullscreen presentations usages / Fullscreen presentations future class / How to use the step class G Github / Troubleshooting and support goto function / Inside the next function, Creating custom transition timing, Adding new keys for new events GPL about / Why is it important? H header designing, for website / Designing the header home page designing, for website / Designing the home page href attribute / Handling the navigation menu I #impress container about / Creating the presentation container #impress element / Configuring the width and height, Adding slide numbers if statement / Adding new keys for new events impress() function / Automating presentations impress-keyboard.js file / Adding new keys for new events impress-not-supported class / Handling unsupported browsers impress-supported class / Handling unsupported browsers impress.js about / What is impress.js? CuuDuongThanCong.com https://fb.com/tailieudientucntt features / Built-in features, Why is it important? usages / Beyond presentations with impress.js presentation outline / Presentation outline bullet points, using / Using bullet points animations / Animations themes, using / Using themes downloading / Downloading and configuring impress.js configuring / Downloading and configuring impress.js, impress.js configuration core code, for finding effects / impress.js under the hood default configurations / Default configurations using, inside container / Using impress.js inside a container browser compatibility / Browser compatibility supported browsers / Browser compatibility supported devices / Browser compatibility unsupported browsers / Browser compatibility limitations / Limitations and new features steps, positioning relative to other steps / Positioning steps relative to other steps previous step, defining / Defining the previous and next steps next step, defining / Defining the previous and next steps transition duration, for individual steps / Transition duration for individual steps navigation keys, adding / Adding and removing navigation keys navigation keys, removing / Adding and removing navigation keys substeps, creating / Creating substeps troubleshooting / Troubleshooting and support demos, from book / impress.js demos from the book impress.js, step events stepenter / impress.js step events stepleave / impress.js step events impress.js file / Downloading and configuring impress.js, Default configurations impress.js presentations on mobile / impress.js presentations on mobile devices impress API functions about / Understanding the impress API functions api.init() / Understanding the impress API functions api.next() / Understanding the impress API functions api.prev() / Understanding the impress API functions, Inside the prev function api.goto(id) / Understanding the impress API functions, Inside the goto function CuuDuongThanCong.com https://fb.com/tailieudientucntt Impressionist about / Impressionist URL / Impressionist slide creation screen / Impressionist impressive presentations / Impressive presentations impress presentation tools about / Impress presentation tools Strut / Strut Impressionist / Impressionist iniStep function / impress.js under the hood initStep function / impress.js under the hood K keyboard.html file / Adding new keys for new events keyboard configurations working with / Working with keyboard configurations impress core / Inside the impress core keydown event / Assigning custom keys for custom events, Adding new keys for new events keys adding, for events / Adding new keys for new events M MIT about / Why is it important? mobile, impress.js presentations about / impress.js presentations on mobile devices issues / Issues in designing for mobile devices, Scenario 1, Scenario 2, Scenario best design practices / Best design practices for mobiles devices N navigation controls, content slider CuuDuongThanCong.com https://fb.com/tailieudientucntt creating / Creating navigation controls navigation hint creating / Creating the navigation hint navigation menu handling / Handling the navigation menu O on function / Defining the timeline navigation opacity attribute / Limiting the visibility of steps P pages creating, for website / Creating pages past class / How to use the step class pfx function / impress.js under the hood Play/Pause features, content slider creating / Creating the play/pause features portfolio gallery about / Portfolio gallery portfolio page designing, for website / Designing the portfolio page portfolio single about / Portfolio single positioning scaling, combining with / The importance of positioning in scaling PowerPoint about / Why is it important? practical application creating, for rotation / Rotations in practice creating, for scaling / Scaling in practice, Planning the design presentation CuuDuongThanCong.com https://fb.com/tailieudientucntt wrapping, inside container / Wrapping the presentation inside a container presentation container creating / Creating the presentation container presentation outline, impress.js / Presentation outline presentations creating / Creating your first presentation designing / Designing the presentation overview / Presentation overview automating / Automating presentations presentation wrapper designing, for website / Creating the presentation wrapper present class / How to use the step class preventDefault method / Inside the impress core Prezi.com about / What is impress.js? R rotateZ function / impress.js under the hood rotation practical application, creating / Rotations in practice S scaling combining, with positioning / The importance of positioning in scaling practical application, creating / Scaling in practice, Planning the design data perspective / Data perspective scaling effects about / Scaling effects scrollTo function / Inside the goto function services page designing / Designing the services page setInterval function / Automating presentations, Playing the slider automatically, Creating the play/pause features setTimeout function / Creating custom transition timing CuuDuongThanCong.com https://fb.com/tailieudientucntt slide creation screen, Impressionist / Impressionist slide creation screen, Strut / Strut slides about / What is impress.js? designing / Designing slides step class / Applying styles on steps working / How to use the step class step click event handling / Handling the step click event stepenter event / impress.js step events, Highlighting the active slide, Portfolio single, Handling the navigation menu stepleave event / impress.js step events, Highlighting the active slide steps about / What is impress.js? creating / Creating your first step, Creating Step styles, applying / Applying styles on steps visibility, limiting / Limiting the visibility of steps positioning, relative to other steps / Positioning steps relative to other steps defining / Defining the previous and next steps step_transitions array / Creating custom transition timing Strut about / Strut URL / Strut slide creation screen / Strut styles applying, on steps / Applying styles on steps substeps creating / Creating substeps switch statement / Assigning custom keys for custom events, Adding new keys for new events T themes, impress.js / Using themes timeline navigation defining / Defining the timeline navigation CuuDuongThanCong.com https://fb.com/tailieudientucntt timeline page designing, for website / Designing the timeline page timelines about / Designing the timeline page timeline_tracker container / Defining the timeline navigation transition-duration attribute / Transition duration for individual steps translate3d function / impress.js under the hood U unsupported browsers handling / Handling unsupported browsers V visibility limiting, of steps / Limiting the visibility of steps visibility attribute / Limiting the visibility of steps W website structure planning / Planning the website structure header, designing / Designing the header presentation wrapper, designing / Creating the presentation wrapper X x axis effects, positioning on / Positioning on the x axis elements, rotating around / Rotation around the x axis Y y axis CuuDuongThanCong.com https://fb.com/tailieudientucntt effects, positioning on / Positioning on the y axis elements, rotating around / Rotation around the y axis Z z axis effects, positioning on / Positioning on the z axis elements, rotating around / Rotation around the z axis zoom-in feature / Creating your first step zoom-out feature / Creating your first step CuuDuongThanCong.com https://fb.com/tailieudientucntt ... y= "-3 60" > Slide 4 data-x= "-6 00" data-z="400" data-x= "-1 000" data-rotate- data-x= "-6 00" data-z= "-4 00" data-x= "-2 00" data-rotate- Step and Step will be displayed completely... data-x, data-y, and data-scale attributes for the first slide We have used -1 000 for both data-x and data-y attributes Hence the first slide will be positioned at -1 000 px in the x axis and -1 000... data-rotate-x.html file in the source code folder for this example CuuDuongThanCong.com https://fb.com/tailieudientucntt