Icônes animées qui tombent sur l'OPAC

Icônes animées qui tombent sur l'OPAC

Bonjour à tous,

1ère astuce pour le temps des fêtes : comment ajouter de la neige qui tombe sur votre OPAC ?

Tous vos usagers vont adorer ça, si si !

Alors il suffit de copier/coller le code suivant et de l’inscrire dans la 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 :-) )

  1. //neige sur opac
snow_img = "https://desk.zoho.com/DocsDisplay?zgId=682241679&mode=inline&blockId=8l6qmfd42b4ae457647e7b98500a5b88f6ec6";
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 neige
    
Notes
Si vous souhaitez changer l'image du flocon, vous pouvez utiliser les urls suivants et changer l'url dans la ligne
snow_img =
Info
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.


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, il faut modifier le "15" dans la ligne de code suivante :
Quote
snow_no = 15;
(Il s'agit de la 2e ligne de code)
Augmenter le nombre permet d'obtenir plus d'icône tombantes, diminuer le nombre en met moins.

Vitesse de chute

Il est possible aussi d'augmenter ou diminuer la vitesse de chute des icônes. Pour ce faire, il faut modifier le "10" dans la ligne de code suivante : 
Quote
snow_time = setTimeout("SnowStart()", 10);
(Il s'agit de l'avant-dernière ligne de code)
Augmenter le nombre fera ralentir la chute des icônes, diminuer le nombre accélèrera la chute.


    • Related Articles

    • Obtenir des statistiques sur la consultation sur place des documents

      Avec Koha, il est possible d'obtenir des statistiques de consultation sur place des documents de la bibliothèque. Dans le système, on fait référence à ces statistiques comme de la consultation en usage local. L'article suivant détaillera les deux ...

    • Code CSS pour l’OPAC

      L'article suivant présente des codes CSS pouvant être utilisés pour personnaliser l'OPAC. 0. Configurations 0.1 Préférence OPACUserCSS Il faut ajouter les codes dans la préférence système OPACUserCSS. Les changements effectués par ces codes seront ...

    • Code javascript pour l’OPAC

      L'article suivant présente des codes Javascript pouvant être utilisés pour personnaliser l'OPAC. 0. Configurations 0.1 Préférence OPACUserJS Il faut ajouter les codes dans la préférence système OPACUserJS. Les changements effectués par ces codes ...

    • Commenter et noter les documents à l’Opac

      Commenter les documents à l'Opac Vous pouvez permettre aux usagers de commenter des documents à l’Opac. Il y a 4 préférences systèmes qui permettent de paramétrer le tout : OpacShowRecentComments OPACComments ShowReviewer ShowReviewerPhoto Pour ...

    • Réinitialisation du mot de passe via l’OPAC

      1. Réinitialiser le mot de passe d’un compte via l’OPAC. Pour autoriser les utilisateurs à modifier leur mot de passe via l’OPAC, il faut paramétrer les préférences système OpacPasswordChange et OpacResetPassword. Pour pouvoir modifier le mot de ...