Blog

Moin moin Frontendler und alle, die es werden wollen!

In HTML5 ist CSS3 nicht mehr weg zudenken und allen Web-Entwicklern sind die Eigenschaften "box-shadow" und "text-shadow" ein Begriff. An der Stelle greift die kleine javascript library "shine.js" ein, die ich euch heute vorstellen möchte. Mit der library kann man noch realistischere Schatten erzeugen als es mit puren CSS3 vorher möglich war. Shine.js funktioniert in allen gängigen Browsern, die mit den CSS3 Eigenschaften "box-shadow" und "text-shadow" zurechtkommen. Darüber hinaus kommt diese kleine library ohne jQuery oder ein anderes bekanntes Javascript-Framework aus.

Schauen wir uns mal an, wie wir shine.js einsetzen:

Zunächst erzeugen wir eine Konfigurations-Instanz aus "shinejs.Config()". Dort werden die Eigenschaften "numSteps", "opacitiy", "blur" und "shadowRGB" definiert, wobei "numSteps" für die Komplexität, "opacity" für die Deckkraft, "blur" für die Unschärfe, "offset" für den Versatz und "shadowRGB" für die Farbe zuständig sind.

var config = new shinejs.Config({
	numSteps: 10,
	opacity: 1,
	blur: 80,
	offset: .5,
	shadowRGB: new shinejs.Color(75, 75, 75)
});

var shine = new shinejs.Shine(document.getElementById('target'), config);

Hier wird die Konfiguration und das Element mit der id "target" dem Shine-Objekt übergeben. Jeder Schatten kann eine individuelle Lichtquelle haben. Dafür müssen die Eigenschaften "position.x" und "position.y" gesetzt werden. Mit der Funktion "draw()" wird der Schatten gezeichnet. Bei diesem Beispiel habe ich die Lichtquelle an das "mousemove" Event gehängt, sodass der Schatten dynamisch anhand der Maus-Position erzeugt wird.

function handleMouseMove(event) {
	shine.light.position.x = event.clientX;
	shine.light.position.y = event.clientY;
	shine.draw();
}

window.addEventListener('mousemove', handleMouseMove, false);

Die kleine library könnt ihr hier herunterladen.

Hier habe ich euch eine Live-Demo mit JSFIDDLE verlinkt.