O'Reilly logo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Building Impressive Presentations with impress.js

Book Description

Design stunning presentations with dynamic visuals and 3D transitions that will captivate your colleagues

  • Create presentations inside the infinite canvas of modern web browsers
  • Build presentations that work anywhere, any time, and on any device
  • Build dynamic presentations with rotation, scaling, transforms, and 3D effects

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.

Table of Contents

  1. Building Impressive Presentations with impress.js
    1. Table of Contents
    2. Building Impressive Presentations with impress.js
    3. Credits
    4. About the Author
    5. About the Reviewers
    6. www.PacktPub.com
      1. Support files, eBooks, discount offers and more
        1. Free Access for Packt account holders
    7. Preface
      1. What this book covers
      2. What you need for this book
      3. Who this book is for
      4. Conventions
      5. Reader feedback
      6. Customer support
        1. Downloading the example code
        2. Errata
        3. Piracy
        4. Questions
    8. 1. Getting Started with Impressive Presentations
      1. What is impress.js?
      2. Built-in features
      3. Beyond presentations with impress.js
      4. Why is it important?
        1. Presentation outline
        2. Using bullet points
        3. Animations
        4. Using themes
      5. Downloading and configuring impress.js
      6. Creating your first presentation
        1. Designing the presentation
        2. Creating the presentation container
        3. Creating your first step
        4. Applying styles on steps
        5. Creating Step 1
        6. Creating Step 2
        7. Limiting the visibility of steps
        8. Presentation overview
      7. Summary
    9. 2. Exploring Impress Visualization Effects
      1. Introduction to CSS transformations
      2. Positioning effects
        1. Positioning on the x axis
        2. Positioning on the y axis
        3. Positioning on the z axis
      3. Rotating effects
        1. Rotation around the x axis
        2. Rotation around the y axis
        3. Rotation around the z axis
      4. Rotations in practice
      5. Scaling effects
      6. The importance of positioning in scaling
      7. Scaling in practice
        1. Planning the design
      8. Data perspective
      9. impress.js under the hood
      10. Summary
    10. 3. Diving into the Core of impress.js
      1. impress.js configuration
        1. Default configurations
        2. Customizing configurations
          1. Configuring the width and height
          2. Configuring the minScale and maxScale
          3. Configuring the perspective
          4. Configuring the transition duration
        3. Looking at configurations inside the core
      2. Understanding the impress API functions
        1. Inside the next function
        2. Inside the prev function
        3. Inside the goto function
      3. Automating presentations
      4. Creating custom transition timing
      5. impress.js step events
      6. How to use the step class
      7. Working with keyboard configurations
        1. Default keyboard configurations
          1. Inside the impress core
      8. Assigning custom keys for custom events
      9. Adding new keys for new events
      10. Handling the step click event
      11. Summary
    11. 4. Presenting on Different Viewports
      1. Fullscreen presentations
      2. Using impress.js inside a container
      3. Developing a content slider
        1. Planning the design
        2. Designing slides
        3. Wrapping the presentation inside a container
        4. Playing the slider automatically
        5. Creating navigation controls
        6. Creating the play/pause features
        7. Adding slide numbers
        8. Highlighting the active slide
      4. impress.js presentations on mobile devices
      5. Issues in designing for mobile devices
        1. Scenario 1
        2. Scenario 2
        3. Scenario 3
      6. Best design practices for mobiles devices
      7. Summary
    12. 5. Creating Personal Websites
      1. Planning the website structure
        1. Designing the header
        2. Creating the presentation wrapper
      2. Creating pages
      3. Designing the home page
      4. Designing the portfolio page
        1. Portfolio gallery
        2. Portfolio single
      5. Designing the timeline page
      6. Defining the timeline navigation
      7. Designing the services page
      8. Handling the navigation menu
      9. Creating the navigation hint
      10. Summary
    13. 6. Troubleshooting
      1. Browser compatibility
      2. Handling unsupported browsers
      3. Limitations and new features
        1. Positioning steps relative to other steps
        2. Defining the previous and next steps
        3. Transition duration for individual steps
        4. Adding and removing navigation keys
        5. Creating substeps
      4. Troubleshooting and support
      5. Summary
    14. A. Impress Tools and Resources
      1. Impress presentation tools
        1. Strut
        2. Impressionist
      2. Impressive presentations
      3. impress.js demos from the book
    15. Index