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: 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)

Screen-size dependend values for data-x in impress.js

Say one has the following impress.js code:

<div id="title" class="step" data-x="0" data-y="0" data-scale="5">
<div id="toc" class="step" data-x="10000" data-y="0" data-scale="1">

This renders fine on a 1920x1080 screen, because 5 (data-scale) times 2000 (screen width with some buffer) is 10000.


  • It doesn't render nice on smaller screens (because 1920 is large compared to for instance 800); and
  • For larger screens, the slides can still overlap.

How can one set the slide location, based on the viewport size? Thus something like 500vw? (tried that, but that didn't work).

Source: (StackOverflow)

RevealJs like rotation in ImpressJs

Playing with impress.js

I'm trying to acheive a Reveal.js like slide transition, but using impress.js. The basic effect did come, but i feel, the slides are taking a 'wider' turn making it look a lil slower.

Note : In the fiddle, maximize the output section to see the said problem more clearly

I dont know how else to put it, but if you see and, you will be able to make out the difference.

<div id = "impress">
    <div class = "step">
        Slide 1
    <div class = "step" data-x = "500" data-z="-400" 
        Slide 2

What should I do to make it work just like Reveal.js' transition.

Source: (StackOverflow)

How can I offset the view position for a step in impress.js

I am using impress.js to build a presentation. I have several steps arranged around a central image (a diagram). I can successfully position the steps around the image using data-x and data-y but when the presentation is 'on' each step, I want to offset the view so that you can see more of the central image.

How do I offset the presentation view for each step?

Source: (StackOverflow)

Impress.js set Slide Width to 100%

I was just trying out impress.js plugin. i tried setting the width of slides to 100% but it seems to be not taking the width in percentage....

Any fix for this will be very helpful.

Source: (StackOverflow)

Smaller slide margins in impress.js?

Impress.js seems to default to slides with a huge left margin (or padding -- I can't quite get Firefox's Inspector to tell me clearly). I have a slide with a pretty wide <pre> block that would fit if it was actually left aligned, but won't fit on a default slide.

I've played with the CSS and I can't seem to figure out how to get one slide (or some slides) to take up the full available screen space. FWIW, this is what I'm trying to fit (and yes: if you're a Nationals fan you'll notice something is fishy in the content. I have reasons for that.). This is my slide:

    <div class="step slide" data-x="2000" data-y="850"><pre>
NAME: Sean Burnett POS: RP AGE: 30 WT: 200 BORN: Dunedin, FL SALARY: 2350000
NAME: Tyler Clippard POS: RP AGE: 27 WT: 200 BORN: Lexington, KY SALARY: 1650000
NAME: Ross Detwiler-Smith POS: SP AGE: 26 WT: 174 BORN: St. Louis, MO SALARY: 485000
NAME: Christian Garcia POS: RP AGE: 27 WT: 215 BORN: Miami, FL SALARY: N/A
NAME: Gio Gonzalez POS: SP AGE: 27 WT: 205 BORN: Hialeah, FL SALARY: 3335000
NAME: Mike Gonzalez POS: RP AGE: 34 WT: 215 BORN: Robstown, TX SALARY: N/A
NAME: Ryan P. Mattheus POS: RP AGE: 28 WT: 215 BORN: Sacramento, CA SALARY: 481000
NAME: Craig Stammen POS: RP AGE: 28 WT: 200 BORN: Coldwater, OH SALARY: 485000
NAME: Drew Storen POS: RP AGE: 25 WT: 180 BORN: Indianapolis, IN SALARY: 498750
NAME: Jordan Q. Zimmermann POS: SP AGE: 26 WT: 218 BORN: Auburndale, WI SALARY: 2300000</pre>

And I end up with this: enter image description here

The text would fit fine if I could use the full screen.

Can anyone suggest some CSS that would let me force that slide to use the full available screen space in impress.js? I tried playing with float: left; and margin widths, but the CSS here is out of my league, and I haven't seen a single impress demo that doesn't hang onto that huge margin.

I've looked at a ton of demos and example slide shows and they all seem to live with giving over the left 20% of the screen to open space.

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)

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)

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)

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)

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)

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)

Simple impress.js does not work

Somehow even the simplest ground up impress.js slide does not work for me :( … , Always have to use your example.

<html lang="en">
        <title>Impress Demo</title>
        <div id="impress">
            <div id="start">
                    <p style='width:1000px;font-size:80px;
                text-align:center'>Creating Stunning Visualizations</p>
                <p>Impress.js </p>

            <div id="slide2" data-x="-1200" data-y="0">
                    <p style='width:1000px;font-size:80px;'>
                First Slide Moves From Left To Right</p>
                <p>Impress.js </p>
        <script type="text/javascript">impress().init();</script>
        <script type="text/javascript" src="js/impress.js"></script>

And I have the impress.js file under the js directory.Still none of the latest browser show the slides . I am using firefox 16. enter image description here

Source: (StackOverflow)