1

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 http://lab.hakim.se/reveal-js/#/fragments and http://jsfiddle.net/8ukwex3x/1/, you will be able to make out the difference.

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

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

sukesh
  • 2,379
  • 12
  • 56
  • 111

1 Answers1

0

Unfortunately your fiddle is completely missing the JavaScript (where I assume you had intended to put just the standard impress.js code) and in any case, just reading from the source code I don't see how your example is in any way similar to what the reveal-js example does. So, with the risk that I might be completely off here, I have one thing that may hopefully be helpful...

The reveal.js transitions are indeed pretty slick and fast. Did you know that you can set the duration of a transition in impress.js? The attribute is data-transition-duration:

<div id="impress" data-transition-duration="1000">

A demo slide show that uses it here.

The default is 1000 ms. A value at about 400-600 ms should give you the reveal.js experience in terms of speed.

PS: Note that in my impress.js repo, where the above link is to, you can also set a duration for each individual step/slide. For the upstream impress.js, all slides have the same duration, set in the root div element.

Henrik Ingo
  • 41
  • 3