Jedes Unternehmen hat eine Geschichte, diese wird häufig auf der Unternehmenswebsite dargestellt. Doch wie kann man sich als Unternehmen von anderen abheben und die (potenziellen) Kunden und User ansprechen?
Eine Möglichkeit, um das zu erreichen ist das sogenannte “Scrollytelling”, bei dem Storytelling auf eine interaktive und kreative Ebene gehoben wird. Dem User wird mithilfe von unterschiedlichen Scroll-Techniken eine Geschichte auf eine neue und interessante Art übermittelt.
Einige Beispiele von Scrollytelling auf hohem Niveau:
Um die „Über uns“-Seite des Unternehmens „Cleantaxx“ spannender und interaktiver zu gestalten, kann der User durch die Implementierung von Scrollytelling die Seite selbst steuern. Durch Scrollen wird die Geschichte des Unternehmens erzählt, so dass der User auf die Reise in die Geschichte von Cleantaxx mitgenommen wird und sich ein Bild über das Unternehmen machen kann.
Das Ziel ist es, die Informationen auf interaktive Art zu vermitteln und den User zu ermutigen weiter zu scrollen und ihn zu animieren bis zum Ende dranzubleiben. Dabei sollen die Informationen weiterhin auf eine seriöse Art übermittelt werden.
Aufbau
Der User wird mit einem Intro-Video begrüßt, das er selbst durch Scrollen steuert. Beim Runterscrollen wird das Video abgespielt und durch Hochscrollen kann es wieder zurückgespult werden. Danach erhält der User mit einem kurzen Text die wesentlichen Informationen über das Unternehmen.
Header und Intro
Anschließend beginnt die Unternehmensgeschichte, wobei man auch diese selbst steuert. Beginnend mit dem Jahr 2009 kann der User durch Scrollen die wichtigsten Ereignisse des Unternehmens erscheinen lassen. Auf der Reise durch die Unternehmensgeschichte wird der User von einem grünen Punkt auf der Timeline begleitet. Die blauen Punkte zeigen die wichtigsten Ereignisse im Verlauf der Jahre an, die erscheinen wenn man runterscrollt.
Item auf der Timeline
Code
HTML
Da wir uns auf die Animation konzentrieren wollen und uns nicht mit dem Aufbau einer gesamten Website beschäftigen wollen ist der Header nur beispielhaft als Screenshot im Code eingefügt.
Der Content befindet sich innerhalb des Bodys in div-containern, angefangen mit dem Intro-Video und einem Text in der Mitte des Videos (welcher mithilfe von JavaScript durch scrollen verschwindet).
Nach dem Video folgt ein Block mit einer kurzen Einführung zum Unternehmen und anschließend ist die Timeline platziert. Diese enthält in div-containern mit der Klasse “timeline-item” die Boxen links und rechts vom Zeitstrahl. Auf der Timeline haben wir für jedes timeline-item ein Timeline-Icon erstellt, welches ein wichtiges Ereignis darstellt. Im div “timelineContent” ist für jedes Ereignis die Jahreszahl, ein Bild und ein Text angegeben. Mithilfe der id’s “content1” etc. identifizieren wir im JS-Teil die Boxen, um sie pinnen zu können. Die fadeIn Klassen sind ebenfalls für den JS-Teil wichtig, damit wir die verschiedenen Elemente nacheinander erscheinen lassen können.
<!--Info übers Unternehmen-->
<div class="container">
<div id="info">
<h1>Unternehmen</h1>
<h2> Cleantaxx gehört in der Branche zu den Unternehmen mit der meisten Erfahrung im Bereich der Rußfilterreinigung. Jeden Tag liefern wir eine umweltschonende Alternative zum Neukauf. Trotz der anhaltenden positiven Entwicklung mit dem stetigen Wachstum sind wir ein flexibles, wegweisendes Unternehmen mit flachen Hierarchien geblieben. </h2>
</div>
<div id="timeline">
<!--Box für Jahr 2009-->
<div class="timelineItem">
<div class="timelineIcon2"></div>
<div class="timelineIcon"></div>
<div class="timelineContent" id="content1">
<h2>2009</h2>
<img class="fadeIn" src="https://i.ibb.co/5xRmdw2/benjamin-kleemann-cleantaxx-geschaeftsfuehrer.jpg">
<p class="fadeIn">Benjamin Kleemann gründete im Jahr 2009 nach einem Jahr Marktforschung das Unternehmen Cleantaxx. Geschaffen wurde damit ein unabhängiger Dienstleister für die Reinigung von Dieselpartikelfiltern (DPF). Das Unternehmen bietet seitdem maßgeschneiderte Lösungen für Hersteller, Händler, Werkstätten und Anwender. Gereinigt werden alle Dieselpartikelfilter, herstellerübergreifend vom PKW bis zum Schiff – für alles was mit einem Dieselmotor angetrieben wird. Die Säulen der Cleantaxx-Reinigung bilden eine taggleiche Logistik, eine umfangreiche Prüfung und Dokumentation, sowie eine zertifizierte und schonende Reinigung innerhalb 24 Stunden.
</p>
</div>
</div>
Die beschriebene Vorgehensweise haben wir für jedes Ereignis angewendet. Im Body haben wir außerdem die verschiedenen JS-libraries bzw. Plugins angegeben, die wir verwenden wollen. Abschließend haben wir einen beispielhaften Footer eingefügt.
Um das Layout unserer Webseite zu formatieren, haben wir ein externes CSS-Stylesheet verwendet. Mithilfe des CSS-Stylesheet können wir Bilder, Box, Container, Video, Header, Textkörper, Links und Logogröße, Farbe und Stil, Aussehen und Positionierung der Timeline sowie den Abstand zwischen Elementen steuern und angeben, wie Elemente positioniert und angeordnet werden sollen. Box-sizing, html Seite, Body und Footer
Die gesamte Timeline-Struktur wurde ebenfalls mit CSS erstellt, indem man die Timeline-Breite, Farbe, Länge, Position, Paddings und Margins definiert und die Boxen an den Seiten der Linie anordnet und zwischen den linken und rechten Containern unterscheidet, indem man sie auf eine andere Klasse definiert.
Wir haben auch in den CSS-Dateiklassen definiert, die zu einigen Elementen hinzugefügt werden müssen, um Animationen von JavaScript aus anzuwenden. Zum Beispiel die Klasse “appear”, die hinzugefügt wird, damit die Elemente mit der Klasse eingeblendet werden, indem die Deckkraft des Elements mit Leichtigkeit (Opacity) von 0 auf 1 geändert wird.
Die “appear”-Klasse wird auch Elementen mit der Klasse timelineContent hinzugefügt, um sie mit einem Einblendeffektnach rechts und links und umgekehrt durch Ändern der Deckkraft und der Transformationsachse gleiten zu lassen.
Die gewünschte Funktion in diesem Code besteht darin, das “Timeline content -div” aus der Richtung des Punktes in der Timeline an seinen Platz gleiten zu lassen und den darin enthaltenen Inhalt (das Bild und den Text) erscheinen zu lassen, sobald der Inhalt nach unten gescrollt wurden.
Um diese Funktion in JavaScript zu erreichen, haben wir das IntersectionObserver() “Interface” (eine Art von Objekt) verwendet. Der IntersectionObserver()-Konstruktor erstellt ein neues IntersectionObserver-Objekt und gibt es zurück. Es benötigt zwei Parameter: callback und options (optional).
Callback-Parameter: Eine Funktion, die aufgerufen wird, wenn der Prozentsatz des Zielelements sichtbar ist, einen Schwellenwert” threshold” überschreitet. Der Callback erhielt als Eingabe zwei Parameter: entries und Observer.
entries: Ein Array von IntersectionObserverEntry-Objekten, von denen jedes einen überschrittenen ” threshold” darstellt und entweder sichtbar wird als der durch diesen ” threshold” angegebene Prozentsatz.
Observer: Der IntersectionObserver, für den der Rückruf aufgerufen wird.
Options-Parameter: Ein optionales Objekt, das den observer anpasst.
rootMargin: Um sicherzustellen, dass es syntaktisch korrekt ist
thresholds: Um sicherzustellen, dass sie alle im Bereich von 0,0 bis einschließlich 1,0 liegen.
In der Callback-Funktion haben wir eine foreach-Schleife definiert, die jeden Eintrag “Entry” durchläuft und prüft, ob der IntersectionObserver schneidet oder nicht. Und um Fehler zu vermeiden, geben wir die Funktion das Befehl “return”, falls sie sich nicht überschneidet. Aber wenn es sich überschneidet, soll die Funktion, die classList (appear) hinzuzufügen, die wir in CSS erstellt haben, die die Elemente erscheinen oder von links und rechts gleiten lässt. Danach haben wir die Funktion erstellt haben nachgerufen mit der (unobserved) Methode, damit die Funktion stoppt, sobald sie ihr definiertes Ziel erreicht.
Und weil die definierten Optionen zu schnell waren, um bemerkt zu werden, haben wir den Schwellenwert auf eins und den rootMargin auf: 0px 0px -50px 0px festgelegt Damit die Animation funktioniert, sobald wir zum Inhalt herunterscrollen.
Schließlich, um die Aktion zum Leben zu erwecken, wir rufen es mit einer ForEach-Schleife auf, die in die definierten Elemente (sliders und Faders) geht. und wendet die definierte Funktion (appearOnScroll und slideOnScroll) mit der Methode Observe an.
• sliders: wählt alle Elemente aus, die die Klasse “.timelineContent” haben • faders: wählt alle Elemente aus, die die Klasse “.fadeIn” haben
//------------------Einsliden Options----------------------
const sliderOptions= {
threshold: 0,
rootMargin: "0px 0px -50px 0px"
};
//------------Observer für von rechts und links------------
const slideOnScroll = new IntersectionObserver(function(
entries,
slideOnScroll
) {
entries.forEach(entry => {
if (!entry.isIntersecting) {
return;
} else {
entry.target.classList.add("appear");
slideOnScroll.unobserve(entry.target);
}
});
},
sliderOptions);
sliders.forEach(slider => {
slideOnScroll.observe(slider);
});
Video-Animation
Um diese Animation umsetzen zu können werden verschiedene Libraries benötigt. Eine davon ist ScrollMagic, welche es ermöglicht auf Scroll zu animieren. Zusätzlich verwenden wir GSAP (genauer gesagt TweenMax), um den Text animieren zu können. Eine sinnvolle Hilfe die wir benutzt haben ist die das debug Plugin von ScrollMagic namens “addIndicators”, welches rechts am Bildschirm Indikatoren für die Trigger einfügt (wie der Name schon sagt).
Um ScrollMagic zu implementieren wird ein Controller im Code benötigt. Anschließend kann man anfangen die verschiedenen Szenen zu erstellen und dem Controller hinzuzufügen, wobei jede Szene ein Teil vom Code ist, den man animieren möchte.
Indikatoren rechts
Die erste Szene beschäftigt sich mit der Animation des Videos. In der Szene gibt es verschiedene Optionen, wie die Dauer (wie viele Pixel soll gescrollt werden), das Trigger-Element (wann soll die Animation starten, wobei 0=oben, 0.5=Mitte, 1=unten) und die Trigger-Hook (wo auf dem Bildschirm soll das Element getriggert werden. Sobald der “Haken” auf das Element trifft, wird es animiert.
Anschließend muss die Szene durch “.addTo(controller);” dem Controller hinzugefügt werden. Um einen Pin zu setzen, damit das Video für die Dauer der Animation haften bleibt verwenden wir “.setPin(intro);”. Hier kann man ebenfalls die Indikatoren für Hook, Start und Ende mithilfe von “.addIndicators();” anzeigen lassen.
const intro = document.querySelector(".intro");
const video = intro.querySelector("video");
const text = intro.querySelector("h1");
//----------------------ScrollMagic-------------------------
const controller = new ScrollMagic.Controller();
//------------------------Szenen----------------------------
//------------------------Video-----------------------------
let scene = new ScrollMagic.Scene({
duration: 5000,
triggerElement: intro,
triggerHook: 0
})
.addIndicators()
.setPin(intro)
.addTo(controller);
Nach allen Szenen animieren wir nun das Video, wozu wir einige Variablen benötigen. Da wir nicht wollen, dass das Video beim scrolleln abgehackt aussieht, programmieren wir einen ease-Effekt. Mithilfe von einem Delay, wird das Video nachdem man aufhört zu scrollen noch kurz weiter abgespielt.
accelamount = ease-Effekt am Ende (das was von den Frames noch übrig ist)
scrollpos = Wo gescrollt wird
delay = Soll aufholen wohin wir scrollen
(Um Sekunden zu erhalten, teilen wir die Scroll-Position durch 1000.) Als letztes setzen wir ein Intervall, in dem wir dem delay das hinzufügen was gescrollt wird und es um 0.1 beschleunigen. Um den ease-Effekt nun zu erhalten geben wir an, dass video.currentTime = delay sein soll.
Um nun den Text zu animieren, sodass dieser nicht die ganze Zeit in der Mitte des Video bleibt, erstellen wir eine neue Szene. In der neuen Szene geben wir erneut an, wie weit gescrollt werden soll, was das Trigger-Element ist und wo die Trigger-Hook sein soll. Um es zu animieren brauchen wir Tweenmax, in dem wir angeben, dass der Text innerhalb von 3 Sekunden von einer opacity (Deckkraft) von 1 zu einer opacity von 0 gehen soll. In der soeben erstellten Szene setzen wir nun noch einen Tween, damit der Text nicht einach nach 3 Sekunden verschwindet, sondern durch scrollen verschwindet.
Damit wir den Content, also die Boxen mit dem Inhalt, anpinnen können, brauchen wir jeweils eine ScrollMagic-Szene pro Box. Wie auch schon bei der Szene des Videos, geben wir die Dauer, das Trigger-Element und die Position der Trigger-Hook an. In diesem Fall wollen wir, dass jede Box für 300 Pixel angepinnt wird (es also trotz scrollen hängen bleibt). In jeder Szene ordnen wir dem Trigger-Element die entsprechende ID zu, sodass die Boxen nacheinander angepinnt werden.
//---------------------Pin Content--------------------------
var scene4 = new ScrollMagic.Scene({
duration: 400,
triggerElement: "#content1",
triggerHook: 0.1
})
.setPin("#content1")
.addIndicators({name: "1 (duration: 400)"})
.addTo(controller);
var scene5 = new ScrollMagic.Scene({
duration: 400,
triggerElement: "#content2",
triggerHook: 0.1
})
.setPin("#content2")
.addIndicators({name: "2 (duration: 400)"})
.addTo(controller);
//-----------------Und so weiter...--------------------
Die gleiche Methode verwenden wir auch, um den grünen Punkt in der Mitte anzupinnen und mitlaufen zu lassen.
//----------------------Pin Punkt---------------------------
var scene3 = new ScrollMagic.Scene({
duration: 6200,
triggerElement: ".timelineContent",
triggerHook: 0.1
})
.setPin(".timelineIcon2")
.addIndicators({name: "Punkt"})
.addTo(controller);
Anmerkung
Das in unserer Animation verwendete Unternehmen Cleantaxx weiß von unserem Projekt, wir haben es jedoch nicht in Zusammenarbeit mit dem Unternehmen erstellt, sondern eigenständig und rein für unsere MM-SYS Abgabe. Wir sind nicht Urheber des Contents, welches wir in der Animation verwendet haben, haben jedoch die Erlaubnis bekommen den Content ihrer Seite zu verwenden. Nach Absprache mit uns dürfte das Unternehmen Cleantaxx die Animation zu eigenen Zwecken verwenden, falls gewünscht.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.
In diesem Tutorial zeigen wir, wie man eine interaktive Animation entwickeln kann. Wir stellen dazu unsere Animation vor und gehen auf das Konzept, Techniken und Besonderheiten der Animation sowie Ausschnitte des Quellcodes ein.
Bei unserer Animation handelt es sich um das kleine, interaktive Spiel “Magic Garten”, durch das sich der User mit Hilfe von Buttons weiter klicken kann. Das Ziel des Spiels ist es, Blumen in einem Garten zu pflanzen und diese wachsen zu lassen. Dabei kann man zwischen drei verschiedenen Arten von Blumen wählen. Außerdem können die Blumen u.a . auch mit Hilfe einer Gießkanne gegossen werden, damit sie weiter wachsen.
Die Idee zu dieser Animation kam dadurch, dass wir, unabhängig von der Person, die es spielt, für jeden User einen interessanten Zeitvertreib für Zwischendurch entwickeln wollten. Vor allem, soll sie aber Kindern Spaß machen. Die Darstellung der Elemente ist im Comic-Stil gehalten und die Hintergrundmusik verstärkt den Spiele-Charakter.
Das Ziel der Animation ist es, den User mit Hilfe von interaktiven Elementen durch die einzelnen Schritte des Spiels zu führen, damit er im Magic Garten die Blumen pflanzen kann. Dazu gibt es einen helfenden Charakter: eine Biene “Maja”, die den User mit hilfreichen Informationen zu den jeweiligen Schritten des Spiels versorgt. Über die interaktiven Buttons gelangt er entweder zum nächsten Schritt des Spiels oder erhält Anweisungen, was im jeweiligen Schritt zu tun ist. Die Anweisungen erscheinen mit Hilfe von visuellen Effekten in einer Sprechblase.
Insgesamt erfüllt die Animation daher zwei Funktionen: Die erste Funktion bezieht sich auf den Inhalt der Animation und ist das Spiel an sich, bei dem der User die Blumen einpflanzen und wachsen lassen soll sowie das Erzählen der Story, indem sich der User durch die einzelnen Szenen klickt. Die zweite Funktion ist die Optik, die den User zum Spielen animieren soll. Dafür wurden Elemente und visuelle Effekte eingebaut, die das Spiel attraktiver gestalten, wie z. B. die Biene, die den User durch das Spiel begleitet und die lachende Sonne, die über den Garten scheint.
Die Animation besteht aus 4 Szenen, die den User vom Intro bis zu den fertig gewachsenen Blumen leiten. Außerdem sind im Spiel auch Entscheidungen für den User eingebaut, die den weiteren Verlauf der Animation bestimmen.
Aufbau der Animation
Die Animation besteht insgesamt aus 4 aufeinander folgenden Szenen:
Erste Szene: Start und Intro
Der erste Teil der Animation ist der Startbildschirm mit dem Titelbild des Spiels. Hier befindet sich der “Play”-Button, über den der User zur ersten Szene gelangt. Zu Beginn erscheint die Biene “Maja”, die sich vorstellt dem User eine kurze Einführung in das Spiel gibt. Anschließend fordert sie ihn dazu auf, mit dem Spiel zu beginnen und Blumen zu pflanzen. Dazu erscheint der Button “Blumen auswählen”, über den der User in die zweite Szene gelangt, um die Art der Blume, die er pflanzen möchte, auszuwählen.
Weiterführender Button zum Auswählen der Blumen
Zweite Szene: Auswählen und Pflanzen von Blumen
Sobald der User auf “Blumen auswählen” geklickt hat, erscheinen drei Beutel mit verschiedenen Blumensamen, die Lieblingsblumen von Maja. Jeder Beutel zeigt auch das Bild der jeweiligen Blume. Fährt der Spieler mit der Maus über die Bilder der Blumen, sagt Maja auch etwas zu der jeweiligen Blumenart über ihre Sprechblase. Unter jedem Beutel gibt es den Button “Auswählen” und mit einem weiteren Klick auf den ausgewählten Beutel beginnt das Einpflanzen. Der Beutel beginnt anschließend, die Samen automatisch im Garten zu pflanzen und es sprießen bereits kleine Pflanzen.
Der User hat die Wahl zwischen drei Blumensorten
Dritte Szene: Blumen gießen und wachsen lassen
Während des Spiels gibt Maja hilfreiche Tipps zum Spielverlauf. In dieser Szene freut sie sich über die eingepflanzten Blumen und macht auf die Gießkanne aufmerksam, mit der der User die Blumen gießen kann, damit sie wachsen. Der User kann sie Gießkanne anklicken, um sie hoch zu heben und mit der Maus anschließend darüber fahren, um mit dem Gießen zu beginnen. Als nächstes gibt Maja den Tipp, die Blumen nun in der Sonne weiter wachsen zu lassen. Dazu kann der User nun auf die Sonne klicken, die daraufhin beginnt, stärker zu scheinen und über das Blumenfeld zu wandern. Anschließend bietet Maja einen Magic Booster an, um die Blumen doppelt so stark wachsen zu lassen. Der User kann hier zwischen “Ja” und “Nein” auswählen. Je nach dem, welche Antwort der User wählt, ändern sich die Animation und die Reaktion von Maja.
Der User wählt beispielhaft Sonnenblumen ausDer User kann die Blumen gießen und durch die Sonne wachsen lassen
Vierte Szene: Outro
In der vierten Szene spielt der User nicht mehr aktiv mit. Maja beginnt mit Hilfe einer Animation über die Blumenwiese zu fliegen. Zum Schluss bedankt sie sich für die Hilfe des Users und schenkt ihm als Dank ein Glas mit Honig. An dieser Stelle ist die Animation beendet und es erscheint der Button “Restart”, wodurch die Seite neu geladen wird und der User wieder zum Intro gelangt.
Schlussszene: Maja bedankt sich für die Hilfe und der User kann das Spiel neu starten
Der Quellcode
Verwendete Programmiersprachen für die Animation sind HTML5, CSS3, JavaScript und jQuery. HTML wird für die Gestaltung sowie den Grundaufbau der Seite und des Spiels genutzt. CSS sorgt für die richtige Positionierung, Style-Anpassungen und mit Hilfe von keyframes auch für die kleine Animationen und visuelle Effekte.
Mit Hilfe von JavaScript werden die Objekte je nach Auswahl der Story-Optionen angezeigt bzw. versteckt, der Text bei den Hover-Effekten geändert, die Auswahl der Blumensorte für den weiteren Verlauf des Spiels gespeichert und die Index-Datei so umgeschrieben, dass sie sich automatisch angepasst hat. Außerdem erscheinen die Objekte durch JavaScript nach bestimmten Zeitangaben für ein optimales Spielerlebnis, wie z. B. die automatische Änderungen des Textes und die Bewegung der Gießkanne nach einigen Sekunden. Die Seite besteht aus drei DIV-Containern: Der erste zeigt die Überschrift “Magic Garten”, der zweite das Spielfeld und der dritte zeigt einen Untertitel.
<body>
<script src="animation.js"></script> <!--Einbindung der JavaScript Datei--> </div>
<div class="header"> <!--Div-Container wird angezeigt nach dem Spielstart--></div>
<div id="animation_feld" class="animation_null"> <!--Hauptbereich: interaktives Spiel--></div>
<div class="biene"> <!--Intro des Spieles und Platziereung der Beiene während des ganzen Spiel--></div> <div class="footer"> <!--Unterbereich mit Autorennamen und versteckte Audio--> </div>
</body>
Beispiel für DIV-Container im Quellcode
Gestaltung von besonderen Elementen
Innerhalb der Animation gibt es verschiedene interaktive Elemente, die sich mit Hilfe von Animationen durch die Szenen bewegen und gewisse Aktionen auslösen.
Die verwendeten Bilder sind im PNG-Format und stammen von Pixabay. Die Überschrift und der Untertitel sowie die fertig gewachsenen Blumen wurden selbst in Photoshop erstellt. Damit die Bilder optimal angezeigt werden, wurde der z-Index verwendet. Dieser unterscheidet sich bei den Bildern der jeweiligen Szenen und man sollte ihn so anpassen, dass Bilder möglichst gut dargestellt werden.
Bewegende Elemente und visuelle Effekte
Maja
Damit Maja dem User durch das Spiel helfen kann, wird sie durch von Keyframes zum Leben erweckt. Mit Hilfe des JavaScript Befehls .show() und .hide() wird sie passend zur jeweiligen Szene eingesetzt bzw. versteckt. Hierbei gibt es drei verschiedene Keyframe Animationen: Zuerst bewegt sich Maja vom Startbildschirm nach unten auf das folgende Bild, sobald der User das Spiel startet. Damit sie ihn mit nützlichen Informationen durch das Spiel führen kann, erhält sie Sprechblasen, die mit Hilfe der Anweisung
nach 5 Sekunden automatisch geändert werden. Die Zeit, nach der sich die Animationen ändern, variiert hier während des Spiels und kann nach Belieben angepasst werden, damit man die Texte gut lesen kann.
/*Biene startet das Gespräch mit dem User*/
setTimeout(function() {
$("#rede_1").css({"visibility": "visible"});
}, 2000);
setTimeout(function() {
$("#text_1").css({"visibility": "visible"});
}, 2500);
});
$("#link_1").on("click", function () {
setTimeout(function() {
$("#text_1").hide();
$("#text_2").css({"visibility": "visible"});
}, 500);
setTimeout(function() {
$("#button_choose").css({"visibility": "visible"});
}, 1500);
});
Einblenden und Verstecken der Sprechblase für Maja
Die zweite Keyframe Animation lässt Maja auf dem nächsten Bild nach oben wirbeln. Diese Animation wird mit Hilfe des Befehls
ausgelöst, sobald der User den Button “Blumen auswählen” anklickt. Hier werden die Texte in der Sprechblase wieder mit dem oben stehenden Befehl angezeigt und geändert (die konkreten Befehle ändern sich etwas je nach Text).
/*Übergang zur Szene #1.2
Start des aktiven Spiels mit Anweisungen an den Spieler
Elemente werden durch Änderungen des Styles angezeigt oder durch
jQuery Funktionen*/
$("#button_choose").on("click", function() {
$("#button_choose").css({"visibility": "hidden"});
$("#choose").hide();
$("#rede_1").css({"visibility": "hidden"});
$("#text_2").hide();
$("#honey_biene").css({"visibility": "hidden"});
$("#honey_biene_2").show();
$("#honey_biene_2").css({"animation-play-state": "running"});
setTimeout(function() {
$("#rede_2").css({"visibility": "visible"});
}, 1700);
setTimeout(function() {
$("#text_3").css({"visibility": "visible"});
}, 2200);
$(".sack").fadeIn(3000);
setTimeout(function() {
$(".blumen_choose").show();
}, 3000);
Visuelle Effekte für Maja
Die dritte Keyframe Animation lässt Maja zum Ende des Spiels über die Blumenwiese fliegen. Mit Hilfe von translateX() bewegt sie sich hin und her und mit scaleX() dreht sie sich während der Animation um, um in die jeweils andere Richtung zu fliegen. Dabei wird das Bild gespiegelt. Ist der Magic Booster nicht ausgewählt, fliegt Maja standardmäßig durch die Eigenschaft animation-iteration-count: 1; einmal Hin und Her. Wenn der Magic Booster ausgewählt ist, dann fliegt sie zweimal Hin und Her. Dies wird mit Hilfe einer if-Anweisung angepasst.
/*Style Eigenschaften für die Biene im Outro.
Die keyframe-Animation für die fliegende Biene. In JS ist die Anpassung je nach
Antwort des Users*/
#biene_fly {
position: absolute;
z-index: 15;
height: 15%;
bottom: 60%;
left: 22%;
display: none;
animation-name: bee_fly;
animation-duration: 5s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: running;
}
@keyframes bee_fly {
0% { transform: translateX(0px) scaleX(-1)}
25% { transform: translateX(380%) scaleX(-1)}
50% { transform: translateX(380%) scaleX(1)}
100% { transform: translateX(-10%) scaleX(-1)}
}
Style-Anpassungen für Maja im Outro
if ($(".plant_small").attr("src")==("media/Magic_Rose.png") || $(".plant_small").attr("src")==("media/Magic_Sunflower.png") || $(".plant_small").attr("src")==("media/Magic_Poppy.png")) {
$("#biene_fly").css({"animation-iteration-count": "2"});
}
if-Anweisung bei der Auswahl des Magic Boosters
Säcke mit Blumensamen
Der Hover-Effekt bei den Blumensäcken wird mit der Anweisung $(“#rose_sack”).mousemove() erzeugt. So ändert sich der Text in der Sprechblase, wenn man mit der Maus über ein bestimmtes Element (in dem Fall ist es die Rose) fährt. Verlässt man mit der Maus diese Stelle wieder, wird der Text mit dem Befehl $(“#rose_sack”).mouseout() wieder automatisch geändert.
/*Information über Blumensorten erscheint, wenn die Maus auf dem Bild ist,
und verschwindet, wenn die Maus weg ist*/
$("#rose_sack").mousemove(function(evt) {
$("#text_3").css({"display":"none"});
$("#text_4").css({"visibility": "visible","display":"block"});
});
$("#rose_sack").mouseout(function(evt) {
$("#text_4").css({"display":"none"});
$("#text_3").css({"display":"block"});
});
$("#sun_sack").mousemove(function(evt) {
$("#text_3").css({"display":"none"});
$("#text_5").css({"visibility": "visible","display":"block"});
});
$("#sun_sack").mouseout(function(evt) {
$("#text_5").css({"display":"none"});
$("#text_3").css({"display":"block"});
});
$("#mohn_sack").mousemove(function(evt) {
$("#text_3").css({"display":"none"});
$("#text_6").css({"visibility": "visible","display":"block"});
});
$("#mohn_sack").mouseout(function(evt) {
$("#text_6").css({"display":"none"});
$("#text_3").css({"display":"block"});
});
Auswahl der Blumensorte mit Hover-Effekt
Nach der Auswahl der Blumesorte verschwinden durch die Anweisungen $(“.sack”).fadeOut(1200); und $(“.blumen_choose”).hide(); die Bilder der Säcke, die nicht ausgewählt wurden und der ausgewählte Sack erscheint in der Mitte.
$(".sack").fadeOut(1200);
$(".blumen_choose").hide();
/*Je nach Auswahl wird der Sack mit der richtigen Blume angezeigt. Animation an sich
ist gleich und startet beim Klick auf jeweiliges Bild*/
switch (blume) {
case "Rose":
setTimeout(function () {
$(".rose").show();
$("#sack_blume_rose").on("click", function () {
$(".sack_blume").css({"animation-play-state": "running"});
$(".oat_raw").css({"animation-play-state": "running"});
setTimeout(function () {
$(".rose").hide();
$("#text_7").css({"display":"none"});
$("#text_8").css({"visibility": "visible","display":"block"});
}, 7200);
})
}, 1500);
break;
Visuelle Effekte für die Blumensäcke
Beim Klick auf den Sack wird die Keyframe Animation aktiviert, wodurch er sich bewegt, um die Blumensamen auf der Wiese zu verteilen. Die Anweisung besteht aus 7 Schritten, in denen translateX(), translateY() und rotate() verwendet werden,sodass er sich zum Verteilen über die Wiese bewegt und dabei auch die Ausrichtung nach links und rechts ändert. Bei der Anweisung für die Blumensamen, die aus dem Sack in die Erde fallen, benutzt man zusätzlich scale(). Nachdem die Animation fertig abgespielt ist und damit die Samen verteilt sind, verschwindet der Sack automatisch.
/*Positionierung und Animation für alle Säcke in der Szene sind gleich*/
.sack_blume {
position:absolute;
top: 50%;
left: 40%;
height: 30%;
z-index: 11;
cursor:pointer;
animation-name: sack_hoch;
animation-duration: 7s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: paused;
}
/*Animation mit mehreren Bewegungen*/
@keyframes sack_hoch {
from { transform: translateX(0px) translateY(0px)}
18% { transform: translateX(-100px) translateY(-250px) rotate(-90deg)}
36% { transform: translateX(-325px) translateY(-130px) rotate(-120deg)}
52% { transform: translateX(100px) translateY(-250px) rotate(-120deg)}
70% { transform: translateX(100px) translateY(-130px) rotate(-120deg)}
88% { transform: translateX(350px) translateY(-250px) rotate(120deg)}
to { transform: translateX(400px) translateY(-130px) rotate(120deg)}
}
Anpassungen für die Animation der Blumensäcke
/*Positionierung und Animation für Blumensamen in der Szene sind gleich
Die Animation wiederholt die Bewegung des Sackes, mit der Ausnahme beim vorletzten
Schritt:
Blumensamen verschwinden und erscheinen am Ende, wänhrend Sack sich umdreht*/
.oat_raw {
position:absolute;
top: 51%;
left: 46%;
height: 10%;
z-index: 12;
animation-name: oat_hoch;
animation-duration: 7s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: paused;
}
/*Animation mit mehreren Bewegungen*/
@keyframes oat_hoch {
from { transform: translateX(0px) translateY(0px)}
18% { transform: translateX(-150px) translateY(-180px) rotate(-90deg)}
36% { transform: translateX(-375px) translateY(-40px) rotate(-120deg) scale(0.85)}
52% { transform: translateX(50px) translateY(-140px) rotate(-120deg) scale(0.75)}
70% { transform: translateX(50px) translateY(-50px) rotate(-120deg) scale(0.7)}
88% { transform: translateX(390px) translateY(-180px) rotate(120deg)scale(0.0)}
to { transform: translateX(465px) translateY(-40px) rotate(120deg) scale(0.65)}
}
Positionierung und Animation der Blumensäcke
Wachsende Blumen
Die Blumen wachsen in dem Spiel mit Hilfe einer Animation mittels JavaScript. Dazu gibt es für die verschiedenen Stadien des Wachstums verschiedene Bilder, die automatisch mit Hilfe von Anweisungen, wie bspw. $(“.plant_small”).attr(“src”, “media/grass.png”); ausgetauscht werden und anschließend durch die Anweisung $(“.plant_small”).css({“animation-play-state”:”running”}); animiert werden. Dadurch verändert sich das Wachstum der Blumen durch Animationen im Laufe des Spiels automatisch. Die Auswahl der Blumensorte zu Beginn des Spiels wird mit Hilfe einer Switch-Anweisung für den restlichen Spielverlauf übernommen
/*Funktion für Blumen. Bilder sind von der Auswähl abhängig*/
switch (blume) {
case "Rose":
$(".plant_small").attr("src", "media/Rose_Bush.png");
break;
case "Sonnenblume":
$(".plant_small").attr("src", "media/Sunflower_Bush.png");
break;
case "Mohnblume":
$(".plant_small").attr("src", "media/Poppy_Bush.png");
break;
}
$("#sonne").css({"animation-play-state": "running"});
$("#text_12").css({"display":"none"});
$("#text_13").css({"visibility": "visible","display":"block"});
}, 2500);
});
Switch-Anweisung für die Übernahme des Blumenwahl für den weiteren Spielverlauf
Gießkanne
Für die Animation der Gießkanne werden sowohl Keyframe als auch jQuery Animationen verwendet. Bei den keyframes handelt es sich um rein visuelle Effekte, bei der sich die Gestaltung der Gießkanne ändert. Mit Hilfe von bspw. transform:scale() ändert sich ihre Größe, durch opacity ändert sich die Transparenz und durch animation-iteration-count:2 wiederholt sich diese Animation zweimal. Die Bewegung wird anhand von .animate() realisiert, sodass sich die Kanne über die Pflanzen bewegt. Dabei ändert sich mit Hilfe der Anweisung .mousemove ihre Ausrichtung, sobald der User mit der Maus über sie fährt und mit .mouseleave verschwindet die Gießkanne. Gleichzeitig wird auf diese Weise auch die Animation für die Wassertropfen ausgelöst.
/*jQuery-Animation für die Gießkanne und Style Änderungen für Interaktivität*/
$("#giesskanne").click(function() {
$("#giesskanne").animate({
bottom: "50%",
left: "50%",
}, 4000, "linear", function() {
/*Animation wird aktiviert nur beim Bewegen auf dem Bild*/
$("#giesskanne").mousemove(function(evt) {
$(".wasser_tropfen").css({"display":"block"});
$("#giesskanne").css({"transform":"rotate(-30deg)"});
$(".wasser_tropfen").animate({
bottom: "-55%"
}, 2500 )
});
/*Ausschaltung der Animation*/
$("#giesskanne").mouseleave(function(evt) {
$(".wasser_tropfen").css({"display":"none"});
setTimeout(function () {
$("#giesskanne").hide('slow');
}, 3000);
});
});
Animation der Gießkanne
Sonne
Die Sonne bewegt sich im Spiel mit Hilfe von keyframes automatisch über die Blumenwiese bewegt und scheint stärker, sobald der User sie anklickt.
/*Durchgehende Animation für besseres Spiel. Einige Style Egenschaften werden später
via JS ergänzt*/
#sonne {
position: absolute;
z-index: 2;
bottom: 60%;
left: 70%;
height: 25%;
cursor:pointer;
animation-name: sonne_bewegung;
animation-duration: 45s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: 1;
animation-fill-mode:forwards;
animation-play-state: running;
}
@keyframes sonne_bewegung {
from { transform: translateX(0px) translateY(0px)}
to { transform: translateX(-500px) translateY(-20px)}
}
CSS Anpassungen für die Sonne
Nachdem die Gießkanne eingesetzt wird, stoppt die Bewegungs-Animation der Sonne, damit der User sie leichter anklicken kann. Bei dem Klick auf die Sonne wird sie größer und scheint stärker, um sie hervorzuheben. Das geschieht mit Hilfe der Anweisung
$("#sonne").click(function() {$("#sonne").css({"height":"30%", "filter":"drop-shadow(0px 5px 25px #FFD700)"});
/*Animation für die Sonne wird aktiviert beim Klick. Für den richtigen
Spielablauf ist das Anklicken der Sonne nur nach der Animation mit der
Gießkanne möglich*/
$("#sonne").click(function() {
$("#sonne").css({"height":"30%", "filter":"drop-shadow(0px 5px 25px #FFD700)"});
$(".plant_small").css({"animation-play-state":"running"});
Animation für die Sonne
Magic Booster
Der Magic Booster erscheint mit Hilfe der jQuery Anweisung $(“#booster”).show();. Die Animation wird automatisch ausgelöst, sobald er vom User ausgewählt wurde und läuft mit Hilfe der Anweisung animation-iteration-count: infinite; unendlich in einer Schleife. Durch die Anweisung $(“#booster”).fadeOut(4000); verschwindet der Booster automatisch innerhalb von 4 Sekunden. Auch hier kann man die Zeiteinstellungen nach Belieben und Funktionalität anpassen.
/*Magic Bosster wird angezeigt nur bei "Ja"-Antwort
Animation ist unendlich und startet mit der Erscheinung des Bildes*/
#booster {
position: absolute;
z-index: 15;
height: 150;
bottom: 70%;
left: 40%;
animation-name: magic_booster;
animation-duration: 3s;
animation-timing-function: ease;
animation-delay: 0s;
animation-iteration-count: infinite;
animation-fill-mode:backwards;
animation-play-state: running;
}
/*Animation zeigt den Effekt indem der Booster über die Blumenwiese gegossen wird.*/
@keyframes magic_booster {
0% { transform: scale(0.5) rotate(0deg)}
50% { transform: scale(1) rotate(180deg)}
100% { transform: scale(0.5) rotate(-180deg)}
}
Keyframe Animation für den Magic Booster
/*Bei der Anwendung des Magic Boosters erscheint der animierte
Booster und fängt an, langsamautomatisch zu verschwinden */
$("#btn_ja").click( function() {
$(":button").hide();
$("#booster").show();
$("#booster").fadeOut(4000);
setTimeout (function () {
jQuery für den Magic Booster, falls der User “Ja” auswählt
Interaktive Buttons
Sobald die Maus über die Buttons fährt, erscheint ein Hover-Effekt, in dem sich die Farben ändern. Der Hover-Effekt wird durch diese Eigenschaft umgesetzt:
Außerdem wird der Cursor durch die Eigenschaft cursor:pointer; in Form einer Hand angezeigt, sobald der User mit der Maus über interaktive Elemente fährt. Dadurch weiß er, welche Elemente anklickbar und für den Spielverlauf wichtig sind.
Besonderheiten
Eine Besonderheit der Animation ist die Hintergrundmusik, die während des Spiels läuft. Sie startet automatisch, wenn der User das Spiel beginnt. Beginnt der User ein neues Spiel, indem er auf “Restart” klickt, startet auch die Musik wieder neu. Dies wird mit Hilfe des jQuery-Befehls $(“#background_musik”)[0].play(); umgesetzt. Bei der Hintergrundmusik haben wir darauf geachtet, eine lizenzfreie Musik zu nehmen, die zum Thema die Spiels passt. Dafür haben wir den Titel “The Small Farm” gewählt. Mit dem Befehl $(“#background_musik”)[0].pause(); endet die Musikwiedergabe zum Ende des Spiels automatisch.
Eine weitere Besonderheit ist das Responsive Design. Dieses wird eingesetzt, damit die Animation auf allen Desktopgrößen richtig angezeigt wird und gespielt werden kann. Das Responsive Design wurde mit Hilfe von CSS angepasst und bezieht sich auf alle Elemente im Quellcode. Dies wurde mit der Eigenschaft position: absolute; sowie der Anpassung der Abstände durch bottom: left: right: top: height: in Prozent-Angaben umgesetzt. Die Eigenschaft font-size: 1.05vw; führt dazu, dass auch die Texte optimiert dargestellt werden.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Von Anfang an war es mein Plan, ein simples und optisch ansprechendes kleines Spiel zu designen, bei dem Animationen sinnvoll zum Einsatz kommen.
Nach ein paar verworfenen Ideen entschied ich mich für diese Variante, bei der die räumliche Wahrnehmung und das Gedächtnis des Spielers auf die Probe gestellt wird. Das Konzept des Spiels ist angelehnt an einen Intelligenztest für Schimpansen, bei dem deren Arbeitsgedächtnis getestet wird. Bei diesem werden aufeinanderfolgende Zahlen auf einem Bildschirm abgebildet, diese zahlen müssen dann in der richtigen Reihenfolge gedrückt werden. Nachdem die erste Zahl gedrückt wurde, werden alle anderen hinter identisch aussehenden Feldern versteckt.
Mein Spiel „forty in 49“ funktioniert nach einem ähnlichen Prinzip. Anstatt einer bestimmten Reihenfolge geht es hierbei aber um die Position der Felder. In einem Raster sind 7×7 Felder angeordnet,. Zu Beginn des Spiels verschwinden 40 der 49 Felder für wenige Sekunden. Der Spieler muss sich die Position der übrigen 9 Felder (Bomben) merken und diese vermeiden. Das Ziel ist es, möglichst viele der 40 Felder anzuklicken. Klickt man auf eine Bombe, ist das Spiel vorbei.
Animationen
Die Animationen erfüllen sowohl funktionale als visuelle Zwecke.
Um die Orientierung zu vereinfachen, werden Felder größer und ändern ihre Farbe, wenn der Mauszeiger darüber hovert. Wird ein Feld angeklickt, wird es entweder grün und verschwindet in einer rotierenden Animation, oder es wird rot und dreht sich langsam um 180° um die y-Achse und um 45° um die z-Achse. Dadurch wird dem Spieler visuell verdeutlicht, ob er richtig lag. Um das Ganze auditiv zu unterstützen, gibt es für den Klick auf die zwei Arten von Feldern jeweils einen Soundeffekt.
Ist das Spiel vorbei (alle richtigen Felder oder eine Bombe wurden geklickt), erscheint eine Karte mit der Punktzahl. Sie bewegt sich von unten nach oben und landet mittig über dem Spielfeld. Außerdem gibt es natürlich die fade-out/fade-in Animation am Anfang, ohne die das Spiel überhaupt nicht möglich wäre.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Ziel dieses Projektes war die Erstellung eines Spiels , das durch sämtliche Animationen bzw. Animationseffekte modern und dynamisch wirken sollte. Memory ist ein Spiel, das weltbekannt und nicht zu kompliziert zu programmieren ist. Im Internet gibt es sämtliche frei verfügbare Beispielcodes. Einer davon wurde in diesem Projekt verwendet.
Der Spielvorgang läuft folgendermaßen ab: Der Start des Spieles muss durch das Klicken eines Buttons ausgelöst werden. Danach hat man 30 Sekunden Zeit, um das Spiel zu gewinnen. Wenn man es nicht schafft, bricht das Spiel nach 30 Sekunden ab und man hat somit verloren.
Das Spiel besteht aus drei Ebenen: 1. Startbildschirm 2. Spiel 3. Endbildschirm: gewonnen oder verloren
Für die Einfachheit und Übersichtlichkeit besteht das Spiel aus zwei HTML-Dateien. Die Datei game_start.html beinhaltet die erste Ebene. Die Datei game.html die Ebenen zwei und drei.
Startbildschirm
Hier erscheinen nacheinander ein Button, der zum Spiel weiterführen soll, ein Austronaut und ein Raumschiff. Im Hintergrund bewegen sich von oben nach unten und von unten nach oben kleine Punkte, die Sterne repräsentieren sollen. Der Button hat einen Hover-Effekt: Wenn man über ihn mit der Maus fährt, verändert sich der Text und die Farbe .
Abbildung 1: Startansicht
Memory-Spiel
Das eigentliche Spiel befindet sich im rechten Drittel des Bildschirms und besteht aus zwölf Karten, welche in drei Reihen gestapelt sind. Links vom Spiel sieht man den Astronauten und eine Sprechblase. Über den Astronaut schwebt ein Button, mit dem das Spiel neu gestartet werden kann. Beim Klicken auf die Karten, erscheint zusätzlicher Text in der Sprechblase. Nach ein paar Sekunden verschwindet dieser.
Abbildung 2: Spiel
Gewonnen – Endbildschirm
Wenn man innerhalb der 30 Sekunden alle Paare gefunden hat, verschwinden die Sprechblase und die Karten. Stattdessen blendet das Programm Konfetti und Überschrift “6/6! Gut gemacht gemacht!” ein. Im Hintergrund wird einmalig Triumpfsound “Ta-Da” abgespielt.
Abbildung 3: Spiel gewonnen
Verloren – Endbildschirm
Wenn 30 Sekunden verstrichen sind und nicht alle Paare gefunden wurden, dann bricht das Spiel ab und statt der Sprechblase und der Karten erscheint die Überschrift “Verloren” und in der Sprechblase steht jetzt “Schande!”. Der Astronaut fängt zu weinen an.
Abbildung 4: Spiel verloren
Erläuterung des Codes
Erste Ebene
HTML und javascript
Für die Erzeugung bestimmter Animationen lohnt es sich auf JS-Bibliotheken zurückzugreifen. In diesem Projekt wurde GSAP eingesetzt. Bei GSAP handelt es sich um eine JS-Bibliothek für zeitleistenbasierte Animationen . Die GSAP Funktionen lassen sich über CDN laden, indem man ihn im Head-Bereich einbindet.
Der CDN für allgemeine Funktionen reicht aber nicht aus, um Bewegung entlang eines vorgeschriebenen Pfades zu erzeugen. Der Code muss zusätzlich mit dem Plugin für GSAP-MotionPath ergänzt werden.
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Memory game done with javascript and css animation">
<meta name="keywords" content="game, interactive, avascript, css, html">
<title>Memory Game</title>
<link rel="stylesheet" href="styles_start.css"> <!-- Nur für game_start -->
<script src="https://cdn.jsdelivr.net/web-animations/latest/web-animations.min.js"></script> <!-- Polyfill -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/gsap.min.js"></script> <!-- Core Green Sock-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.0/MotionPathPlugin.min.js"></script> <!--Plugin für MotionPath von Green Sock-->
</head>
Der HTML-Grundgerüst der ersten Ebene ist simpel aufgebaut. Es wurden nacheinander Elemente eingefügt, die in bestimmten Reihenfolge sichtbar werden sollten.
<div class="sternenhimmel-bild">
<!-- Sterne, die sich von unten nach oben und umgekehrt bewegen, insperiert von https://www.youtube.com/watch?v=aywzn9cf-_U -->
<div id="stars"></div>
<div id="stars2"></div>
<div id="stars_2"></div>
<div id="stars2_2"></div>
<img id="astro" src="Bilder/astro.png">
<div>
<a href="game.html"><button id="button1"></button></a>
</div>
<img id="spaceship" src="Bilder/futurama.png">
</div>
Auf der ersten Ebene befindet sich der Javascript-Code in der HTML-Datei . Dank GSAP kann man den Code für die schwebende Bewegung des Astronauten kurz halten. Mit GSAP wird auch das Erscheinen des Buttons animiert. Man darf nicht vergessen den MotionPathPlugin zu registrieren, sonst wird motionPath nicht ausgeführt. Mit gsap.timeline() geben wir die Reihenfolge der Animationen vor. Zuerst soll der Button und dann der Astronaut erscheinen. Der Astronaut soll daraufhin im Kreis um den Button schweben und dann stehen bleiben.
Der Inhalt des Buttons wurde mit dem Pseudoelement ::after eingefügt. Das Ziel war es, den Text beim Hovern über den Button zu ändern. Beim Hovern sollen auch die Hindergrundfarbe und der Schatten sich verändern. Da :hover::after nur den Inhalt (also Text) ansteuert, muss man noch einmal :hover benutzen.
Um den Hintergrund dynamischer wirken zu lassen, werden zwei Sterne-Animationen hinzugefügt. Die Idee der Erstellung der Sterne mit box-shadow und sie dann in Bewegung zu setzten stammt von diesem Youtube-Video . Im Spiel bewegen sich die Sterne sowohl von oben nach unten als auch von untern nach oben. Ermöglicht wird es durch zwei Keyframes.
Für die zweite Ebene, also für die Datei game.html , fügen wir im Head-Bereich zusätzlich zu GSAP ein Script von LottieFiles hinzu . Dieser ermöglicht später eine Lottie-Animation zu starten.
Der HTML-Code ist auch hier unkompliziert gestaltet. Der Div mit der class=”grid” ist der wichtigste Bestandteil dieses HTML-Codes. Über ihn erzeugt die app.js-Datei die Memory-Karten .
Bei der Lottie-Animation handelt es sich um eine Konfetti-Animation, die nur beim Gewinnen des Spiels über Javascript aktiviert wird. Sie ist in der HTML-Datei über den <lottie-player>-Tag eingebunden und über CSS angepasst.
Der grundlegende JS-Code für das Memory-Spiel stammt aus diesem YouTube-Video. Der Code wurde modifiziert und an eigene Bedürfnisse angepasst.
Das Programm führt folgende Schritte aus: createBoard() kreiert innerhalb des .grid-Divs Child-Elemete, die für die Erstellung der Karten benötigt werden. Timer löst nach 30 Sekunden die Funktion verloren() aus, die die Elemente .grid und und scoreDiv entfernt und stattdessen andere Elemente aktiviert. Die Funktion checkForMatches() erfüllt gleich mehrere Aufgaben: Sie vergleicht die angeklickten Karten und je nach Auswahl gibt einen Text in der Sprechblase aus. Wenn sie feststellt, dass alle Paare gefunden wurden, löscht bzw. deaktiviert sie bestimmte Elemente und blendet neue ein. Die flipCard()-Funktion sorgt dafür, dass die Karten “umgedreht” werden und man das verborgene Bild sieht. Es können nur zwei Karten gleichzeitig umgedreht werden.
document.addEventListener('DOMContentLoaded', () => {
//Kartenauswahl
const cardArray = [
{
name: 'mond',
img: 'Bilder/mond.svg'
},
{
name: 'alien',
img: 'Bilder/alien.svg'
},
{
name: 'ufo',
img: 'Bilder/ufo.svg'
},
{
name: 'rocket',
img: 'Bilder/rocket.svg'
},
{
name: 'space',
img: 'Bilder/space.svg'
},
{
name: 'sun',
img: 'Bilder/sun.svg'
},
{
name: 'mond',
img: 'Bilder/mond.svg'
},
{
name: 'alien',
img: 'Bilder/alien.svg'
},
{
name: 'ufo',
img: 'Bilder/ufo.svg'
},
{
name: 'rocket',
img: 'Bilder/rocket.svg'
},
{
name: 'space',
img: 'Bilder/space.svg'
},
{
name: 'sun',
img: 'Bilder/sun.svg'
}
];
cardArray.sort( () => 0.5 - Math.random());
const grid = document.querySelector('.grid');
const resultDisplay = document.querySelector('#result');
const wordCloud = document.querySelector('#message');
const scoreDiv = document.querySelector('#score');
const gameAstro = document.querySelector('#gameAstro');
let cardsChosen = [];
let cardsChosenId = [];
let cardsWon = [];
//create your board
function createBoard() {
for (let i = 0; i < cardArray.length; i++) {
const cardDiv = document.createElement('div') //Um die karten herum einen Div erstellen
cardDiv.setAttribute('class', 'imgDiv') //Um die karten herum einen Div erstellen
const card = document.createElement('img')
card.setAttribute('class', 'Spielbilder')
card.setAttribute('src', 'Bilder/logo.svg')
card.setAttribute('data-id', i)
card.addEventListener('click', flipCard)
grid.appendChild(cardDiv).appendChild(card) //Um die Karten herum einen Div erstellen
}
};
//Timer. Falls das Spiel mach 30 Sekunden nicht gewonnen wurde, wird das Spiel abgebrochen
var timer = setTimeout( function(){verloren();}, 30000);
function verloren(){
grid.remove()
scoreDiv.remove()
gameAstro.style.marginTop = '17em'
gameAstro.style.marginLeft = '7em'
gameAstro.style.width = '10em'
document.querySelector('#verloren').style.display = 'block'
document.querySelector('#Schande').style.display = 'block'
gsap.timeline().from("#gameAstro", {duration: 2, y: 200, opacity: 0, scale: 0, rotation: 180, ease:'back'});
document.querySelector('#Traene').style.display = 'block'
};
//check for matches
function checkForMatch() {
const cards = document.querySelectorAll('img')
const optionOneId = cardsChosenId[0]
const optionTwoId = cardsChosenId[1]
if(optionOneId == optionTwoId) {
cards[optionOneId].setAttribute('src', 'Bilder/logo.svg')
cards[optionTwoId].setAttribute('src', 'Bilder/logo.svg')
wordCloud.textContent = 'Du hast die gleiche Karte angeklickt!'
setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
}
else if (cardsChosen[0] === cardsChosen[1]) {
wordCloud.textContent = 'Du hast ein Paar gefunden!'
setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
cards[optionOneId].removeAttribute('src', 'Bilder/logo.svg')
cards[optionTwoId].removeAttribute('src', 'Bilder/logo.svg')
cards[optionOneId].removeEventListener('click', flipCard)
cards[optionTwoId].removeEventListener('click', flipCard)
cardsWon.push(cardsChosen)
} else {
cards[optionOneId].setAttribute('src', 'Bilder/logo.svg')
cards[optionTwoId].setAttribute('src', 'Bilder/logo.svg')
wordCloud.textContent = 'Schade, versuch es noch mal'
setTimeout(function(){ wordCloud.innerHTML=''; }, 2000); //Nach 2000 ms den text aus der Sprechblase entfernen
}
cardsChosen = []
cardsChosenId = []
resultDisplay.textContent = cardsWon.length
var audio = new Audio('ta-da.mp3');
if (cardsWon.length === cardArray.length/2) {
//Falls das Spiel innerhalb von 30 Sekunden gewonnen:
clearTimeout(timer) //Timer aussetzen, damit das Spiel nicht abgebrochen wird
audio.play();
grid.remove()
scoreDiv.remove()
gameAstro.style.marginTop = '17em'
gameAstro.style.marginLeft = '7em'
gameAstro.style.width = '10em'
document.querySelector('img#gameAstro').style.animationName = 'none' //Animation entfernen, damit GreenSock-Animation abgespilt werden kann
document.querySelector('#gewonnen').style.display = 'block'
document.querySelector('#confetti').style.display = 'block'
//Freudiges Springen
gsap.timeline().from("#gameAstro", {duration: 2, y: 200, opacity: 0, scale: 0, rotation: 180, ease:'back'})
.to('#gameAstro', { duration: .25, y: -50, repeat: -1, yoyo: true, ease: "sine.inOut", autoRound: false});
}
};
//flip your card
function flipCard() {
let cardId = this.getAttribute('data-id')
cardsChosen.push(cardArray[cardId].name)
cardsChosenId.push(cardId)
this.setAttribute('src', cardArray[cardId].img)
if (cardsChosen.length === 2) {
setTimeout(checkForMatch, 300)
}
};
createBoard();
});
css
Das Aussehen der Karten wird über die Klassen .grid , .imgDiv und .Spielbilder bestimmt. Die Klasse .grid ist für die Verteilung der Karten auf dem Bildschirm zuständig. Hier empfielt es sich, die Einstellung display:flex zu wählen. Es ist der leichteste Weg ist, die Karten zu positionieren. Für die richtige Reihung der Karten ist es wichtig, dass die Breite des .grid-Containers und die Breite der einzelnen Karten, die von .imgDiv gesteuert werden, auf einander abgestimmt sind.
Die einzelnen Elemente der dritten Ebene werden je nach Ergebnis des Spieles durch den JS-Code aktiviert. Aus diesem Grund sind sie alle mit display:none versehen. Der JS-Code verändert sie dann mit document.querySelector zu display:block.
Sowohl in der zweiten als auch in der dritten Ebene werden alle sichtbaren Elemente (bis auf die Memory-Karten) mit einer Schwebeanimation versehen, um den Eindruck zu vermitteln, dass die Objekte wie im echten Weltall schweben.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.
Dieser Beitrag ist ein Tutorial zu der Animation „Ein Tag mit Bobby“ bei dem auf die Details zum Code, Inhalt, Besonderheiten, das Konzept und Schwierigkeiten eingegangen wird. Die Bilder dienen zur Veranschaulichung und Nachvollziehbarkeit und sind anklickbar, sodass man diese in Vollbildmodus und besserer Auflösung betrachten kann.
Die Animation ist ein Storytelling, bei dem der User mit Hilfe von Buttonklicks durch die einzelnen Szenen geleitet wird. Dieser begleitet den Hauptcharakter Bobby durch den Tag und führt verschiedene Anweisungen durch, die Bobby in der Sprechblase gibt. Diese können durch einen Buttonklick realisiert werden. Sobald der User auf einen Button klickt, wird entweder die Szene gewechselt oder ein visueller Effekt erzeugt.
Das Ziel ist es mit dem User eine Interaktion zu starten, wobei dieser den Ablauf der Animation lenkt. Der User wird zu Beginn auch direkt von Bobby mit dem Namen angesprochen und aufgefordert mit ihm den Tag zu verbringen.
Die Idee eine Animation mit Hund(en) zu erstellen, kommt von der persönlichen Liebe zu Tieren und insbesondere zu Hunden. Die kindliche und amüsante Darstellung soll den User animieren und erfreuen. Die Hintergrundmusik sorgt für eine zusätzliche entspannte Atmosphäre, die die Stimmung der Animation unterstützt. Der User kann sich somit entspannen, zurücklehnen und die Animation genießen.
Aufbau
Die Animation ist in vier Szenen aufgeteilt:
Start-Szene (div class=“ story_start_scene“)
Bobby im Wohnzimmer (div-class= „dog_in_livingroom_scene“)
Bobby im Park (div class=”background_image_park_day”)
Schluss-Szene bei der Bobby im Park nachts ist (div class=”dog_in_park_night”)
Start Szene
Bei der Start Szene sieht man den schlafenden Bobby auf einem Teppich ohne jeglichen Hintergrund, das sich zu den restlichen Szenen unterscheidet. Der Grund dafür ist, dass man zum einen den beweglichen und farbwechselnden Hintergrund auf sich wirken lassen kann und zum anderen sollte es schlicht gehalten werden, damit der Wechsel zu den Hauptszenen spannender gestaltet wird. Zudem soll der Fokus zu Beginn auf dem Hauptcharakter liegen. Mit dem Buttonklick auf „Aufwecken“ startet die ganze Animation.
Start Szene
Zweite Szene
In der zweiten Szene befindet sich Bobby im Wohnzimmer, wo er zuvor auf dem Teppich geschlafen hat. Der User hat ihn aufgeweckt und nun fragt Bobby ihn nach seinem Namen. Die Abfrage passiert zwischen der ersten und der zweiten Szene, die mit Hilfe von JavaScript erzeugt wurde. Je nachdem welchen Namen der User eingibt, erscheint dieser in dem Begrüßungstext in der Sprechblase. Hier wird der User aufgefordert die Anweisungen von Bobby durchzuführen. In dieser Szene soll der User mit Bobby in den Park gehen.
Zweite Szene
Dritte Szene
Die dritte Szene spielt sich im Park tagsüber ab in den mehrere Aktionen passieren. Zu Beginn sieht man den Park, in dem sich ein Grill und Bobby befinden. Bobby weist darauf hin, dass es vom Grill sehr gut riecht und er gerne einen Hot Dog haben möchte. Dieser Bitte kann der User nachgehen, indem er auf den langsam erscheinenden Button „Hot Dog geben“ klicken kann. Sobald dies gemacht wurde, erscheint ein animierter Hot Dog, der vom Grill aus zu Bobby in einer 360 Grad Drehung geworfen wird. Daraufhin bedankt sich Bobby und gibt den nächsten Hinweis, dass er seinen Freund Bello sieht und mit ihm Ball spielen möchte.
Dritte Szene
Auch hier kann der User der Anweisung nachgehen, indem er auf den nächsterscheinenden Button „Mit Bello spielen“ klickt. Hier erfolgt die nächste Animation, bei der sich Bello und Bobby den Ball zu werfen. Dabei springen beide versetzt hoch und werfen den Ball mit ihrem Kopf einander zu. Nun erscheint der fünfte Button „Weiter“, der den User darauf hinweist, dass danach die nächste Szene erscheint.
Vierte Szene
Vierte Szene
Die vierte und letzte Szene findet in dem selben Park statt. Jedoch ist es schon spät geworden und Bobby ist müde. Er macht vor Freude Rückwärtssaltos und bedankt sich für den großartigen Tag, den er mit dem User erlebt hat. Auch hier weist Bobby daraufhin, dass er müde und erschöpft ist. Hier ist es Zeit sich von Bobby zu verabschieden und ihm eine Gute Nacht zu wünschen.
Letzte Szene
Mit dem Buttonklick kann man dies tun, wobei das Bild von Bobby in den ursprünglich schlafenden Zustand zurückgebracht wird. Es taucht ein Eyecatcher auf, der zoomt und sich hin und her in verschiedene Winkel dreht. Dies ist der Abschluss der Animation, der durch den animierten Text „Gute Nacht, Bobby“ kenntlich gemacht wird. Der letzte Button unterscheidet sich in der Erscheinungsweise von allen anderen, denn dieser macht auf sich Aufmerksam, indem sich dieser hin und her bewegt und dabei vertikal spiegelt. Der Grund für diese Erscheinungsweise ist das Aufmerksam machen, dass ab hier keine neue Szene erscheint, sondern alles nochmal vom Anfang beginnt. Somit ermöglicht dieser Button die Animation nochmal neu zu starten
Der Code
Für die Animationen wurden HTML5, CSS3 sowie JavaScript und jQuery benutzt. HTML5 wurde für das Grundgerüst und Aufbau, CSS3 für die Animation sowie das Styling und JavaScript bzw. jQuery für das Auslösen/Verstecken verschiedener Animationsobjekte benutzt.
Allgemeine Einstellungen
In der ID „animation_start“ in HTML5 spielt sich die gesamte Animation ab. Die jeweiligen Szenen sind in einzelne div-classes unterteilt in denen die dazugehörigen Objekte enthalten sind. Die div-classes sind nach den Szenarien benannt, das das Erkennen der Inhalte vereinfacht.
<div id="animation_start"class="whole_animation"> <!--ID der gesamten Animation-->
<div class="story_start_scene"><!--Erste Szene: Startbildschrim-->
<img src="sleeping_dog.png" id="sleep"/>
<img src="carpet.png" id="carpet"/>
</div>
<div class="dog_in_livingroom_scene"> <!---Zweite Szene: Bobby im Wohnzimmer Szene samt Begrüßung-->
<div class="living_room_background">
<img src="room.png" class="backgroundimage_livingroom" style="visibility: hidden;"/>
</div>
<div class="dog_character">
<img src="standing_dog.png" id="hello_dog" style="visibility: hidden;"/>
<img src="sprechblase.png" id="speak1" style="visibility: hidden;"/>
<p id="welcome_text" style="visibility: hidden;">Hallo! Ich bin Bobby. Lass uns den Tag zusammen verbringen.</p>
</div>
</div>
<div class="dog_in_park_day"> <!--Dritte Szene: Bobby im Park Szene mit dazugehörigen Objekten-->
<div class="background_image_park_day">
<img src="meadow_at_day.png" class="backgroundimage_park_day" style="visibility: hidden;"/>
</div>
<div class="park_items">
<img src="grill.png" id="bbq" style="visibility: hidden;"/>
<img src="food.png" id="hot_dog" style="visibility: hidden;"/>
<img src="standing_dog2.png" id="dog_at_park" style="visibility: hidden;"/>
<img src="sprechblase2.png" id="speak2" style="visibility: hidden;"/>
<p id="hot_dog_text" style="visibility: hidden;">Das riecht aber toll! Kannst du mir einen Hot Dog geben?</p>
<p id="thank_you_hot_dog_text" style="visibility: hidden;">Danke! Ouh Schau! Da ist Bello. Ich möchte mit ihm Ball spielen.</p>
<img src="playing_dog_brown.png" id="bello" style="visibility: hidden;"/>
<img src="playing_dog_grey.png" id="bobby" style= "visibility: hidden;"/>
<img src="ball.png" id="toy" style="visibility: hidden;"/>
</div>
</div>
<div class="dog_in_park_night"><!--Abschlussszene: Bobby im Park nachts.-->
<div class="background_image_park_night">
<img src="meadow_at_night.png" id="backgroundimage2" style="visibility: hidden;"/>
<img src="dog_by_night.png" id="night_dog" style="visibility: hidden;"/>
<img src="sprechblase3.png" id="speak4" style="visibility: hidden;"/>
<img src="sleeping_dog2.png" id="tired" style="visibility: hidden;"/>
<p id="thank_you_for_the_day" style="visibility: hidden;">Danke dir für den schönen Tag! Ich bin jetzt aber müde.</p>
<p id="good_night_bobby" style="visibility: hidden;">Gute Nacht, Bobby</p>
</div>
</div>
</div><!--Ende der "animation_start"-->
In der aside-class wurden alle Buttons und der Titel der der Animation eingetragen, da diese Inhalte sich immer an der selben Position befinden.
<body>
<!--Alle Elemente sind auf "visibility:hidden" gesetzt, die über JavaScript aktiviert werden, wenn man auf einen Button klickt-->
<script src="animation_functions.js"></script> <!--Einbindung der JavaScript Datei-->
<aside class="title_and_buttons"> <!--Übergreifende Class für alle Buttons und Titel der Animation (h1) damit die Position die selbe bleibt-->
<h1> Ein Tag mit Bobby</h1>
<button id="button_aufwecken">
<a class="button_1">Aufwecken</a>
</button>
<button id="button_park" style="visibility: hidden;">
<a class="button_2">Lass uns in den Park gehen</a>
</button>
<button id="button_hot_dog" style="visibility: hidden;">
<a class="button_3">Hot Dog geben </a>
</button>
<button id="button_play" style="visibility: hidden;">
<a class="button_4">Mit Bello spielen</a>
</button>
<button id="button_next" style="visibility: hidden;">
<a class="button_5">Weiter</a>
</button>
<button id="button_good_night" style="visibility: hidden;">
<a class="button_6">Gute Nacht!</a>
</button>
<button id="button_reload" style="visibility: hidden;">
<a class="button_7">Neustart</a>
</button>
</aside>
Auffallend im Code ist, dass alle Objekte nicht sichtbar sind (visibility: hidden). Diese werden zu dem Zeitpunkt wann die jeweiligen Objekte zu sehen sein sollen mit Hilfe von jQuery sichtbar gemacht. Die allgemeine Position aller Elemente ist in der ID „animation“ sowie dessen class „whole_animation“ zu sehen. So entsteht ein Rahmen für die verschiedenen Bilder, das die Zentrierung der Szenen möglich macht. Die gewählte Größe und Position erstellt eine Box, wo sich die Animation abspielt. Dies soll ein Gefühl erzeugen, als würde man in einem Kino vor einer Leinwand sitzen.
Im Body ist die Animation des ineinanderfließenden Hintergrundes zu sehen. Die keyframes bringen diese Animation zum Laufen. Zunächst muss man drei Farben definieren, die man in dem Übergang haben möchte. Des Weiteren war es wichtig die Dauer und Länge zu definieren. In diesem Fall sollte der gesamte Übergang 13 Sekunden dauern und unbegrenzt durchlaufen.
body {
font-family: "Comic sans MS";
background-size: cover;
justify-content:center;
background-position: center;
background: -webkit-linear-gradient(132deg, #FC415A, #591BC5, #4a8ead);
background-size: 400% 400%;
align-items: center;
min-height: 100%;
overflow:hidden;
-webkit-animation: moving_background 13s ease infinite;
animation: moving_background 13s ease infinite;
}
@-webkit-keyframes moving_background { /*Animation des Backgrounds, der in Dauerschleife die Farben wechselt*/
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%; /*Inspired by https://www.sliderrevolution.com/resources/css-animated-background/*/
}
100% {
background-position: 0% 50%;
}
}
Die Buttons
Die Buttons haben wie schon zuvor erwähnt den funktionalen Zweck den User durch die Szenen zu geleiten und verschiedene Animationen hervorzurufen. Somit sind diese essenziel für das Abspielen der Animation. Aus diesem Grund werden diese oberhalb der Animationsbox dargestellt, damit die Aufmerksamkeit des Users zu den bestimmten Zeitpunkten darauf gelenkt wird.
Die Buttons haben alle den selben Stil, jedoch haben alle verschiedene Dauer und Art und Weise der Animation. Daher wurde jeder einzelne Button in CSS3 angelegt. Das Aussehen der Buttons ist Oval und hat drei Farbverläufe, das in zarten und hellen Farben gehalten ist, um mit dem Hintergrund zu harmonieren. Beim Hovern erfolgt ein Spiegeleffekt bei dem die Farben von rechts nach links ineinander laufen. Durch das bewegte Gelb wir ein Relief- bzw. Spiegeleffekt erzeugt. Die transition ermöglicht dies.
#button_aufwecken { /*Design und Animation der Buttons. Alle haben die gleiche Einstellung nur andere Animationsangaben. Daher jeden Button einzeln angelegt, anstatt die zusammenzufassen*/
border-radius: 50%;
align-items: center;
font-size: 15px;
display: flex;
margin: auto;
background-image: linear-gradient(135deg, #ee9ca7 0%, #fbed96 51%, #ee9ca7 100%); /*Inspired by https://blog.avada.io/css/button-hover-effects/*/
background-size: 200% auto;
box-shadow: #a05a9c 0px 0px 5px;
-webkit-animation: push_buttom 3s infinite;
animation: push_button 3s infinite;
outline: none;
}
@-webkit-keyframes push_button { /*Inspired by https://css-tricks.com/css-animation-libraries/*/
0% {
box-shadow: 0px 0px 4px rgb(255,250,250);
}
50% {
box-shadow: 0px 0px 23px rgb(255,250,250);
}
100% {
box-shadow: 0px 0px 12px rgb(255,250,250);
}
}
@keyframes push_button {
0% {
box-shadow: 0px 0px 4px rgb(255,250,250);
}
50% {
box-shadow: 0px 0px 23px rgb(255,250,250);
}
100% {
box-shadow: 0px 0px 12px rgb(255,250,250);
}
}
#button_aufwecken:hover {
background-position: right center;
transition: all 0.5s ease-out;
}
.button_1{
flex: 1 auto;
margin:5px;
padding:10px 25px;
text-align:center;
transition: all 0.5s ease-out;
cursor:pointer;
background-size: 200% auto;
font-family: "Comic sans MS";
}
Animierte Objekte
Alle benutzen Bilder, bis auf die Hintergrundbilder der Szenen, haben einen funktionalen Zweck. Alle Bilder sind PNG Dateien und von Pixabay. Durch die position: relativ war es einfach alle Objekte in einer Szene zu platzieren. Ausgerichtet und an den gewünschten Platz gebracht wurde mit bottom, top, left, right und margin. Keyframes erzeugen die Animationen der Objekte. Die nachfolgenden Abschnitte beschreiben die einzelnen animierten Objekte.
Text in Sprechblase
Der sprechende Text, den Bobby in der Sprechblase sagt zoomt rein und raus und wechselt dabei zwischen drei Farben. So sollte die Aufmerksamkeit auf den Text gelenkt werden, damit der User den Anweisungen folgen kann. Dazu wird die animation-timing-function auf ease gesetzt. Zudem soll der Zoomeffekt in Dauerschleife ablaufen. Daher der Wert infinite. Durch scale() konnte die Größe der Transformation des Textes eingerichtet werden. Color sorgt für den Farbverlauf, der sich über die verschiedenen Sequenzen (0%, 50%, 100%) ändert.
Für die Animation des fliegenden Hot Dogs wurden in den keyframes die Werte translateX(), translateY() und rotate() verwendet. Die beiden ersten Werte sorgen für die Verschiebung auf der X- und Y-Aschse, wobei ein negativer translateY() Wert das Objekt nach oben versetzt. Daher ist bei 50%, das der höchste Punkt der Flugbahn sein soll, ein negativer Wert von -80px. rotate() sorgt für die Rotation des Objektes. Hierbei müssen Gradzahlen eingetragen werden.
Die Animation der zwei spielenden Hunde war am schwierigsten zu gestalten, da hier der Zeitfaktor eine große Rolle spielt, damit alles synchron abläuft. Zunächst die Gestaltung der beiden springenden Hunde. Hierbei muss man die Sequenzen (0%-100%) der bottom-Wert ändern. Je größer der Wert, desto höher steigen die Objekte auf. Die ease-out Eigenschaft sorgt dafür, dass das Ende der Sequenz langsamer abläuft. So kommt der fließende Sprung zustande. Beide Hunde haben die selben Animationseigenschaften. Der Unterschied liegt im animation-delay. Bello fängt eine Sekunde später an zu springen als Bobby. So entsteht der abwechselnde Sprung.
Die Animation des Balls wurde nach dem selben Konzept wie die des Hot Dogs gestaltet. Hier bestand die Schwierigkeit mit der Positionierung und der Dauer des fliegenden Balls. Es musste alles auf die beiden springenden Hunde angepasst werden, sodass der Effekt eines Kopfballs entsteht.
Saltomachender Bobby
In der letzten Szene macht Bobby ein Rückwärtssalto. Dieser Effekt wurde mit den gleichen Eigenschaften wie bei dem fliegenden Hot Dog und Ball animiert. Da der Charakter sich auf einer Stelle bewegt und nur hochspringt und dreht, bleibt der translateX()vWert bei 0px. Dem entsprechend muss der translateY() und rotate() angepasst werden.
Die Buttons wurden im vorherigen Kapitel schon beschrieben. Nun wird näher auf die animierenden Effekte eingegangen. Der Effekt des Einblendens wurde durch die opacity Eigenschaft erzeugt, der von 0 auf 1 steigt und durch die animation-duration in die Länge gezogen wird. Der erste und letzte Button haben jedoch ein paar zusätzliche Effekte. Beim ersten Button „Aufwecken“ leuchtet der Button-Hintergrund in Weiß. Durch den versetzten box-shadow und der Dauerschleife (infinite) wird das pulsierende Leuchten erzeugt (siehe Bild ). Der letzte Button „Neustart“ dreht und bewegt sich von links nach rechts und rückwärtsrum, während sich dieser vertikal spiegelt. Die animation-direction: alternate-reverse gibt an, dass die Animation sich vor- und zurückspielen soll. Animation-timing-function sorgt für den linearen. also gleichbleibenden/flüssigen Ablauf. translateX() sorgt dafür, dass sich der Button von links nach rechts bewegt. scaleX() hingegen sorgt für die Spiegelung, wobei der negative Wert die Spiegelung an der X-Achse erzeugt.
Gute Nacht, Bobby Schrift
Der Abschließende Text „Gute Nacht, Bobby“ wurde mit einer Zoom-, Leucht- und Rotations-Funktion gestaltet. Wie schon zuvor erwähnt erzeugt scale() den Zoomeffekt. Für das Textleuchten ist text-shadow zuständig. rotate() sorgt für die Drehung des Textes. Der Unterschied bei dieser Textanimation liegt in der animation-timing-function. Hierbei setzt man cubic-bezier () ein um, einen Verzerrungseffekt zu erstellen.
var name = "Snoopy" /*Variable für die Namensabfrage für die Begrüßung von Bobby*/
$(document).ready(function(){
/*Funktion, bei der bei einem Buttonklick bestimmte Objekte sichtbar oder ausgeblendet werden*/
$("#button_aufwecken").on("click", function() { /*Button "Aufwecken"*/
$(".story_start_scene").css({"visibility": "hidden"});
$(".backgroundimage_livingroom").css({"visibility": "visible"});
$("#hello_dog").css({"visibility": "visible"});
$("#speak1").css({"visibility": "visible"});
$("#button_park").css({"visibility": "visible"});
$("#button_aufwecken").css({"visibility": "hidden"})
$("#welcome_text").css({"visibility": "visible"});
$("#name_text").css({"visibility": "visible"});
$("form").css({"visibility": "visible"});
$("#button_park").css({"-webkit-animation-play-state": "running"}); /*Animationen, die pausiert werden, werden hierbei zum Abspielen gebracht*/
$("#welcome_text").css({"-webkit-animation-play-state": "running"});
name = prompt("Bitte gib deinen Namen ein", "Snoopy"); /*Namensabfrage. Inspired by https://www.w3schools.com/jsref/met_win_prompt.asp*/
console.log(name);
if (name != null) {
document.getElementById("welcome_text").innerHTML =
"Hallo " + name + "! Ich bin Bobby. Lass uns den Tag zusammen verbringen.";
}
});
Um die Übergänge zwischen den einzelnen Szenen und Animationen möglich zu machen, wurde jQuery eingesetzt. Durch den Buttonklick werden Objekte, die in HTML5 auf „hidden“ gesetzt sind, sichtbar gemacht. Dafür nutzt man die $(“#button”).on(“click”, function() {}}); . Diese zeigt welche Objekte beim Buttonklick gezeigt werden und welche verschwinden sollen. Die Namensabfrage zwischen der ersten und der zweiten Szene erfolgte über JavaScript mit der promt() Methode.
Bobby JS
Hierbei wurde eine Variable erstellt, das einen default Wert liefert, der in der promp() Abfrage und if-loop eingefügt ist. Es öffnet sich ein Pop-up Fenster bei dem die Aufforderung „Bitte gib deinen Namen ein“ und dem default Wert „Snoopy“ steht. Diese wurden zuvor definiert. Wenn der User seinen Namen eintippt, nimmt die p id=“welcome_text“ diesen entgegen und Bobby begrüßt den User mit „Hallo [Username]! Ich bin Bobby. Lass und den Tag zusammen verbringen“. Falls das Eingabefeld leer bleibt, begrüßt Bobby den User mit dem Namen null. Durch diese Funktion wird eine Bindung zum User aufgebaut.
Die Animationen, die mit Hilfe von transitions und keyframes in CSS3 erstellt wurden, wurden bei webkit-animation-play-state auf paused gesetzt. Der Grund dafür ist, dass bestimmte Funktionen wie animation-delay oder animation-duration ab der Start Szene anfangen zu zählen. Das war aber nicht die Intention. Es sollten alle Abläufe erst nach einem Buttonklick starten. So war das Problem z.B. bei dem zweiten Button „Lass und in den Park gehen“. Dieser wird nach 3 Sekunden eingeblendet. Wäre -webkit-animation-play-state auf running gesetzt, so hätte das Einblenden des Buttons nach 3 Sekunden nicht funktioniert, wenn man sich länger als 3 Sekunden in der Start Szene befunden hätte. Der Button wäre dann beim Szenenwechsel schon da und der Einblende Effekt wäre nicht sichtbar. Damit die einzelnen Animationen erst beim Buttonklick abspielen, muss man diese über jQuery bei -webkit-animation-play-state auf running setzen.
Eine Besonderheit ist die im Hintergrund eingesetzte Musik, um die Animation spannender zu gestalten und den User in eine angenehme Stimmung zu versetzen. Des Weiteren wurden so gut wie alle benutzen Objekte animiert. Es wurde versucht jedes Animationselement individuell zu gestalten, um verschiedene visuelle Effekte zu erzeugen. Die letzte Besonderheit ist, dass der letzte Button einen Neustart der Animation ermöglicht, falls man erneut das Story Telling durchspielen möchte.
Schwierigkeiten
Beim Erstellen der Animation traten zwei Probleme auf.
Der animierte Sprechtext sollte ursprünglich abgetippt werden. Dafür wurde die step() Methode verwendet. Leider konnte ein Zeilenumbruch für die Animation nicht erstellt werden, da ansonsten der “abgetippte Text” nicht korrekt funktioniert hat wie er es sollte. Dieser hätte in die Sprechblase passen müssen. Daher wurde eine alternative Darstellung des Textes eingebaut.
Die Hintergrundmusik wird manchmal in Google Chrome nicht abgespielt. Daher wird empfohlen sich die Animation in Microsoft Edge anzuschauen.
Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2021, Amy Linh Hoang, Prof. Dr.-Ing. Steinberg) entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript. Die besten Tutorials stellen wir Euch hier in den nächsten Wochen nach und nach vor.