jQuery und Raketen

…fly me to the moon

Henning über Webdesign

jQuery – The Write Less, Do More, JavaScript Library — so sagt es die Website von jquery.com (1). Das JavaScript-Framework erfreut sich nicht umsonst großer Beliebtheit und ermöglicht es mit nur ein paar Zeilen Code Erstaunliches zu realisieren. In dem nachfolgenden kleinen Beispiel möchte ich zeigen, dass die Aussage „jQuery is not rocket sience!“ nicht ganz der Wahrheit entspricht, da nämlich im Rahmen dieses Posts eine Rakete starten wird.

jQuery Rakete Teil 1

Was braucht man dazu? Zunächst einmal die Bestandteile der Rakete — und diese sind: „>,>,R,a,k,e,t,e,>,-,-,-„. Und weiterhin ist auch noch ein Areal nötig in dem die Rakete starten kann. Diese „Zutaten“ müssen mit ein wenig gängigem CSS und später auch noch etwas CSS3 aufbereitet werden.

HTML-Struktur & CSS

Los geht’s mit der HTML-Struktur. Folgendes Konstrukt wird die Basis für die kommenden Raketenexperimente:


<div id="demo">
   <div id="area51">
        <div id="rakete">&gt;&gt;Raktete&gt;---</div>
   </div>
</div>

Ohne das Zutun von CSS sieht der Weltraumbahnhof noch etwas ärmlich aus. Zuerst kommt die area51 an die Reihe. Der nachfolgende CSS-Code weist dem DIV eine feste Breite und Höhe zu und umrahmt den Container mit einer 1px dicken Linie. Weiterhin werden ein paar Vorbereitungen zur Positionierung der Rakete und für die Special Effects getroffen.


#area51 {
   width: 300px;
   height: 300px;
   border: 1px solid #000;
   position: relative;
   overflow: hidden;
}

Bis hierher ist noch alles ziemlich straight forward. Im nächsten Schritt wird die Rakete gebaut. Zurzeit liegen die Einzelteile noch ziemlich auf der Seite. Die Rakete muss aufgerichtet und anschließend noch passend positioniert werden. Auch die Form der Rakete soll noch etwas getunt werden. Dazu wird die folgende CSS-Deklaration verwendet:


#rakete {
   color: #000;
   font-size: 16px;
   font-family: Consolas, "Courier New", Courier, monospace;
   text-transform:uppercase;
   display: block;
   position: absolute;
   top: 150px;
   left: 145px;
   width: 150px; 
   height: 150px;
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);
   -o-transform: rotate(-90deg);
   filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

…und so sieht das Ergebnis aus:

Rakete - Stufe 1

Die Rakete bekommt ihre Form durch einen Monotype-Fontstack in Kombination mit einer Uppercase-Texttransformation. Aufgerichtet wird sie durch die Rotations-Anweisungen für Webkit, Mozilla und – sage und schreibe – IE!!! Einer der schönen Filter tut hier seinen Dienst.
Auch Opera (ab 10.50) können wir zum Rotieren bringen. Einen interessanten Artikel zum Thema Textrotation mit CSS findet sich bei snook.ca (2).

Durch die absolute Positionierung des #area51-Containers ist es jetzt möglich die Rakete in Relation zum umgebenden Element absolut zu positionieren. Durch die feste Höhe und die Breite (!!!) von 150px kann der Flugkörper jetzt einfach via top: 150px und left: 145px in der unteren Mitte des Containers platziert werden. Die Breite von 150px ist notwendig, da IE durch die Rotation auch die Symmetrie des Raketen-divs vertauscht und damit die Höhe zur Breite und vice versa wird.
Die Rakete wird über die top-Deklaration am Boden gehalten, da mit dieser CSS-Eigenschaft auch nachher der eigentliche Flug realisiert werden soll. Um Kontrolle über den Raketenstart zu haben wird noch ein „Kontrollzentrum“ hinzugefügt.
Start und Neustart sollen über zwei Buttons eingeleitet werden, die noch an das bisherige HTML-Konstrukt angehängt werden.


<div id="demo">
   <div id="area51">
        <div id="rakete">&gt;&gt;Raktete&gt;---</div>
   </div>
</div>
<button id="launch">Start!</button>
<button id="reset">Erneut Startposition einnehmen!</button>

jQuery Rocketscience

Damit sind die grundlegenden HTML und CSS Arbeiten abgeschlossen. Jetzt geht es an das einfache Scripting. Der Flug der Rakete wird nur über Manipulation der Position des Raketen-DIVs realisiert, d.h durch jQuery-animation() — etwas gepimpt — wird der Raketenstart eingeleitet. Um überhaupt Zugriff auf die jQuery-Funktionalität zu haben muss zuerst das Framework eingebunden werden.


<head>
...
	<style type="text/css">...</style>
	<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
	<script type="text/javascript">
		//hier lassen wir die Rakete starten
	</script>
...
</head>

jQuery hat sich von CSS 1-3 das System der Selektoren „geborgt“ und mit eigenen semantischen Strukturen erweitert. Genau wie in CSS dient dieser Ansatz dazu bestimmte Elemente in unserem HTML-Wald zu adressieren. Einen Einblick in die mannigfaltigen Einsatzformen von jQuery-Selektoren bietet die jQuery API Dokumentation (3).

Was soll passieren? Eine Rakete soll losfliegen, getriggert durch einen Klick auf einen Button. Dann soll die Rakete nochmal „resetet“ werden, um erneut durchstarten zu können, ebenfalls per Knopfdruck. d.h. zu den Selektoren werden noch Event-Handler und Methoden benötigt, die z.B. die CSS-Eigenschaften der Rakete beeinflussen. Der folgende Code erzeugt Eventhandler für das Kontrollzentrum – die beiden Buttons:


