XML-Ecke

Struktur in den Content!

Web-Design fürs Gyroskop

Ein kleines jQuery-Plugin bringt das Web zum Tanzen: Mit Parallax.js können Bildebenen auf einer Webseite platziert werden, die auf den Lage- und Beschleunigungssensor (Gyroskop) mobiler Geräte reagieren:

Auf dem iPad folgen die Ebenen sehr geschmeidig den Bewegungen des Nutzers. Auf dem Desktop oder Notebook kann der Cursor des Browsers den Effekt simulieren – am besten funktioniert das mit Safari, der Firefox unterstützt das nicht. Das von Matt Wagerfield und Claudio Guglieri entwickelte Open-Source-Tool kann hier heruntergeladen werden.

Die aus der zip-Datei entpackten Ordner werden auf den Server geschickt, die Beispieldatei simple.html im Ordner examples lässt sich dann mit eigenen Bilddaten und Konfigurationen anpassen. Am schnellsten geht das, indem man Motive eines Fotos in unterschiedlichen Ebenen isoliert und dann einzeln speichert.

Die Bilddateien werden in eine HTML-Liste aufgenommen:

<ul class="scene" id="scene" data-calibrate-x="false">
	<li class="layer" data-depth="0.00"><img alt="" src="images/background.jpg" /></li>
	<li class="layer" data-depth="1.00"><img alt="" src="images/orchid_1.png" /></li>
	<li class="layer" data-depth="0.80"><img alt="" src="images/orchid_2.png" /></li>
	<li class="layer" data-depth="0.60"><img alt="" src="images/orchid_3.png" /></li>
	<li class="layer" data-depth="2.40"><img alt="" src="images/orchid_4.png" /></li>
	<li class="layer" data-depth="1.80"><img alt="" src="images/orchid_5.png" /></li>
	<li class="layer" data-depth="0.80"><img alt="" src="images/orchid_6.png" /></li>
</ul>

Das Attribut data-depth gibt die Geschwindigkeit an, mit der das Bild auf die Bewegungen des Nutzers reagieren soll. Der Wert 0.00 lässt ein Bild unbeweglich verharren, je höher der Wert, desto sensibler reagiert ein Bild auf die Bewegung des mobilen Geräts. Zusätzlich kann man in der CSS-Datei die Transparenz der Einzelbilder einstellen:

.layer:nth-child(1) {
opacity: 0.45;
}
.layer:nth-child(2) {
opacity: 0.60;
}
.layer:nth-child(3) {
opacity: 0.90;

Was auf den ersten Blick eine nette Spielerei ist, lässt sich auch für die Steuerung von Web-Anwendungen nutzen. Im iOS 7 will Apple seine Gyroskop-Sensoren für 3D-Effekte einsetzen: Der räumliche Eindruck entsteht, indem Web-Inhalte in Ebenen platziert werden, die dann mit JavaScript unabhängig voneinander gesteuert werden.

Posted in Im Lauf der Zeit | Tagged , | Leave a comment

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>