It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com. impress.js | presentation tool based on the power of CSS3 transforms and transitions in modern browsers | by Bartek Szopka @bartaz impress.js is a presentation tool based on the power of css3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js with fixed top nav not working

I have been working with impress.js, html5 and css. I have got my impress.js presentation to a standard I am quite happy with but I am trying to implement a fixed top nav similar to Twitters.

The current implementation does not work correctly. if you click the bar whilst on a slide/step the links are unclickable.

My Attempt


<!DOCTYPE html5>
<html lang="en">
    <meta charset="utf-8" />
    <meta name="viewport" content="width=1024"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>


    <meta name="author" content="patchu" />

    <link rel='nofollow' href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
    <link rel='nofollow' href="css/style.css" rel="stylesheet" />

    <link rel="shortcut icon" rel='nofollow' href="favicon.png" />
    <link rel="apple-touch-icon" rel='nofollow' href="apple-touch-icon.png" />

<body class="impress-not-supported">
<div class="fallback-message">
    <p>Your browser <strong>doesn't support the features required</strong> by my website, so you are presented with a simplified version.</p>
    <p>For the best experience please use the latest <strong>Chrome</strong>, <strong>Safari</strong> or <strong>Firefox</strong> browser.</p>
<div class="navbar-fixed-top2" align="center">
<p>Navigation will go here <a class="" rel='nofollow' href="#websites" title="My Websites">My Websites</a> 
<a class="" rel='nofollow' href="#about" title="My Websites">About</a> 
<a class="" rel='nofollow' href="#contact" title="My Websites">Contact</a>
<a class="" rel='nofollow' href="#applications" title="My Websites">Applications</a>
<div id="impress" data-transition-duration="800">   
    <div id="title" class="step slide" data-x="0" data-y="0" data-scale="3">
    <div id="about" class="step slide" data-x="-1000" data-y="-700" data-rotate="270" data-scale="5">
            <h1>About Me</h1>
    <div id="about1" class="step slide about" data-x="-1900" data-y="880" data-z="-100" data-rotate="270" data-scale="1">
            <p>Apart from making <strong>awesome websites</strong>, I love computer networking and making <strong>iOS applications.</strong></p>
    <div id="about2" class="step slide about" data-x="-1900" data-y="100" data-z="-100" data-rotate="270" data-scale="1">
            <p>Minimalist, <strong>Perfectionist</strong>, Gamer and Apple fanboy. I have a passion for creating stuff. Love trying out <strong>new technologies</strong> and experiences.</p>
    <div id="about3" class="step slide about" data-x="-1900" data-y="-800" data-z="-100" data-rotate="270" data-scale="1">
            <p>I mostly code in <strong>PHP</strong> and <strong>Objective-C</strong>, but I'm not afraid to get my hands dirty.</p>
    <div id="about4" class="step slide about" data-x="-1900" data-y="-1600" data-z="-100" data-rotate="270" data-scale="1">
            <p><strong>Graduated</strong> with a <strong>1:1</strong> (84% Average) in Computer Network Technology BSc.</p>
    <div id="websites" class="step slide" data-x="7100" data-y="-700" data-z="-3000" data-rotate="0" data-scale="5">
    <div id="applications" class="step slide application" data-x="3950" data-y="-4500" data-z="-3000" data-rotate="90" data-scale="5">
    <div id="contact" class="step slide" data-x="-180" data-y="2100" data-scale="3">

            <div id="contact_images">
                <a rel='nofollow' href=""><img src="images/twitter.png"></a>
                <a rel='nofollow' href=""><img src="images/linkedin.png"></a>

<script src="js/impress.js"></script>
    //All hail megatron



    Resetting the humans

Source: (StackOverflow)

impress.js setting background element

is there any way to get the same 3d effect of setting "step" in the class without getting it to stepin/stepout.

I just want it in the background and keep the css simple. Thanks.

Source: (StackOverflow)


How to use impress.js to create non-fullscreen presentations?

How do I use impress.js to create a presentation that does not fill the full page? I need to use it as a banner as part of an existing web page. I would appreciate any help on this.


Source: (StackOverflow)

How to make ImpressJS work on IE10?

I am not able to make impressJS work on IE10. I wanted to know which all polyfills are required to be inserted in order to make impressJS work ?

Source: (StackOverflow)

Convert HTML5 to Flash

I am using impress.js extensively to create a lot of HTML5 presentations. These presentations need to be displayed on touch-screen kiosks. Unfortunately, the vendor handling the kiosks has said that only Flash content can be displayed on these kiosks.

Is there a work-around for this (changing vendor is ruled out, as they control most kiosks here)? How do I convert HTML5 to Flash, without losing the effects my presentations have?

Source: (StackOverflow)

Change background color for different slides

I am trying impress.js out but I wonder i there is a way to change the background color of the body for some slides. I would like my first 3 slides to have a different background then the rest.

Source: (StackOverflow)

Auto press the spacebar key after every 5 seconds

