Weil mir gestern Abend langweilig war, habe ich mich damit beschäftigt den Parallax Effekt versuchsweise in JavaScript umzusetzen. Als Bibliotheken verwende ich dabei PrototypeJS und Scriptaculous. Nachdem ich mit einem Grafikprogramm meine 3 Layer gezeichnet und PNGs mit Transparenz exportiert hatte, ging es an die Umsetzung. Schnell wurde mir klar, wie simpel es im Grunde ist mit ein wenig CSS und JavaScript diesen Effekt zu erzeugen.

Das HTML Grundgerüst besteht lediglich aus 3 DIV Layern:

<div id="layer_bg">
	<div id="layer2">
		<div id="layer1">
		</div>
	</div>
</div>

Auf diese DIVs werden ein paar einfache CSS Regeln angewendet, um die Hintergrundgrafiken zu setzen. Zudem wird noch die Breite und Höhe definiert und der “overflow” auf “hidden” gesetzt. So wird es möglich per CSS Anweisung “background-position” den Hintergrund, also unseren Parallax-Layer, zu verschieben und einen Scroll-Effekt zu realisieren.

#layer_bg {
	border:10px solid #FFF;
	width:1150px;
	height:400px;
	margin:auto auto;
	background-image:url( 'layer_bg.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	overflow:hidden;
}
#layer1 {
	background-image:url( 'layer1.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	width:1150px;
	height:400px;
	overflow:hidden;
}
#layer2 {
	background-image:url( 'layer2.png' );
	background-repeat:repeat-x;
	background-position:0px 0px;
	width:1150px;
	height:400px;
	overflow:hidden;
}

Die Bewegung der Hintergrundgrafiken übernimmt eine kleine JavaScript-Funktion, an welche die Art der Bewegung übergeben wird.

var position_index1 = 0;
var position_index2 = 0;
var position_index3 = 0;
var effect_running = false;
function run_effect( $move_type )
{
	if( !effect_running )
	{
		effect_running = true;
		if( $move_type == 'move_left' )
		{
			position_index3 += 200;
			position_index2 += 200;
			position_index1 += 200;
		}
		if( $move_type == 'move_right' )
		{
			position_index1 -= 200;
			position_index2 -= 200;
			position_index3 -= 200;
		}
		if( $move_type == 'rotate_left' )
		{
			position_index3 += 200;
			position_index2 += 50;
			position_index1 -= 200;
		}
		if( $move_type == 'rotate_right' )
		{
			position_index3 -= 200;
			position_index2 -= 50;
			position_index1 += 200;
		}
		new Effect.Morph( 'layer_bg', { style:'background-position:' + (position_index3 * 1) + 'px 0px;' } );
		new Effect.Morph( 'layer2', { style:'background-position:' + (position_index2 * 2) + 'px 0px;' } );
		new Effect.Morph( 'layer1', { style:'background-position:' + (position_index1 * 3) + 'px 0px;', afterFinish:function() { effect_running = false; } } );
	}
}

Bei Eintritt in die Funktion wir zuerst geprüft, ob eine Bewegung nicht bereits läuft, falls das nicht der Fall ist, werden für die unterschiedlichen Bewegungs-Arten die neuen Werte für die Hintergrund-Position des Hintergrundbildes berechnet und anschließend mit dem Effekt “Morph” gesetzt. Je näher der Layer an der “Kamera” ist, um so mehr (schneller) wird er bewegt, wodurch dem Betrachter eine dritte Dimension vorgegaukelt wird.

Wer das vollendete Versuchsobjekt betrachten möchte, der kann das nun gerne tun und noch einen Blick in den Quellcode der Seite werfen. Ich habe den Code noch um einige Kleinigkeiten erweitert, z.B. um die Steuerung per Pfeiltasten.

Natürlich ist das mal wieder sinnloses eyecandy, denkbar wäre aber, ein schickes Menü damit zu realisieren.

Vorteil der Lösung: Wenn ein Fehler auftritt, oder im Browser kein JavaScript aktiviert ist, dann funktioniert die Seite ganz normal, was nebenbei auch sehr Suchmaschinen freundlich ist.

