Einen animierten Cartoon-Roboter mit jQuery bauen

Warum?

Abgesehen davon, dass es eine unterhaltsame Übung ist, welchen Zweck hat so etwas? Keinen, der offensichtlich ist. Es ist so nützlich wie ein Miniaturschiff in einer Flasche. Dennoch hat es einen zugrunde liegenden Zweck. Es könnte jemanden dazu inspirieren, über die wahrgenommenen Grenzen von Webdesignern und Entwicklern hinauszublicken.

Demo ansehen

 

Überblick

Dieses Projekt wurde erstellt, indem mehrere leere divs übereinander geschichtet und transparente PNGs als Hintergrundbilder verwendet wurden.

Die Hintergründe wurden mit einem jQuery-Plugin von Alexander Farkas mit unterschiedlichen Geschwindigkeiten animiert. Dieser Effekt simuliert einen gefälschten 3D-animierten Hintergrund, den sogenannten „Parallax-Effekt“, der aus alten Side-Scrolling-Videospielen stammt.

Der Roboter ist ähnlich wie die Hintergrundanimationsszene aufgebaut, indem mehrere DIVs übereinander geschichtet werden, um die verschiedenen Roboterkonstruktionsteile zu erstellen. Der letzte Schritt war die Animation des Roboters mit etwas jQuery.

Der Markup

<div id="wrapper">
	
  <div id="cloud-01">
  <div id="cloud-02">
  <div id="mountains-03">	
  <div id="ground">
	
  <div id="full-robot">
    <div id="branding"><h1>Robot Head.</h1></div> 
    <div id="content"><p> Robot Chest.</p></div> 
    <div id="sec-content"><p> Robot Pelvis.</p></div> 
    <div id="footer"><p> Robot Legs.</p></div>
  </div>

  </div>
  </div>
  </div>
  </div>

</div>

Die Struktur der divs ähnelt stark unserem Diagramm. Keines der DIVs hat das Breitenattribut angegeben, sodass sie sich erweitern, um die Größe jedes Browserfensters auszufüllen, auf dem sie angezeigt werden. HINWEIS: Alle Bilder, die den Parallax-Hintergrundeffekt erzeugen, sind 9999 Pixel breit. Weit über die Breite jedes üblicherweise verwendeten Computerdisplays oder Fernsehgeräts hinaus. Wir werden CSS verwenden, um die Hintergrundbilder genau dort zu platzieren, wo wir sie in jedem einzelnen Div haben möchten.

Der Stil

Das CSS für dieses Projekt ist genauso einfach wie der Markup.

h1, p { position: absolute; left: -9999px; }

div {position: relative;}

#wrapper { background: #bedfe4 url(../images/sun.png) no-repeat left -30px; border: 5px solid #402309;}

#cloud-01 { background: url(../images/clouds-01.png) no-repeat left -100px; }                                                         
                                                          
#cloud-02 {	background: url(../images/clouds-02.png) no-repeat left top; }

#mountains-03 { background: url(../images/mountain-03.png) no-repeat left bottom; }

#ground { background: url(../images/ground-05.png) no-repeat left bottom; }

#full-robot { width: 271px; }

#branding { 
	background: url(../images/robot-head.png) no-repeat center top;
	width: 271px;
	height: 253px;
	z-index: 4; 
	}

#content {
	background: url(../images/robot-torso.png) no-repeat center top;
	width: 271px;
	height: 164px;
	z-index: 3;
	margin-top: -65px;
	}

#sec-content {
	background: url(../images/robot-hips.png) no-repeat center top;
	width: 271px;
	height: 124px;
	z-index: 2;
	margin-top: -90px;
	}

#footer {
	background: url('../images/robot-legs.png') no-repeat center top;
	width: 271px;
	height: 244px;
	z-index: 1;
	margin-top: -90px;
	}

Absolute Positionierung wird verwendet, um jeden Kopfzeilen- oder Absatztext 9999 Pixel vom Bildschirmrand nach links zu ziehen. Dann deklarieren wir jedes DIV auf der Seite als position: relative. Indem wir alle DIVs als position: relative; deklarieren, haben wir nun die Möglichkeit, die z-index-Eigenschaft zu verwenden, um die natürliche Stapelreihenfolge der Roboter-DIVs umzukehren.

Das jQuery JavaScript

Haftungsausschluss: Das ursprüngliche Skript zur Animation des Roboters war schrecklich. Die guten Leute von coding cyborg waren so freundlich, es aufzuräumen und neu zu schreiben.