I am using the impress.js and when ever the user presses the space bar, the script moves text around on the screen. Is there a way to have the spacebar be pressed every 5 seconds? Or is there a way to have the impress.js auto move onto the next slide ofter 5 seconds?

Source: (StackOverflow)

An alternate to impress.js [closed]

I am looking for an alternate tool like impress.js for online presentations. Can someone suggest me any which is cross browser compatible??

impress.js is a great tool but not supported in older versions of Firefox and chrome and IE. I have tried deck.js as well but transitions for this too only supported in modern browsers. i am looking for something which works in older browser too.

Any help is appreciated . Thanks in advance!!!

Source: (StackOverflow)

impress.js - how to add next and previous buttons

i found this:


but i dont know how to use it? is there any way to implement two simple buttons which go one slide further or back?

Source: (StackOverflow)

How to fade in/out images with impress.js

As you can see in this example, when you press < RIGHT > key, another images appear over the existing one.

Looking at the source code there is only one image .svg: http://www.inf.usi.ch/faculty/pautasso/talks/2012/soa-cloud-rest-tcc/img/interop-ws2.svg

How can i get this effect with another image?

Source: (StackOverflow)

How to scale transition UILabel without using a lot of memory?

I'm trying to reproduce some of the 2D transitions in Impress.js's sample presentation in Objective C. Specifically the rotate, pan, and scaling - right now I'm focusing on the scaling.

I've tried scaling a UILabel to the point where it "passes the screen", as the "visualize your Big thoughts" -> "and tiny ideas" does in the sample presentation.

This is what I've tried so far:

UILabel *label = [[UILabel alloc] init];

label.text = @"Hello World!";
label.textColor = [UIColor blackColor];
label.font = [UIFont fontWithName:@"Arial" size:18.f];
[label sizeToFit];
label.center = CGPointMake(self.view.bounds.size.width / 2, self.view.bounds.size.height / 2);
[self.view addSubview:label];

label.contentScaleFactor *= 80;

[UIView animateWithDuration:5 animations:^{
    label.transform = CGAffineTransformScale(label.transform, 80, 80);

Unfortunately this eats up about ~30-60 MB of RAM, depending on what the contentScaleFactor and initial font size is. If I don't increase the contentScaleFactor the text looks blurry. Increasing the font size also seems to eat just as much memory.

Here is what it looks in the profiler:

enter image description here

And this is just a single UILabel.

Is there any way to do this without eating up so much memory, without sacrificing quality of the text being rendered or the transitions?

Source: (StackOverflow)

How to make impress.js slideshow auto play and loop

I have a slideshow I'd like to auto play and loop continuously. I've found snippets that let me set a global slide duration and use impress.next() with a setInterval() call to move forward, but then I lose the ability to have different durations for each slide.

Source: (StackOverflow)

Impress.js : texts and images look blurry

With Impress.js, my texts and my images look blurry.

See the next screenshot where CSS is disabled but Impress.js is enabled :

enter image description here

And now see the next screenshot where Impress.js and CSS are disabled :

enter image description here

Why are they blurry ?

This is my configuration :

<div id="Model-2" class="step" data-x="117000" data-rotate="20">
    <p>On peut préciser des valeurs par défaut</p>
    <img src="img/18.png">

Source: (StackOverflow)

How to use slidify with impress.js

Following https://twitter.com/ramnath_vaidya/status/274636089715740672 slidify should support impress.js. But when I use

title       : Test
subtitle    : 
author      : 
job         : 
framework   : impressjs  # {io2012, html5slides, shower, dzslides, ...}
highlighter : highlight.js  # {highlight.js, prettify, highlight}
hitheme     : tomorrow      # 
widgets     : []            # {mathjax, quiz, bootstrap}
mode        : selfcontained # {standalone, draft}

as head of my Rmd-file (impressjs as in https://raw.github.com/ramnathv/slidify/gh-pages/samples/impressjs/index.Rmd) I get an empty directory in libraries/frameworks called impressjs.

Where do I have to enable impress.js? Do I have to install impress.js prior to using it?

Source: (StackOverflow)

How to get a full, seamless rotation with Impress.js?

I'm using impress.js to create a 3D effect in which you are inside four pages, as if they were four walls in a room. To view the next page, a simple -90 degree rotation is used. The pages are already laid out with impress.js using:

//page 1
<div id="title" class="step" data-x="0" data-y="0" data-z="0">

//page 2
<div id="about" class="step" data-x="2000" data-y="0" data-z="2000" data-rotate-y="-90">

//page 3
<div id="our_work" class="step" data-x="0" data-y="0" data-z="4000" data-rotate-y="-180">

//page 4
<div id="contact" class="step" data-x="-2000" data-y="0" data-z="2000" data-rotate-y="-270">

This works, except that the transition from page four to one takes the "long way" around. As in, the rotation is displayed as a 270 degree rotation instead of -90 as the others. If I change page 1 rotation to -360 to solve this, transition from page one to page two is broken. How would I go about making a full circle of transitions?

Source: (StackOverflow)