How does Impress.js's CSS work?

Question

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 .step.active { opacity: 1 }

My questions:

What is .impress-enabled class here for?
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

score 2 · Accepted Answer · answered Mar 31 '13 at 00:01

2

if javascript is deactivated by the visitors browser, he won't get a .impress-enabled class at all, because it is added via javascript. that's how they could separate a javascript and a non-javascript version (simply deactivate javascript for a moment and visit an example page of impress.js again). So if you have js activated, the class "bored" gets removed and a class called "impress-on-bored" and "impress-enabled" gets activated.
Yes. You're right.

answered Mar 31 '13 at 00:01

danielwinter

331
1
2
10

So when browser supports Impress, class impress-not-supported is removed and `impress-enabled`, `impress-on-idhere` is added to body element? Both the classes are added? What's the use of second class? – Sourabh Apr 01 '13 at 16:00
I don't know it exactly, but I would expect the following: `impress-on-bored` is added when impress is found within the scope (and not yet applied, like its "hey.. i'm ready to go.. just activate me") `impress-enabled`will be added if impress is applied via js in the document.ready function – danielwinter Apr 01 '13 at 20:07
impress-on-ID can be used to add slide specific js or css code when it becomes active. For example, if your slides are small and multiple slides are contained in the browser window, we can initially hide all the slides other than first slide. Once specific slide becomes active, it will get impress-on-ID class. We can use this class to make the step visible. If you want to know more, read my book on Building Impressive Presentations with impress.js at http://www.packtpub.com/building-impressive-presentations-with-impressjs/book – Rakhitha Nimesh Apr 29 '13 at 02:22

score 0 · Answer 2 · answered Apr 29 '13 at 02:22

impress-on-ID can be used to add slide specific js or css code when it becomes active. For example, if your slides are small and multiple slides are contained in the browser window, we can initially hide all the slides other than first slide.

Once specific slide becomes active, it will get impress-on-ID class. We can use this class to make the step visible.

If you want to know more, read my book on Building Impressive Presentations with impress.js

How does Impress.js's CSS work?

2 Answers2