impress.js on jmpress.js

[Martyn Wheeler]

Hi,

Forgive me if this has been asked before.  I have just been messing with impress.js and was now trying to migrate to jmpress.js.  I have my presentation working aprt from one aspect.

in the impress.js demo the active slide has opacity 1 and the inactive slides opacity 0.3.  this is achieved by

.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 }

Can anyone show me how i can achieve the same in jmpress.js?

Thanks

Martyn

[Tobias Koppers]

.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;

}

.step.active { opacity: 1 }

http://jmpressjs.github.io/docs/active.html

http://jmpressjs.github.io/docs/core.html

Or https://github.com/jmpressjs/jmpress.js/blob/master/src/css/demo/index.css#L106-127

2013/7/23 Martyn Wheeler <martynd...@gmail.com>

Martyn

--
You received this message because you are subscribed to the Google Groups "jmpress.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jmpressjs+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[Martyn Wheeler]

that's odd that doesn't seem to work but I managed to get:

.step {

    width: 900px;

    padding: 40px;

    -webkit-box-sizing: border-box;

    -moz-box-sizing:    border-box;

    -ms-box-sizing:     border-box;

    -o-box-sizing:      border-box;

    box-sizing:         border-box;

    font-family: 'PT Serif', georgia, serif;

    font-size: 48px;

    line-height: 1.5;

}

/* fade out inactive slides */

.step {

    -webkit-transition: opacity 1s;

    -moz-transition:    opacity 1s;

    -ms-transition:     opacity 1s;

    -o-transition:      opacity 1s;

    transition:         opacity 1s;

}

.step:not(.active) {

    opacity: 0.3;

}

from the original css working, not sure why they are not the same?

Thanks anyway

Martyn