Webanimator carga de animaciones 
Autor: Jerome P.
Visitado 48,
Followers 1,
Compartido 0
Buenos dias
Tal y como comento abro el nuevo post como pregunta para ver si se puede cargar las animaciones de Webanimator en el momento que se llega al punto de la pagina donde se encuentra.
Actualmente, las animaciones se detonan al abrir la pagina y no cuando se esta en el punto de vision.
Dejo los enlaces:
El primero es con autoplay que es una funcion de webanimatro que ejecuta de forma directa la animacion
El segundo es sin autoplay implicando que no se detona la animacion cuando se carga, esta vairante la dejo por si sirva de algo.
Saludos
Publicado en
... OK .-.. el primer ENLACE ahora funciona con el diseño regular, y pude evaluar...
...!... el segundo ENLACE no es válido, por lo que se ignora...!...
...este es mi invento EXTRA para tu primer ENLACE actual:
<script>
//----------INIZIO----K---------------
$( document ).ready(function() { //K>;
/** --- riavvio animazione WebAnimator x WSx5 sulla posizione visibile nello scroll pagina - esclusivo by KolAsim --- **/
//---------------------------------------------------
setTimeout(function(){//K1>;
window.onscroll = function() { scrollH_K()};//onscroll>|<<;
//------------------------------------------
n1=n2=n3=true;
},1000); //K1<<;
}); //K<<;
//-----fK------------
function scrollH_K() { //scrollH_K()>;
hK= window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
if($('#imCell_840').offset().top - $(window).scrollTop() < hK ){//K1>;
waK1();
};//K1<<;
if($('#imCell_831').offset().top - $(window).scrollTop() <= hK ){//K1>;
//n=false;
waK2();
};//K1<<;
if($('#imCell_828').offset().top - $(window).scrollTop() <= hK ){//K1>;
waK3();
};//K1<<;
}; //scrollH_K()<<;
//---------fK----------------
function waK1(){//waK1()>;
if(n1==true) {//K1>;
(function(IWA) {
IWA.openDoc('imObjectAnimation_1420_840/imObjectAnimation_1420_840_yoRuutbV/Sombra modulo.js', 'imObjectAnimation_1420_840_stage');})(AtomiSaola);
n1=false;
};//K1<<;
};//waK1()<<;
//---------fK----------------
function waK2(){//waK2()>;
if(n2==true) {//K1>;
(function(IWA) {
IWA.openDoc('imObjectAnimation_1420_831/imObjectAnimation_1420_831_aqFyUPZm/Sombreado total y sombreado parcial.js', 'imObjectAnimation_1420_831_stage');})(AtomiSaola);
n2=false;
};//K1<<;
};//waK2()<<;
//---------fK----------------
function waK3(){//waK3()>;
if(n3==true) {//K1>;
(function(IWA) {
IWA.openDoc('imObjectAnimation_1420_828/imObjectAnimation_1420_828_sjvecIGD/Sombras.js', 'imObjectAnimation_1420_828_stage');})(AtomiSaola);
n3=false;
};//K1<<;
};//waK3()<<;
//----------FINE----K---------------
</script>
.
ciao
.
... mi código necesita ser pegado en las Propiedades de esa Página, exactamente en esta sección:
>> Paso 3 - Mapa > Ventana 'Propiedades de la página' > Las opciones de la sección Avanzado >
▪Código personalizado: > Antes del cierre de la etiqueta HEAD
.
...+... si quieres usarlo, este otro invento mío añade el botón RE-PLAY, siempre válido para la misma página actual:
<script>
//----------INIZIO----K---------------
$( document ).ready(function() { //K>;
/** --- pulsante riavvio animazione WebAnimator x WSx5 - esclusivo by KolAsim --- **/
//---------------------------------------
setTimeout(function(){//K1>;
styleK='<style> #imgK1,#imgK2,#imgK3{position:absolute;top:0px;width:30px;left:15px;z-index:100}.imgK:hover{border:solid silver 2px;border-radius:50% }</style>';
$("head").append(styleK)
riavviaK1 = '<img id="imgK1" class="imgK" src="https://www.iconpacks.net/icons/free-icons-7/free-restart-loop-green-arrow-icon-24696.png" title="riavvia animazione" onclick="n1=true;waK1()">';
riavviaK2 = '<img id="imgK2" class="imgK" src="https://www.iconpacks.net/icons/free-icons-7/free-restart-loop-green-arrow-icon-24696.png" title="riavvia animazione" onclick="n2=true;waK2()">';
riavviaK3 = '<img id="imgK3" class="imgK" src="https://www.iconpacks.net/icons/free-icons-7/free-restart-loop-green-arrow-icon-24696.png" title="riavvia animazione" onclick="n3=true;waK3()">';
$("#imCell_840").prepend(riavviaK1)
$("#imCell_831").prepend(riavviaK2)
$("#imCell_828").prepend(riavviaK3)
},1000); //K1<<;
}); //K<<;
//----------FINE----K---------------
</script>
.
...como IDEA, podría ser mucho más sencillo, pero valdría la pena intentar, hacer las animaciones en páginas ocultas, con la opción sin aplicar la plantilla...
...y en la pagina principal, en lugar de poner la animación, poner un código IFRAME que importe la animación de la página oculta...
...con mi código EXTRA al desplazarte por la página podrías hacer que el contenido del IFRAME se recargue...
.
Autor
Buenos dias Kolasim
Mil gracias por tu tiempo y la verdad estoy muy agradecico. Voy a mirar porque en mi caso observo como dos animaciones superpuestas. Mirare con detalle el codigo para ver si requiero ajustar. Pero funciona perfectamente.
Nuevamente te agradezco esta dedicacion tuya.
Saludos
Jerome
... OK ... ciao ...
Muy bueno lo de hacer esto! ya lo he hecho en algun caso y hace que algunas cosas tambien sean mucho mas simples, como que si tenemos un bloque de texto que va en muchas paginas, o contenido de cualquier tipo que va en muchas paginas, lo hacemos en una oculta, que si hay que modificarlo luego se modifica solo en ese lugar, y llamando a esa pagina con un iframe, ya cambian todas automaticamente.
Saludos colegas!
Carlos A.
Autor
Si la verdad es una super idea. Hago estas cosas y os comento. Nuevamente gracias