"using the data-jmpress attribute" - is it exactly enough for animation?

[Alexey Ewillive]

Hi! Sorry for noob question. But I can't achieve the appearance of animation, as was said in the demo.

Here is my example code:

<div id="regions" class="step slide" data-x="-500" data-y="-1500" data-z="-500" data-rotate-y="90" data-jmpress="drive-right after step">

Thanks!

[shama]

You'll need to add the CSS for the specific animations, in your case 'drive-right'. Check out the basic CSS animations here: https://github.com/jmpressjs/jmpress.js/tree/master/src/css/animations/basic and an example of it being used here: https://github.com/jmpressjs/jmpress.js/tree/master/examples/animation

Kyle

[SPK]

sorry for the long answer. but all these animation classes are already written in my css file. but the animation does not work. maybe the trouble is in the script? here are my calls to the script: 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> </ script> (before the </ head> tag)

 

Script for hint:

<script>
if ("ontouchstart" in document.documentElement) {
     document.querySelector (". hint"). innerHTML = "<p> Tap on the left or right to navigate </ p>";
}
</ script>

 

Main script initializing :

<script src="js/jmpress.all.js"> </ script>
<script> $ (function () {
     $ ('# jmpress'). jmpress ();
}); </ script>

Thanks again!

суббота, 30 ноября 2013 г., 22:49:37 UTC+6 пользователь shama написал:

[Tobias Koppers]

You cannot put the animation on a "step". "data-jmpress" need to be on child elements of a step:

<div id="regions" class="step slide">

  <div data-jmpress="drive-right after step">This will drive in.</div>

</div>

2013/12/3 SPK <spk.so...@gmail.com>

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

[SPK]

It works now! Thanks a lot, guys! 

let me ask one more stupid question: how to make the child's DIV animation to start up automatically, without waiting for pressing buttons?

вторник, 3 декабря 2013 г., 15:12:56 UTC+6 пользователь Tobias Koppers написал:

[SPK]

Strange. Initially, this version of the code did not work:

<div id="regions" class="step slide">

  <div data-jmpress="drive-right after 1s step">This will drive in.</div>

</div>

Then I tried this (do not ask why):

<div id="regions" class="step slide" data-jmpress="drive-right after step">

  <div data-jmpress="drive-right after 1s step">This will drive in.</div>

</div>

and make it work! Animation became operate without pressing the buttons. Then I removed the data-jmpress = "drive-right after step" from the parent DIV and everything will work all the same. Strange.

New problem :) The hint displaying stopped when idle. I don't know why does not work standard code:

Jmpress page's code:

...

<div id="jmpress">

     <div id="FIRSTSCREEN" class="step slide" data-x="-1000" data-y="-1500" data-z="0">

          <div class="child"  data-jmpress="drive-right after 2s step"><q><b>Республика Казахстан</b></q>

          </div>

     </div>

...

</div>

<div class="hint">

    <p>Для просмотра используйте клавишу "пробел" или кнопки со стрелками <br />Use a spacebar or arrow keys to navigate</p>

</div>

<script>

if ("ontouchstart" in document.documentElement) { 

    document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";

}

</script>

<script src="js/jmpress.all.js"></script>

<script>$(function() {

    $('#jmpress').jmpress();

});</script>

CSS code:

...

.hint {

    display: none;

    position: fixed;

    left: 0;

    right: 0;

    bottom: 200px;

    background: rgba(0,0,0,0.5);

    color: #EEE;

    text-align: center;

    font-size: 40px;

    padding: 20px;

    z-index: 100;

    opacity: 0;

    -webkit-transform: translateY(400px);

    -moz-transform:    translateY(400px);

    -ms-transform:     translateY(400px);

    -o-transform:      translateY(400px);

    transform:         translateY(400px);

    -webkit-transition: opacity 1s, -webkit-transform 0.5s 1s;

    -moz-transition:    opacity 1s,    -moz-transform 0.5s 1s;

    -ms-transition:     opacity 1s,     -ms-transform 0.5s 1s;

    -o-transition:      opacity 1s,      -o-transform 0.5s 1s;

    transition:         opacity 1s,         transform 0.5s 1s;

}

.jmpress-enabled .hint { display: block }

.jmpress-on-FIRSTSCREEN .hint {

    opacity: 1;

    -webkit-transform: translateY(0px);

    -moz-transform:    translateY(0px);

    -ms-transform:     translateY(0px);

    -o-transform:      translateY(0px);

    transform:         translateY(0px);

    -webkit-transition: opacity 1s 5s, -webkit-transform 0.5s 4.5s;

    -moz-transition:    opacity 1s 5s,    -moz-transform 0.5s 4.5s;

    -ms-transition:     opacity 1s 5s,     -ms-transform 0.5s 4.5s;

    -o-transition:      opacity 1s 5s,      -o-transform 0.5s 4.5s;

    transition:         opacity 1s 5s,         transform 0.5s 4.5s;

}

...

Where is my mistake? Earlier the hint was displayed at the right time (as in impress.js, and after the transition to jmpress.js, too). I can not remember a time when a hint ceased to be displayed.

Thanks!