Raphaël funguje na princípe papiera a vektorových geometrických tvarov. Krásne podporuje animácie a tak sa pomocou tejto knižnice dajú vytvoriť aj veľmi pekné pútače, či mini hry pre vašu stránku, bez toho aby ste museli zabŕdať do Adobe Flash technológie a ActionScript-u.

Pomocou knižnice Raphaël si môžete vytvoriť gadžety, pútače, reklamy, hry a tak spestriť svoju webovú stránku pomocou len niekoľkých riadkov JavaScript-u.

Zájdite navštíviť stránky Raphaël alebo sa zahrajte priamo na interaktívnom deme.

Všetko, čo je nutné urobiť, aby ste na svojich stránkach mohli použiť Raphaël

Bohužiaž Raphaël elementy sa nedajú zobraziť všade. Raphaël vyžaduje akýsi ActiveX prvok vo vašom prehliadači, ktorý je takmer všade dostupný, no napríklad na prehliadačoch v mobilných telefónoch nemusí byť prítomný (napr. v mojej Nokii X6 sa nižšie uvedená ukážka nezobrazí).

Pokiaľ ale vidíte krásne farebné štvorčeky (skúste po nich pobehať myškou) pod týmto odstavcom, tak vo vašom browseri všetko funguje tak ako má.

Stačí do vašej stránky naimportovať Raphaël knižnicu:

<script src="raphael-min.js" type="text/javascript" charset="utf-8"></script>

A potom už len stačí vpísať svojich pár riadkov kódu do zdroja svojej stránky:

<script language="javascript">
window.onload = function () {
	var paper = Raphael("paper", 600, 400);
	var w = 40, h = 40;
	for (var y=0; y<400; y = y+h) {
		for (var x=0; x<600; x = x+w) {
			var c = "hsl("+(x/600)+",1.0"+","+(y/400)+")";
			paper.rect(x, y, w, h, 0)
			.attr({"fill" : c, "stroke" : "#fff", "stroke-width" : "1"})
			.mouseover( function() { 
				this.toFront().animate({scale: "2", r: "15", r: "15"}, 500, "elastic");
			})
			.mouseout( function() {	
				this.animate({scale: "1.0", r: "0", r: "0"}, 300, ">");	
			});
		}
	}
};
</script>

Všimnite si v zdrojovom kóde tejto stránky, že pre zobrazenie vzrokovníkasom potreboval mať na stránke vložený ešte jeden div element, ktorý mi poslúžil ako papier. Tento div element Raphaël nahradí plátnom pre kreslenie SVG grafiky.

Keď sa lepšie pozriete na kód, zistíte, že na celý tento pekný animovaný interaktívny vzorkovník farieb mi postačilo okolo 12 riadkov javascrip kódu. Zvyšok sú už len zátvorky pre čitateľnosť umiestnené kažsdá zvlášť na svojom riadku.

Myslím si, že s knižnicou Raphaël by sa dali urobiť krásne veci, tak koho to zaujalo, nech sa ide trošku pošprtkať na Raphaël stránky (linky som už raz uvádzal, ale dole uvediem znova). Tak sa pri tom dobre zabavte a skúste z toho ničo užitočné vytrieskať.

Zájdite navštíviť stránky Raphaël alebo sa zahrajte priamo na interaktívnom deme.