Código JavaScript la plantilla HTML
He utilizado el editor de fórmulas en modo JavaScript para que podamos usar íntegramente el código JavaScript sin problemas con las comillas, disponemos además del tipo de letra con espaciado fijo.
function codigo() {
// Para preparar el código usar Notepad++ -> buscar \r\n y sustituir por \\n\\\n\t
// Marcador es <<CODIGO_PLANTILLA>>
return '<!DOCTYPE html>\n\
<html>\n\
<head>\n\
<title></title>\n\
\n\
<!-- Librería API para la gestión de elementos SVG -->\n\
<script src="' + theRegister.clientCachePath() + 'snap.svg-min.js"></script>\n\
<!-- ListaCoposNombres.js carga el Array aListaCoposNombres para las pruebas -->\n\
<script src="ListaCoposNombres.js"></script>\n\
\n\
<style>\n\
html, body {\n\
margin: 0;\n\
padding: 0;\n\
height: 100%;\n\
}\n\
#marco {\n\
width: 800px;\n\
height: 533px;\n\
top: 50%;\n\
left: 50%;\n\
margin-top: -265px;\n\
margin-left: -400px;\n\
position: absolute;\n\
border: 1px solid black;\n\
}\n\
#postal {\n\
}\n\
#nevando {\n\
/* Anclamos la postal en un punto fijo. De esta forma el Canvas SVG se coloca encima */\n\
position: absolute;\n\
left: 0px;\n\
top: 0px;\n\
}\n\
</style>\n\
\n\
<script>\n\
window.onload = function(){\n\
var nAncho = 800\n\
var nAlto = 533\n\
\n\
//////////////////// ELEMENTOS SVG //////////////////////\n\
var oNombres = Snap(postal_svg)\n\
// Añadimos la postal de fondo\n\
var oFondo = oNombres.image("' + theRegister.clientCachePath() + 'postal.jpg",0,0,nAncho,nAlto)\n\
\n\
/////////// DESTELLOS\n\
// Repetimos el brillo cada 3seg\n\
// Destello para mostrarlo con un Intérvalo\n\
var oBrillo = oNombres.path("m 470,260 -29.30365,-8.52303 20.59819,50.04671 -23.1682,-49.66028 -18.09986,9.3926 15.97415,-11.7243 -26.50127,-45.56446 28.62139,44.40654 22.11748,-12.5006 -19.53642,13.53327 z").attr({id:"brillo",style:"stroke:none;stroke-width:0px;fill:white;fill-opacity:0;"})\n\
var cgx = oBrillo.getBBox().cx;\n\
var cgy = oBrillo.getBBox().cy;\n\
brillo();\n\
setInterval(brillo, 3000);\n\
\n\
function brillo() {\n\
// Brillo. Movemos un poco el destello a lo largo de x,y\n\
animateBrillo(oBrillo,cgx,cgy)\n\
}\n\
\n\
function animateBrillo(oBrillo,cgx,cgy) {\n\
// oBrillo.attr({"fill-opacity":1})\n\
// Mostramos el brillo\n\
var nGiro = getRandomArbitrary(0,360)\n\
oBrillo.animate({"fill-opacity":1, "transform":"r" + nGiro + " " + cgx + " " + cgy\n\
},100,mina.bounce,function(){oBrillo.attr({"fill-opacity":0})})\n\
}\n\
\n\
// Código que define el Array de nombres aListaCoposNombres desde la tabla de Velneo\n\
// <<CODIGO_PLANTILLA>>\n\
\n\
//////////////////// NOMBRES CAYENDO CON SVG /////////////////////\n\
// Valores inicial y final del rango de nombres seleccionados\n\
var nIni = 0, nFin = 0\n\
// Creamos un grupo para los nombres\n\
var oGrupoNombres = oNombres.g()\n\
// Estilo del texto para los Nombres que vuelan\n\
var cEstiloEtiqueta = "text-anchor:middle; font:bold 14px Arial; fill:Orange;"\n\
\n\
var nNumNombres = aListaCoposNombres.length\n\
// Número de nombres que vuelan cada vez\n\
// Si el Número nInc es grande la animación se ralentiza\n\
var nInc = 6\n\
// Lista de Nombres cayendo y girando\n\
///// NO USAMOS SVG CON MUCHOS NOMBRES PORQUE ES LENTO\n\
///// FUNCIONA MEJOR CON EL CANVAS\n\
// listanombres();\n\
\n\
function listanombres() {\n\
// Límite superior del rango seleccionado\n\
nFin = (nIni + nInc)\n\
if (nFin > nNumNombres) {nFin = nNumNombres}\n\
for (var i=nIni; i<nFin; i++) {\n\
var copoId = aListaCoposNombres[i].id;\n\
// Añadimos el nombre en una posición x aleatoria\n\
var cInix = getRandomArbitrary(50,750)\n\
var oNombreCopo = oNombres.text(cInix,10,aListaCoposNombres[i].nombre).attr({style:cEstiloEtiqueta});\n\
// oGrupoNombres.add(oNombreCopo)\n\
// Coordenadas iniciales\n\
var cx = oNombreCopo.getBBox().cx;\n\
var cy = oNombreCopo.getBBox().cy;\n\
// Define la animación infinita\n\
animateNombreCopo(oNombreCopo, cx, cy);\n\
}\n\
// Seleccionamos el siguiente rango de Nombres\n\
nIni = (nIni >= (nNumNombres - nInc)) ? 0 : (nIni + nInc + 1)\n\
// Repetimos para el siguiente rango de Nombres\n\
setTimeout(listanombres,getRandomArbitrary(5000,8000))\n\
}\n\
\n\
function animateNombreCopo(oNombreCopo, cx, cy) {\n\
// Ocultamos el nombre inicialmente\n\
dy = 50 + getRandomArbitrary(0,20)\n\
oNombreCopo.attr({ transform: "t0 -" + dy});\n\
// Tiempo de Transicción aleatoria\n\
var timing = getRandomArbitrary(5000,10000);\n\
// Rotación aleatoria\n\
var deg = getRandomArbitrary(-360,360);\n\
// Desplazamiento X\n\
var dx = getRandomArbitrary(-200,200)\n\
// Anima el oNombreCopo y reinicia la Animación una vez terminada\n\
oNombreCopo.stop().animate({\n\
// Desplazar dx en horizontal y 600 en vertical (tx,y)\n\
// Girar deg grados respecto a las coordenadas del Nombre (rdeg x y)\n\
// El oNombreCopo se quita una vez terminada la animación\n\
transform: "t" + dx + " 600 r" + deg + " " + cx + " " + cy}, \n\
timing,function(){oNombreCopo.remove()});\n\
}\n\
\n\
// Número aleatorio dentro de un rango\n\
function getRandomArbitrary(min, max) {\n\
return Math.random() * (max - min) + min;\n\
}\n\
\n\
////////////////////////////// NEVADA CON CANVAS ////////////////////////////\n\
// Tenemos un Array de Copos de nieve con los datos x,y tamaño\n\
// Pintamos todo el Array con dibujar() y a continuación recalculamos x,y y el tamaño con nevar()\n\
// Repetimos este ciclo n-veces por segundo 1000/fps\n\
\n\
// Obtenemos el canvas\n\
var canvas = document.getElementById("canvas");\n\
var ctx = canvas.getContext("2d");\n\
// Atributos Nieve\n\
var tc = 1000; // Total de copos de nieve\n\
// Tenemos una lista de Nombres que asignamos a los copos de nieve\n\
var nIncNom = parseInt(tc/nNumNombres); // Cada cuánto asignamos el nombre a un Copo\n\
var tamCopo = 4; // Tamaño maximo de los copos\n\
var tamMin = 2; // Tamaño minimo de los copos\n\
var capas = 5; // Capas distintas en las que caerá la nieve\n\
var fsenx = 0.4; // Balanceo horizontal\n\
var fcosy = 2; // Balanceo vertical\n\
var viento = 1; // Factor viento\n\
var gravedad = 4; // Gravedad\n\
var faleatorio = 100; // Factor de aleatoriedad\n\
var fps = 60;\n\
// Tamaño del Canvas\n\
var W = canvas.width;\n\
var H = canvas.height;\n\
// Array con las propiedades de los copos de nieve\n\
var copos = [];\n\
for(var i = 0; i < tc; i++) {\n\
var cNombrePush = "";\n\
if ((i%nIncNom) == 0 && (parseInt(i/nIncNom) <= (nNumNombres-1))) {\n\
// Este copo será un Nombre\n\
cNombrePush = aListaCoposNombres[i/nIncNom].nombre;\n\
}\n\
copos.push({\n\
n: cNombrePush,\n\
x: Math.random()*W, // x\n\
y: Math.random()*H, // y\n\
t: Math.random()*tamCopo+tamMin, // Tamaño\n\
p: Math.random()*faleatorio\n\
})\n\
}\n\
\n\
function dibujar(){\n\
ctx.clearRect(0, 0, W, H);\n\
ctx.font = "normal bold 12px Arial";\n\
ctx.textAlign = "center";\n\
for(var i = 0; i < tc; i++) {\n\
var p = copos[i];\n\
if (p.n == ""){\n\
// Dibuja un copo de nieve\n\
ctx.fillStyle = "rgba(255, 255, 255, 0.8)";\n\
ctx.beginPath();\n\
ctx.arc(p.x, p.y, p.t/2, 0, 2 * Math.PI, false);\n\
ctx.fill();\n\
ctx.closePath();\n\
// ctx.fillRect(p.x, p.y, p.t, p.t);\n\
}\n\
else {\n\
// Texto como un copo de nieve\n\
ctx.fillStyle = "Orange";\n\
ctx.fillText(p.n, p.x, p.y); \n\
}\n\
}\n\
nevar();\n\
}\n\
// Contador de ciclos realizados util para calcular el seno o coseno del movimiento de los copos\n\
var cnt=0;\n\
// Actualiza la posición de los copos de nieve\n\
function nevar() {\n\
cnt+=0.01;\n\
for(var i = 0; i < tc; i++){\n\
var p = copos[i];\n\
p.x += Math.sin(cnt+ p.p)*fsenx+viento;\n\
p.y += ((Math.cos(cnt+ p.p)+1)*fcosy+ p.t/2)*gravedad/9.8;\n\
if(p.y > H){\n\
copos[i] = {\n\
n: copos[i].n,\n\
x: Math.random()*W, // x\n\
y: -10, //y\n\
t: Math.random()*tamCopo+tamMin, //Tamaño\n\
p: Math.random()*faleatorio\n\
};\n\
}\n\
if(p.y < -10) {\n\
copos[i] = {\n\
n: copos[i].n,\n\
x: Math.random()*W, // x\n\
y: H, // y\n\
t: Math.random()*tamCopo+tamMin, // Tamaño\n\
p: Math.random()*faleatorio\n\
};\n\
}\n\
if(p.x > W){copos[i].x=0;}\n\
if(p.x<0){copos[i].x=W;}\n\
}\n\
}\n\
setInterval(dibujar, 1000/fps);\n\
}\n\
</script>\n\
\n\
</head>\n\
<body>\n\
<div id="marco">\n\
<div id="postal">\n\
<svg id="postal_svg" viewBox="0 0 800 533" preserveAspectRatio="xMidYMin meet">\n\
</div>\n\
<div id="nevando">\n\
<canvas id="canvas" width="800px" height="533px">\n\
</canvas>\n\
</div>\n\
</div>\n\
</svg>\n\
</body>\n\
</html>\n\
'
}
codigo()
Created with the Personal Edition of HelpNDoc: Free Qt Help documentation generator