Die erste Funktion “fixLinks” die ich nutze, hat den Zweck an alle Links, die nicht bestimmten Kriterien entsprechen – z.B. Links auf Bilder, externe Links oder aber Links in WordPress Backend – eine “onclick” Aktion anzufügen. Die neue “onclick” Aktion des Links ruft dann die zweite Funktion “get_page” auf, welche die Seite läd und mit einem netten Effekt dann anzeigt.

function fixLinks()
{
	var myLinks = document.links;
	var myBrowserType = (window.attachEvent ? 1 : (window.addEventListener ? 2 : 0));
	var myDomain = 'thegeek.de';
	for( var i = 0; i < myLinks.length; i++ )
	{
		// Get the href
		myHref = myLinks[i].href.toString();
		// Get the onclick action
		myOnClick = myLinks[i].onclick ? myLinks[i].onclick : '';
		// Only attack onclick action, if not jscript links, images, wp-admin features and internal link
		if( 	myOnClick == ''
			&& myHref.indexOf( "#" ) != (myHref.length - 1)
			&& myHref.indexOf( "javascript:" ) == -1
			&& myHref.indexOf( "wp-admin" ) == -1
			&& myHref.indexOf( "#respond" ) == -1
			&& myHref.indexOf( "/trackback" ) == -1
			&& myHref.indexOf( "/feed" ) == -1
			&& myHref.indexOf( "/wp-login" ) == -1
			&& myHref.indexOf( ".jpg" ) == -1
			&& myHref.indexOf( ".gif" ) == -1
			&& myHref.indexOf( ".png" ) == -1
			&& myHref.indexOf( myDomain) != -1
		)
		{
			switch( myBrowserType )
			{
				case 1:
					Event.observe( myLinks[i], 'click', function( e ) { if( !get_page( this.href ) ) e.stop(); } );
					break;
				case 2:
					myLinks[i].setAttribute( "onclick", "return get_page( this.href );" );
					break;
				default:
					// Do nothing
			}
		}
	}
}
// body onload="fixLinks()" und die Sache läuft. :-)

Die zweite Funktion bewegt zuerst den Inhalt an die beim Init ermittelt Position außerhalb des Bildschirms und läd dann per asynchronem HTTP Request die neue Seite. Der Inhalt der Seite ist im Theme mit einem HTML Kommentar gekennzeichnet und wird mittels Regular Expression ermittelt, dann in den Layer eingefügt, um die Seite danach wieder an die ursprüngliche Position zu bewegen. Keine Ahnung, ob's im IE klappt, ist mir allerdings auch ziemlich egal. :-)

Sollte etwas schief gehen, dann gibt die Funktion "true" zurück, womit der Klick auf den Link ganz normal ausgewertet wird. Hat alles geklappt, liefert die Funktion "false" zurück und der Browser folgt dem angeklicktem Link dann nicht. So ist auf jeden Fall gewährleistet, dass die neue Seite angezeigt wird - auf die synchrone oder asynchrone Art.

	var	c_w = $('content').getWidth();
	var	c_x = $('content').viewportOffset()[0];
	var	c_leave = (c_x + c_w) * -1;
	var	c_come = c_leave * -1;
	var	c_search = /()((?:.|[\r\n])*?)()/mgi;
	var	get_page_return_code = false;
	var	effect_running = false;
	function get_page( uri )
	{
		get_page_return_code = false;
		if( effect_running == false )
		{
			effect_running = true;
			new Effect.Move( 'content', { x: c_leave, y: 0, mode: 'relative', duration:0.5,
				afterFinish:function() {
					new Ajax.Request(	uri, {
									method:'get',
									onSuccess: function( r ) {
											$('content').update( '' );
											SearchResult = c_search.exec( r.responseText );
											while( SearchResult != null )
											{
												if( SearchResult[ 2 ] )
													$('content').update( SearchResult[ 2 ] );
												SearchResult = c_search.exec( r.responseText );
											}
											new Effect.Move( 'content', { x: c_come, y: 0, mode: 'relative', duration:0.5, afterFinish:function () {effect_running = false;} } );
											fixLinks();
									},
									onFailure: function( r ) {
										get_page_return_code = true;
										effect_running = false;
									}
					});
				}
			});
		}
		return get_page_return_code;
	}

Klar handelt es sich hier um ziemliches sinnfreies Eyecandy. Ich mag Eyecandy.