efecto creditos

xonil · #1 (**permalink**) 14/08/2016, 17:41

Hola a todos, el titulo es lo que realmente quiero conseguir, aunque lo voy a explicar un poco.

tengo que mostrar unos datos, estos datos han sido generados y recogidos con php, se los he pasado a un array en javascript, hasta ahí todo bien, los puedo mostrar dentro de un div, pero lo que quiero es mostrarlos con unos efectos en css, así que en el div y con un archivo .css consigo los efectos para el array, pero lo que hace es mostrar todo el array entero y le da el efecto, y lo que yo quiero es dar el efecto al primer elemento del array, una vez terminado el efecto, mostrar el segundo y darle el efecto, y así con todo el array.

He probado con la función setInterval y seTtimeout, pero nada, los muestra todos de golpe y realiza el efecto a todos juntos.

Para mostrar los datos recorro el array con un bucle for en javascript, y dentro del for he metido la funcion setTimeout pasandole el array y el indice del for, le he dado hasta 100000 milisegundos de retardo, pero salen todos de golpe.

Código Javascript:

Ver original<div class="animated bounce">
    <script>
    
    function funciona( numero)
    {
        document.write(batalla[numero]+"\n");
    }
    
    
    
    for (i=0;i<batalla.length;i++)
    {
        
        setTimeout(funciona(i), 100000);
        
    }
    
        
        
 
 
    </script>
    </div>

Se que el efecto es en css, y tengo una buena colección de efectos para css, pero lo dicho, lo que quiero es que a cada segundo me aparezca un elemento del array y con css le de el efecto.

gracias de antemano.

#2 (**permalink**) 14/08/2016, 17:53

ni idea como tienes todo hecho pero podrias hacer una recursividad:

Código Javascript:

Ver originalfunction funciona(num){
alert(num);
num++;
setTimeout("funciona('"+num+"')",10000);
}

Ve como andas con eso

xonil · #3 (**permalink**) 14/08/2016, 18:13

Gracias por responder, he añadido al código el inicializador de la variable num, poniendolo a cero para que recorra el array, y he sustituido el alert por el document.write, y ni funciona, la verdad que no sabría en el ejemplo luego como me las arreglaría para romper la funcion cuando el array se hubiese completado.

Los ejemplos con alert sirven para ver si el código chuta, pero para mi ejemplo en particular sirve de poco, ya que funcionar mi código y las mil y una versiones que he intentado, funcionan perfectamente con alert y con document.write, el problema es que no lo hace con los tiempos y como yo quiero que funcione.

Repasando conceptos: lo primero que se ejecuta es php en el servidor, manda el resultado al cliente, a su navegador, siendo primero las cabeceras, el navegador ejecuta primero el código javascript y seguidamente muestra los resultados, por eso me muestra todo de golpe. Luego la función setTimeout, supongo que será que no sirve en este ejemplo, así que creo que la solución estará más encaminada a css o jquery, que coja el array y lo muestre con los efectos que sean. Estoy buscando efectos de banner aleatorios para adaptar ese código y que en vez de mostrar una imagen cada x´s tiempo, que muestre un elemento del array cada x´s tiempo.

#4 (**permalink**) 14/08/2016, 19:05

Mira si no muestras nada, no puedo adivinar. en cuanto a parar es fácil comparas donde vas con el largo del arreglo y detienes...

por otro lado con document.write no vas a conseguir lo que deseas.

Los conceptos me los se relax ;)

Te dejo un ejemplo para lo que quieres, más directo con ejemplo no puedo ser:

Código HTML:

Ver original<html>
    <head>
        <script type="text/javascript">
        
        function funciona(num){
        var arr = ["Escritor: Juanito", "Protagonista: Diego", "Productor: Pepe", "Editor: Andres"];
        var el = document.getElementById("creditos"); 
            if(num < arr.length){
            el.innerHTML = arr[num];
            num++;
            setTimeout("funciona("+num+")", 2000);
            }
            else{
            el.innerHTML = "THE END...";
            }
        }
        </script>
    </head>
    <body onload="setTimeout('funciona(0)',2000);">
        <p id="creditos">Los Creditos...</p>
    </body>
</html>

EDITÉ!!!

Saludos

xonil · #5 (**permalink**) 14/08/2016, 19:21

Gracias, esto si que me convence, voy a modificar para adaptarlo.

Perdón por lo de los conceptos, pero no era hacia ti, sino más bien como reflexión, ya que algo se me escapaba, no obstante disculpa y gracias, ya te contaré como me ha ido, y colgare el resultado.

#6 (**permalink**) 15/08/2016, 10:07

Buenísimo, me cuentas...

IsaBelM · #7 (**permalink**) 15/08/2016, 12:53

en este caso no sería mas conveniente usar el método seInterval()??

Cita:

(function fnc(n){
var arr = [1,2,3,4,5];

console.log(arr[n]);

window.setInterval(function() {

console.log(arr[++n % arr.length]);

}, 2000);

})(0);

#8 (**permalink**) 15/08/2016, 13:11

Cita:

Iniciado por IsaBelM

en este caso no sería mas conveniente usar el método seInterval()??

También... de hecho no se por qué me fuí por esa opción.