Icônes animées qui tombent sur votre OPAC
Pour rendre votre catalogue un peu plus festif, il est possible d'ajouter une icône animée qui tombe, tel des citrouilles, des flocons de neige ou des petits coeurs.
1. Code javascript
Il suffit d’inscrire le code suivant au tout début de la préférence système OPACUserJS (même si vous avez une note qui dit de ne rien mettre au-dessus d'une certaine ligne, ce code doit être mis avant). Vous devez modifier le texte en jaune afin qu'il concorde à votre besoin.
//icones animees qui tombent
snow_img = "URL de votre image";
snow_no = 15;
if (typeof(window.pageYOffset) == "number")
{
snow_browser_width = window.innerWidth;
snow_browser_height = window.innerHeight;
}
else if (document.body && (document.body.scrollLeft || document.body.scrollTop))
{
snow_browser_width = document.body.offsetWidth;
snow_browser_height = document.body.offsetHeight;
}
else if (document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop))
{
snow_browser_width = document.documentElement.offsetWidth;
snow_browser_height = document.documentElement.offsetHeight;
}
else
{
snow_browser_width = 500;
snow_browser_height = 500;
}
snow_dx = [];
snow_xp = [];
snow_yp = [];
snow_am = [];
snow_stx = [];
snow_sty = [];
for (i = 0; i < snow_no; i++)
{
snow_dx[i] = 0;
snow_xp[i] = Math.random()*(snow_browser_width-50);
snow_yp[i] = Math.random()*snow_browser_height;
snow_am[i] = Math.random()*20;
snow_stx[i] = 0.02 + Math.random()/10;
snow_sty[i] = 0.7 + Math.random();
if (i > 0) document.write("<\div id=\"snow_flake"+ i +"\" style=\"position:absolute;z-index:"+i+"\"><\img src=\""+snow_img+"\" border=\"0\"><\/div>"); else document.write("<\div id=\"snow_flake0\" style=\"position:absolute;z-index:0\"><a href=\"http://peters1.dk/tools/snow.php/%22 target=\"_blank\"><\img src=\""+snow_img+"\" border=\"0\"></a><\/div>");
}
function SnowStart()
{
for (i = 0; i < snow_no; i++)
{
snow_yp[i] += snow_sty[i];
if (snow_yp[i] > snow_browser_height-50)
{
snow_xp[i] = Math.random()*(snow_browser_width-snow_am[i]-30);
snow_yp[i] = 0;
snow_stx[i] = 0.02 + Math.random()/10;
snow_sty[i] = 0.7 + Math.random();
}
snow_dx[i] += snow_stx[i];
document.getElementById("snow_flake"+i).style.top=snow_yp[i]+"px";
document.getElementById("snow_flake"+i).style.left=snow_xp[i] + snow_am[i]*Math.sin(snow_dx[i])+"px";
}
snow_time = setTimeout("SnowStart()", 10);
}
SnowStart();
//fin icones animees qui tombent
1.1 Choix d'images
Il est possible de choisir une image différente selon la saison ou votre inspiration. Pour ce faire, copier l'URL de l'image désiré dans la section jaune de la 1e ligne de code :
snow_img = "URL de votre image";Image | URL à intégrer dans le code |
Il est également possible d'utiliser n'importe quelle image de votre choix, en autant que le lien soit public et permanent, et que l'icône ait une taille appropriée.
1.2 Nombre d'icônes
Par défaut, le nombre d'icônes est paramétré à 15, mais il est possible d'en ajouter ou d'en retirer. Pour ce faire, modifier la section jaune dans la 2e ligne de code.
snow_no = 15;
Augmenter le nombre permet d'obtenir plus d'icônes tombantes, diminuer le nombre en met moins.
1.3 Vitesse de chute
Il est possible d'augmenter ou diminuer la vitesse de chute des icônes. Pour ce faire, modifier la section dans l'avant-dernière ligne de code.
snow_time = setTimeout("SnowStart()", 10);
Augmenter le nombre fera ralentir la chute des icônes, diminuer le nombre accélèrera la chute.
Article révisé dans la version 25.05.