It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind 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

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=",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:

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]; = 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 with a setInterval() call to move forward, but then I lose the ability to have different durations for each slide.

Source: (StackOverflow)

impress.js: How to run function on slide #id and class .active (or slide enter)?

How do make a video play on slide enter, and make it stop on slide exit with impress.js? Upon entering a slide, there is a class ".active". In fact, I can just use a unique ID, I just need to know how to tell impress.js to run on slide enter/exit.

I don't know how to code jQuery, but this was my attempt

document.getElementById('video-audio').addEventListener( ($.Event("keydown", { keyCode: 38 })), function () {WhenPlay()});

function WhenPlay() { 
 var classList = document.getElementById('video-audio').className.split(/\s+/);
      for (var i = 0; i < classList.length; i++) {
        if (classList[i] === 'active') {

Source: (StackOverflow)

How to remove CSS and JS from a certain content-type in Drupal 7

I've come here after looking for how to selectively add a CSS or JS to a given node based on its view mode and content type. That question is answered pretty straightforward here (

Now I'd love to clear everything: I'm looking for a way to show my desired CSS and JS but only that, with no other JS and CSS. I'm trying to integrate Impress.js (And I don't like the available solutions) and it seems to be conflicting with Jquery, as both scripts are properly loaded but both latest Firefox and Chromium browsers throw the "old browser" message.

Any ideas on how to unset every single CSS and JS so that the CSS and JS I want to use are the only ones really active?


I've tried the following, to no success:

$mycss = $vars['styles'];

unset($micss[drupal_get_path('module','system') .'/system.base.css']);


unset($micss[drupal_get_path('module','toolbar') .'/toolbar.css']);

$vars['styles'] = $mycss;

(I added a lot of different css i want to get rid of, but this explains the idea). It didn't work, though :)

Edit. I'm sorry for the bad markup, I'm looking for a way to clean/mark code.

Source: (StackOverflow)

How does Impress.js's CSS work?

I was reading about Impress.js and I have some questions about the code below (Part of the Inpress's demo).

.impress-enabled .step {
    margin: 0;
    opacity: 0.3;

    -webkit-transition: opacity 1s;
    -moz-transition:    opacity 1s;
    -ms-transition:     opacity 1s;
    -o-transition:      opacity 1s;
    transition:         opacity 1s;

.impress-enabled { opacity: 1 }

My questions:

  1. What is .impress-enabled class here for?

  2. So class .active is applied on the step currently displayed? And thus, its opacity changes to 1 when its displayed and back to .3 when its next one is displayed; as described in .impress-enabled .step above it, right?

Thanks for help

Source: (StackOverflow)