Animated in a while

1

I am introducing animations and I find something I do not know how to solve it.

I'm taking a cycle while doing a loop of col-4 to get some testimonials from the BD with a limit of the last 3.

Well, I put the animation in the col-4 so that it is played in the 3 col-4 but only reproduced in the first.

<?php
 //var_dump($_GET);
 $results = $mysqli->query("SELECT valoraciones.id, valoraciones.idUser, valoraciones.Estrellas, valoraciones.Valoracion, valoraciones.Publicada, Usuarios.IdUsuario, Usuarios.Nombre, Usuarios.Sexo FROM valoraciones, Usuarios WHERE valoraciones.idUser = Usuarios.IdUsuario AND valoraciones.Publicada = 1 ORDER BY valoraciones.id DESC LIMIT 3 ");
 mysqli_set_charset("utf8");
 while($res = $results->fetch_array()) {
?>

<div id="MovTesti" class="col-4">TESTIMONIO</div>

<?php } ?>

Any ideas?

    
asked by Miguel 02.10.2018 в 07:39
source

1 answer

1

For what I am reading, the library that you have installed the only thing that it asks you is that you give two classes to the element that you want to animate. I have not been able to deploy a test scenario, but presumably your code would work like this.

<?php
 //var_dump($_GET);
 $results = $mysqli->query("SELECT valoraciones.id, valoraciones.idUser, valoraciones.Estrellas, valoraciones.Valoracion, valoraciones.Publicada, Usuarios.IdUsuario, Usuarios.Nombre, Usuarios.Sexo FROM valoraciones, Usuarios WHERE valoraciones.idUser = Usuarios.IdUsuario AND valoraciones.Publicada = 1 ORDER BY valoraciones.id DESC LIMIT 3 ");
 mysqli_set_charset("utf8");
 while($res = $results->fetch_array()) {
?>

<div id="MovTesti" class="col-4" class="jackInTheBox animated"><p>TESTIMONIO</p></div>

<?php } ?>

The only thing I've done has been to add the jackInTheBox animated classes to the HTML that you put in the example, as well as to put the text within a <p> .

EDIT

By not having more than your code I do not know if you have made a correct installation of the library, but assuming that it is the case, it should work.

EDIT 2

You could use a self-incremental variable to concatenate it to the ID and thus generate it dynamically and only:

<?php
 //var_dump($_GET);
 $results = $mysqli->query("SELECT valoraciones.id, valoraciones.idUser, valoraciones.Estrellas, valoraciones.Valoracion, valoraciones.Publicada, Usuarios.IdUsuario, Usuarios.Nombre, Usuarios.Sexo FROM valoraciones, Usuarios WHERE valoraciones.idUser = Usuarios.IdUsuario AND valoraciones.Publicada = 1 ORDER BY valoraciones.id DESC LIMIT 3 ");
 mysqli_set_charset("utf8");
 $contador = 1;
 while($res = $results->fetch_array()) {
?>

<div id="MovTesti_<?php echo $contador; $contador++; ?>" class="col-4" class="jackInTheBox animated"><p>TESTIMONIO</p></div>

<?php } ?>

EDIT 3

So that the animation has a delay of 3 seconds.

$('clase_que_tienes_que_poner_a_los_elementos_que_necesitas_animar').waypoint(function(){ $('this').addClass('jackInTheBox animated delay-3s'); }
    
answered by 02.10.2018 / 11:07
source