$(document).ready(function(){ 
$('#cloud-01').css({backgroundPosition: '0 -80px'});
$('#cloud-02').css({backgroundPosition: '0 -30px'});
$('#mountains-03').css({backgroundPosition: '0 50px'});
$('#trees-04').css({backgroundPosition: '0 50px'});
$('#ground').css({backgroundPosition: 'left bottom'});
$('#branding').css({backgroundPosition: 'center 0'});
$('#content').css({backgroundPosition: 'center 0'});
$('#sec-content').css({backgroundPosition: 'center 0'});
$('#footer').css({backgroundPosition: 'center 0'});
$('#wrapper').css({overflow: "hidden"});

	$('#klicker').click(function(){
		$('#cloud-01').animate({backgroundPosition: '(-500px -80px)'}, 20000);
		$('#cloud-02').animate({backgroundPosition: '(-625px -30px)'}, 20000);
		$('#mountains-03').animate({backgroundPosition: '(-2500px 50px)'}, 20000);
		$('#ground').animate({backgroundPosition: '(-5000px bottom)'}, 20000);
	
	startHim();
	
	$("#full-robot").animate({left:"50%",marginLeft:"-150px"}, 2000);
	setTimeout("leaveScreen()",15000);
	});
		
});

var num = 1;

function startHim(){
	num++;
	$("#sec-content").animate({top:"-=5px"},150).animate({top:"+=5px"},150);
	$("#content,#branding").animate({top:"-="+num+"px"},150).animate({top:"+="+num+"px"},150);
	if(num<4){
		setTimeout("startHim()",300);
	} else {
		setTimeout("bounceHim()",300);
	}
}
	
function bounceHim(){
	$("#sec-content,#branding").animate({top:"-=4px"},150).animate({top:"+=4px"},150);
		$("#content").animate({top:"-=8px"},150).animate({top:"+=8px"},150);
	setTimeout("bounceHim()",300);
}
	
function leaveScreen(){
	$("#full-robot").animate({left:"100%",marginLeft:"0px"}, 2000);
}

Wir beginnen damit, die ursprüngliche Hintergrundposition aller Bilder neu zu bestätigen.

Beim Klicken auf das Div „#klicker“ weist eine Funktion jQuery an, die Hintergründe von ihrer aktuellen Position bis zu den für jedes Div angegebenen Koordinaten zu animieren. Indem wir alle verschiedenen Bildschichten in verschiedene DIVs aufteilen, können wir die Hintergrundelemente mit unterschiedlichen Geschwindigkeiten animieren. Das Bewegen der Elemente mit unterschiedlichen Geschwindigkeiten erzeugt die Illusion einer dritten Dimension. Wir bewegen die Elemente im Hintergrund viel langsamer als die Elemente im Vordergrund. Beachten Sie bei dieser Animation, dass die Geschwindigkeit der Wolken im Hintergrund langsamer ist als die Geschwindigkeit der Berge. Und die Berge sind langsamer als der Boden, der am schnellsten von allen ist. Schließlich, nachdem all diese Befehle zum Bewegen des Hintergrunds ausgelöst wurden, ruft die Funktion „#klicker“ die Funktion „startHim()“ auf.

Die Funktion „startHim()“ startet, Sie haben es erraten, unseren Roboter. Er beginnt sein kleines Hüpfen und bewegt sich zur Mitte des #wrapper-Divs. Die Funktion „startHim()“ ruft die Funktion „bounceHim()“ auf. Und dann läuft sie immer wieder im Kreis.

Wir müssen dafür sorgen, dass der Roboter aussieht, als würde er auf einer holprigen Wüstenstraße hüpfen. Um diesen hüpfenden, unregelmäßigen Effekt zu erzielen, verwenden wir die Funktion „bounceHim()“. Sie zielt auf die einzelnen Roboterd-DIVs und „hüpft“ sie 5 Pixel nach oben und dann 5 Pixel nach unten. Das reicht jedoch nicht aus; all die verschiedenen Teile des Roboters, die sich mit der gleichen Rate bewegen, sehen zu steif aus. Wir müssen es etwas zufälliger und interessanter aussehen lassen. Also nehmen wir das Div, das den Brustbereich des Roboters ausmacht, und bewegen es mit einer anderen Rate als die Kopf- und Beckenbereiche. Wir lassen den Brustteil mit 8 Pixeln nach oben und 8 Pixeln nach unten „hüpfen“. Dies verleiht dem Roboter einen schönen, ungleichmäßigen Hüpfeffekt.

Die Funktion „leaveScreen()“ ist die letzte aufgerufene Funktion. Nach 15 Sekunden (15000) bewegt sie den Roboter 100 % vom Bildschirm nach links, was den Roboter folglich nach rechts vom Bildschirm bewegt.

Anthony Calzadilla ist ein unabhängiger Webdesigner aus Miami, FL. USA.

Anmerkung von Chris

Ich halte das für ein extrem cooles Experiment. Ich würde sagen, für die meisten Benutzer ist das Endergebnis von Flash nicht zu unterscheiden. Dennoch sind die Vorteile gegenüber Flash enorm. Jedes Animationsstück ist separat und kann einfach geändert/ersetzt werden. Anpassungen am Animationsstil können mit Zahlen innerhalb der JavaScript-Datei selbst vorgenommen werden, anstatt ein ursprüngliches Flash-Dokument ändern und eine neue Version neu exportieren/hochladen zu müssen.