<script language="javascript" type="text/javascript">
//EventHandler für den Click-Event
//auf die Buttons #launch und #reset
	
$('#launch').click();
$('#reset').click();
	
</script>

Nachdem die Eventhandler angelegt sind müssen sie noch ihrer Aufgabe zugeteilt werden. Der Start-Button soll die Rakete in höhere Sphären katapultieren. Die Änderung der CSS-Eigenschaft top lässt die Rakete fliegen. Dem Click-Eventhandler wird eine anonyme Funktion zugewiesen, die mittels der jQuery animate() Methode langsam top auf "-300px" setzt.


<script language="javascript" type="text/javascript">
//EventHandler für den Click-Event
//auf die Buttons #launch und #reset
	
$('#launch').click(
   function(){ $(".rakete").animate({"top": "-=300px"}, "slow");}
);
	
</script>

.animate() erlaubt es Animationseffekte zu erstellen basierend auf numerischen CSS-Eigenschaften. Der einzige notwendige Parameter entspricht der Eingabe, die auch der css() Methode übergeben werden kann. Wie bereits erwähnt ist die Auswahl an Properties auf numerische Werte beschränkt.
Die animierten Eigenschaften können auch relativ zum bestehenden Wert berechnet werden. Ein solches Verhalten erzielt man durch Voranstellen von += oder -= vor den nummerischen Wert. Der neue Wert wird dann zum bestehenden addiert bzw. vom momentanen Wert subtrahiert. In obigen Beispiel wird weiterhin der String „slow“ mitgegeben, der die Animationsgeschwindigkeit vorgibt. "slow" und "fast" entsprechen etwa 200 bzw. 600 Millisekunden.
Damit ist die erste Animation schon fertiggestellt. Ein Klick auf den Start-Button lässt die Rakete abheben. Jetzt soll aber noch eine Möglichkeit hinzugefügt werden die Rakete erneut wieder vom Ausgangspunkt starten zu lassen. Der zweite Eventhandler muss erweitert werden.


<script language="javascript" type="text/javascript">
...	
$('#reset').click(function(){ 
   $("#rakete").css({'left':'-200px', 'top':'150px'}); //CSS Method
   $("#rakete").animate({"left": "145px"}, "slow");    //Animate Method
});	
...
</script>

Kurz gesagt wird die Rakete, die aus dem Blickfeld geflogen ist in einem ersten Schritt nach links geschoben und wie der auf den Boden gesetzt und anschließend via animate() wieder in die Ausgangsposition zurück gesetzt.
Das war’s eigentlich schon. Allerdings möchte ich die Gelegenheit nutzen, um an dieser Stelle noch ein wenig CSS3 ins Spiel zu bringen. Dem Raketen-Szenario wird jetzt noch etwas Eye-Candy hinzugefügt.

Dazu wird die #area51 mit einem Gradienten hinterlegt, der den Nachthimmel darstellen soll in den die Rakete abhebt. Dazu wird die CSS-Anweisung des Containers um die nachfolgenden Statements erweitert, bei dem der Hintergrund des div-Containers mit dem Gradienten aufgefüllt wird:


#area51 {
	width: 300px;
	height: 300px;
	border: 1px solid #000;
	position: relative;
	overflow: hidden;
	filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#000000', EndColorStr='#0B1466', GradientType=0);
	background-image: -webkit-gradient(linear, 0% 19%, 0% 100%, from(#000000), to(#0B1466));
	background-image: -moz-linear-gradient(19% 75% 90deg,#0B1466, #000000);
}

Anstatt eine „images“ im echten Sinne wird ein generierter Verlauf zugewiesen, der bei Mozilla (4) und Webkit (5) eine unterschiedliche Syntax hat:


-moz-linear-gradient([<point> || <angle>,]? <stop>,<stop> [,<stop>]*)
-webkit-gradient(<type>,<point> [,<radius>]?,<point> [,<radius>]? [,<stop>]*)

/* ...und für IE... */

filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=n, 
         startColorstr=<color>, 
         endColorstr=<color>)";


/* bzw.*/

-ms-filter:"progid:DXImageTransform.Microsoft.gradient(GradientType=n,
            startColorstr=<color>, 
            endColorstr=<color>)";

Ein interessanter Artikel zu diesem Thema findet sich unter CSS-Tricks (6). Damit auch IE mitspielt ist sogenannte Trident Syntax notwendig, um den gleichen Effekt zu erreichen.

Rakete mit CSS-Gradient

Nachdem der Verlauf zugewiesen ist muss noch die Rakete etwas aufgehellt werden. Dazu wird einfach die color-Property auf Weiß (#fff) gesetzt und fertig.

Fazit und Demo

Die passende Demo zu diesem Tutorial findet sich hier: Demo

Es hat sich gezeigt, dass man mit sehr wenig Script, einigen CSS-Deklarationen und ein wenig HTML schon einen netten Raketenstart, ganz ohne Bilder, zaubern kann. jQuery trägt also seinen Slogan – The Write Less, Do More, JavaScript Library – zu recht. Viel Spaß beim Abwandel des Tutorials oder beim Raketenstarten. Alle Links zum Nachlesen:

Informationen über den Autor

Henning

...ist ein User Interface und User Experience Designer. Nebenbei Frontend Developer für Web-, Desktop- und mobile Plattformen. Mit mehr als 10 Jahren professioneller Projekterfahrung schreibt er zu den Themen Webdesign, -trends und -programmierung – eben fullstack! Follow @kingfries