Tutorial: Visual Graphic Novel Animation

Tutorial: Visual Graphic Novel Animation

Autori*n: Julia Karaschewski


Vollansicht: Visual Graphic Novel Animation auf Codepen.io
Quellcodeansicht: Visual Graphic Novel Animation auf Codepen.io
ZIP-Datei zum Download (direkt von Codepen.io)

Das Konzept

Die Idee der Animation ist, ein erheiterndes, kleines Visual Graphic Novel zu erstellen, durch das der User mit visuellen Effekten durchgeführt wird.

Das Ziel ist, den User von Anfang bis Ende durch mehrere kleine Animationen zu führen, während er Interaktionen ausführt und Feedback zu den ausgeführten Aktionen erhält. Das Feedback besteht ebenfalls aus visuellen Effekten, sodass der User jederzeit weiß, wo und in welcher Ebene er sich befindet.

Die Führung durch das Visual Graphic Novel erfolgt visuell durch verschieden aufleuchtende Buttons. Durch sich farblich (türkis) abgrenzende Umrandungen der Buttons wird der User zu den gewünschten Aktionen gelotst, da diese am meisten auffallen (über Bewegung und Farbe).

Das Visual Graphic Novel besteht aus zwei Szenen, die der Nutzer frei wählen kann. Die Reihenfolge der Auswahl hat dabei keine Auswirkungen.

Inhaltsverzeichnis des Beitrags

Aufbau des Visual Graphic Novels

Es gibt 4 Ebenen:

  • 1. Start-Bildschirm
  • 2. Szenen-Wahl
  • 3. Home-Scene
  • 3. Outdoor-Scene
  • 4. End-Bildschirm

Die erste Ebene, der Startbildschirm, dient dem User dazu, das Visual Graphic Novel zu starten.
Auf der zweiten Ebene kann der User eine Szene (Home- oder Outdoor-Szene) auswählen, ohne jedoch das Szenenbild vorher zu sehen. Hier liest er nur den Text der Entscheidungsmöglichkeiten, was auch einen kleinen Überraschungseffekt bei der Auswahl geben soll.
Auf der dritten Ebene kann der User dann zwischen den beiden Szenen hin und her springen, so oft er möchte. Um das ganze unterhaltsamer zu machen, spricht die Figur einen Text. Die Sprechblase wiederholt sich hierbei unendlich oft, sodass der User den Text gut lesen kann, ungeachtete der Lesegeschwindigkeit.
Die vierte Ebene ist der Endbildschirm, wo sich ein “Thanks for playing” (DE: “Danke für das Spielen”) bei dem User verabschiedet. Auf dieser Ebene hat der User die Möglichkeit, das Visual Graphic Novel erneut zu starten.

Verwendete Programmiersprachen:

Die ganze Animation wurde auf Codepen erstellt. Für die Erstellung der einzelnen Animation/-en wurden verwendet:

    • HTML5
    • CSS3
    • JavaScript & JQuery

Um JQuery zu verwenden, muss dies bei den Codepen-Einstellungen erst mit diesem Link https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js importiert werden, wie auf der folgenden Abbildung:

Eigene Abbildung: Bei Codepen JQuery importieren
Eigene Abbildung: Bei Codepen JQuery importieren

Besonderheiten

Die Besonderheiten bei dem Visual Graphic Novel sind klein, haben jedoch einen großen Effekt und Einfluss.
Zunächst ist das Design schlicht gehalten, bzw. der Hintergrund und die Hauptfarbe der Buttons. Dadurch wird die Aufmerksamkeit des Users auf die Szenen(-bilder) und die einzelnen, visuellen Effekte gelenkt.

Die Effekte der Klasse ‘hint

Die Klasse ‘hint’ hat das Ziel, den User durch das Visual Graphic Novel zu führen. Der visuelle Effekt ist ein türkis-farbenes Pulsieren (in CSS definiert). Beim Startbildschirm (Ebene 1) wird die Aufmerksamkeit des Users somit vor allem auf den Start-Button gelenkt. Danach (Ebene 2) wird der Effekt “verschoben” und ist nun nur auf der Szenen-Auswahl zu sehen, damit der User weiß, dass er sich nun für eine der beiden Optionen entscheiden soll. Ist nun eine Szene ausgewählt (Ebene 3), wird der pulsierende Farb-Effekt auf die nicht ausgewählte Option verschoben, sowie den Stop-Button. Damit weiß der User zum Einen, dass die andere Option noch ausgewählt werden kann, und zum Anderen, dass jederzeit das Spiel nun beendet werden kann. Wird nun auf den Stop-Button geklickt, wird der Farb-Effekt erneut auf den Start-Button geschoben, damit der User nun die Möglichkeit erkennt, erneut auf Start zu klicken. Die Steuerung, wann der Farb-Effekt, bzw. die Klasse ‘hint’ wo hin verschoben werden soll, wird mit Hilfe der Buttons in JavaScript festgelegt. Der Effekt selbst wird mit CSS erstellt, mehr dazu unter dem Abschnitt Visuelle Effekte.

Die Figur und Objekte

Die Figur ist nicht nur eine Dekoration, sondern erfüllt auch einen Zweck: Ein Feedback an den User. Das Feedback ist simpel: Wurde sich nun für eine Szene entschieden, taucht eine Sprechblase von der Figur auf. Damit wird dem User gezeigt, dass die Szenen-Auswahl durchgeführt wurde und etwas passiert ist. Dabei wird der gesprochene Text in der Sprechblase unendlich oft wiederholt, damit der User jederzeit den Text erneut und so oft er will lesen kann. Des Weiteren erheitert der gesprochene Text der Figur (hoffentlich!) den User und hinterlässt somit einen positiven Eindruck. Die Figur wird in CSS mit der Klasse ‘figure’ definiert.
Die anderen Objekte / Graphiken dienen hier der Dekoration und erhöhen den Spaß-Effekt beim Umschalten der Szenen.

Der Wegweiser

Der Wegweiser (eine SVG-Graphik), der einzig allein in Ebene 2 auftaucht, besitzt eine wichtige Funktion: Das Wegweisen. Da Graphiken, bzw. Bilder, meist mehr für sich sprechen als Text, wird dem User vor dem Lesen der Optionen bereits gezeigt, dass nun eine Entscheidung auf ihn zukommt. Ein Wegweiser ist hierbei ein allgemein bekanntes Symbol, dass von dem User nicht falsch verstanden werden kann, und dabei schneller auffällt als der Text in den Optionen. Der Wegweiser wird mit der ID ‘#signpost’ in CSS definiert und mit Hilfe von JavaScript gesteuert. Mehr dazu unter dem Abschnitt Buttons & Option.

Grundbausteine

Da es in dem Visual Graphic Novel viele verschiedene Elemente gibt, die von JavaScript gesteuert werden und auf verschiedenen Instanzen auftauchen sollen, schließen verschiedene div-Container diese ein.

Body

body {
background-size:cover;
font-family: "Comic Sans MS", Helvetica, sans-serif;
border: 1px dashed #ffffff;
border-radius: 30%;
box-shadow:0px 0px 350px; #000000;;
background: radial-gradient(#28427B,#14213D, #0d001f);
justify-content:center;
background-position: center;

Im ‘body’ wird alles Wichtige wie background-size, background-color, sowie die Inhaltsplatzierung innerhalb des ‘bodys’ und die Schriftart definiert. Die border- und box-shadow-Einstellungen schaffen hierbei eine Abgrenzung von dem restlichen Browserfenster und begrenzen die Darstellungsoberfläche des Visual Graphic Novels.

Main-Content-Container

.main-content {
max-width: 700 px;
margin: 0em auto 0;
text-align: center;
max-height:500px;
overflow: hidden;

Der div-Container mit der Klasse ‘main-content’ ist dafür da, um den gesamten Inhalt (also alle Graphiken) als eine Einheit zu platzieren und sie durch JavaScript und JQuery zu steuern, d.h. einen Start-Bildschirm zu erschaffen. Damit kann der gesamte Inhalt in ‘main-content‘ mit einem Klick aus- und eingeblendet werden, wenn einer der Buttons gedrückt wird. Das geschieht dadurch, dass dieser Klasse eine Id ‘gamestop’ und ‘gamestart’ (definiert in CSS) mit der Eigenschaft ‘visibility:hidden’ zugewiesen und wieder entfernt wird.

<!-- die Id wird in JS genutzt, um einen Startbildschirm zu erschaffen --!>
<div id="gamestart" class="main-content"> <!-- wird genutzt, um den main-content zu steuern und zu positionieren -->
$(".start-button").on("click", function() {
$(".main-content").removeAttr("id", "gamestart");
$(".stop-button").on("click", function() {
$(".main-content").attr("id", "gamestop");

 

Mehr zu den Buttons später.

Illustration-Container

.illustration {
position: relative;
align-self: flex-end;
marfin: auto;
height: 250px;
width: 250px;

Der div-Container ‘illustration’ enthält alle Graphiken, bzw. SVG-Graphiken, und fixiert diese. Da nicht alle SVG-Graphiken eine geeignete Proportionalität besitzen, um zusammen dargestellt zu werden, hilft das Fixieren auch dabei, um sie gegenseitig aufeinander abzustimmen.

Person-type: Home-Body & Outdoor-Person

<div class="person-type home-body active"> <!-- hier ist die home-scene mit dazugehörigen Objekten -->
<div class="scenery">
<img src="https://image.freepik.com/free-vector/living-room-interior-with-panoramic-window-night-time_33099-1735.jpg" class="backgroundimg"/>
</div>
<div class="background.items">
<img src="https://image.flaticon.com/icons/svg/214/214283.svg" width="100px" height="400px"/>
</div>
<div class="foreground-items">
>img src="http://image.flatcon.com/icons/svg/198/198916.svg" width="65px" style="margin-left:-10%"/>
<img src="Http://image.flaticon.com/icons/svg/3145/3145435.svg" width="65px" style="padding-left:30%;"/>
</div>
</div>

Mit der Klasse ‘person-type‘ werden in CSS alle Kindelemente dieser Klasse definiert und in JavaScript zwischen den Szenen hin- und hergewechselt, wenn die jeweilige Option ausgewählt wird.

.person-type > div {
transform: scale(0);
opacity:0;
}
.person-type.active > div {
transform: scale(1);
opacity: 1;

Durch ‘person-type > div’ werden alle Kindelemente der Klasse ‘person-type‘ ausgewählt. Es gibt ‘person-type‘ einmal für die Home-Szene (inklusive der dazugehörigen Graphiken) und dann für die Outdoor-Szene. Wenn eine der Szenen ausgewählt wird, wird diese Szene durch ‘person-type.active’ (definiert in CSS) nach “vorne geschoben‘(transform:scale (1))’ und durch ‘opacity:1’ sichtbar gemacht. Die andere Szene wird durch ‘person-type > div’ nach “hinten geschoben ‘(transform:scale(0))’ und mit ‘opacity:0’ unsichtbar gemacht. Dadurch können beide Szenen an den gleichen Platz im Container geschoben werden, ohne dass sie sich gegenseitig verdrängen. Die Szenenauswahl wird durch den Button mit JavaScript ausgelöst. Darauf wird später in Buttons & Option noch mehr eingegangen.

Container Scenery & Backgroundimg

Der div-Container ‘scenery’ umfasst das Szenenbild (für jeweils die Home- und Outdoor-Szene). Mit dieser Klasse wird der Einblendungseffekt / Übergangseffekt beim Szenenwechsel in CSS mit ‘transition:’ definiert.

<div class="scenery">
<img src="https://image.freepik.com/free-vector/living-room-interior-with-panoramic-window-night-time_33099-1735.jpg" class="backgroundimg"/>
</div>

Der div-Container ‘backgroundimg’ wird in CSS definiert und erfüllt den Zweck, die Hintergrundbilder der Szenen auf die gleiche Größe zu skalieren und dem Bild mit ‘border-radius’ und ‘box-shadow’ eine Form und einen visuellen Tiefen-Effekt zu geben.

.scenery 7
transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
z-index: -2;
0/* Styled die Hintergrundbilder der Scenen */
.backgroundimg7
border-radius:50%;
margin-left:-73%;
width:626px;
height: 3356px;
box-shadow: 0px 0px 15px #000000;

Foreground-items Container

<div class="foreground-items">
<img src="https://image.flaticon.com/icons/svg/198/198916.svg" width="65px" style="margin-left:-10%;"/>
<img src="https://image.flaticon.com/icons/svg/3145/3145435.svg" width="65px" style="padding-left:30%;"/>
</div>

Der ‘foreground-items’ div-Container beinhaltet die Graphiken, die sich in den beiden Szenen jeweils weiter vorne befinden und bei einem Szenenwechsel später eingeblendet werden als die Graphik im Hintergrund und das Hintergrundbild.

.forground-items {
transition: all 300ms cubuic-bezier(0.68, -0,55, 0.265, 1.55) 200ms;
margin-top:100%;
}

Mit ‘transition:’ wird der Einblendungseffekt / Übergangseffekt dieser Objekte beim Szenenwechsel festgelegt.

Background-items Container

Der div-Container mit der Klasse “background-items” beinhaltet die eine Graphik (jeweils in beiden Szenen), die zu einem früheren Zeitpunkt als die Graphiken in dem ‘foreground-items container’ in der ausgewählten Szene auftauchen. Dies ist in CSS mit ‘transition:’ definiert, wie in der folgenden Abbildung zu sehen ist.

.backgrouznd-items {
transition: all 200ms cubic-bezier(0.68, -0.55, 0.265, 1.55) 100ms;
top: 23px;
}

Option-Wrapper

Der div-Container ‘option-wrapper’ beinhaltet beide Szenen-Optionen und umschließt diese, damit sie zusammen in einem Button erscheinen können. Außerdem wird mit dieser Klasse der div-Container per JavaScript “anvisiert”, bzw. mit einem Leuchteffekt versehen, damit dieser zum geeigneten Augenblick die Aufmerksamkeit des Users bekommt. Zu den Buttons unter Buttons und zu dem Leucht-Effekt unter Visuelle Effekte mehr.

<div class="option-wrapper">
<aclass="option active wobble-vertical-on-hover homeoption hint" data-option="home">
I'm gonna read a nice book and stay in. </a>
<a class="option wobble-vertical-on-hover outdooroption hint" data-option="outdoor">
I'm gonna explore the wide world and beyond! </a>
</div>

Buttons & Option

Die Klasse ‘option’ ist allen Buttons zugeteilt. Also jeweils dem Start- und Stop-Button sowie beiden Szenen-Optionen. Die Klasse ‘option’ regelt mit ‘transition:’ in CSS den Übergang der ausgewählten Option sowie den Style der einzelnen Optionen. Somit grenzen sich z.B. die Outdoor-Szene und Home-Szene innerhalb des ‘Option-Wrappers’ voneinander ab und erscheinen als zwei eigene Buttons. Mit ‘cursor’ wird zudem der Cursor über dem Button definiert.
Die Klasse ‘active’ definiert, wie die ausgewählte Option aussieht. Durch die Klasse ‘active’ verändert sich die Hintergrundfarbe und Schriftfarbe des Buttons (gelber Hintergrund, schwarze Schrift), wenn dieser angeklickt wird.

.option {
transition: all 200ms ease;
padding: 10px 10px 8px;
width: 50%;
border-radius: 50px;
cursor: pointer;
color: #ffffff;
} /* gibt aktiver Option style */
.active{
background: #FFB200;
pointer-events: none;
color: '000000;
}
.option:hover: {
text-decoration: none;
}

Bei der Szenenauswahl wird der ‘person-type’ der jeweiligen Option angesprochen, der bei beiden Szenen unterschiedlich ist und in der JavaScript-Funktion jeweils definiert ist, bzw. welche Elemente dazugehören. Der Wechsel der Optionen, sowie die Zuweisung der Klasse ‘active’, geschieht mit folgender Funktion in JavaScript:

$(".option").on("click", function() {
$(".person-type").removeClass(active");
$(".option").removeClass("active");
$(this).addClass("active");
var type = $(this).data("option");
console.log($(type));

Die beiden Person-Types (‘data-option’ in HTML) der Optionen, also ‘person-type home’ und ‘person-type outdoor’ in JavaScript, bestimmen, welche weiteren Grafiken / Objekte dargestellt werden. Dies ist definiert als if und else if (untere Abbildung) in der Funktion “click”, (obere Abbildung). Wird also die ‘option’ mit dem ‘type == “home”‘ (in HTML data-option) angeklickt, wird der Klasse ‘home-body’ die Klasse ‘active’ zugewiesen. Desweiteren werden damit alle benötigten Elemente für diese Szene eingeblendet, sowie nicht benötigte ausgeblendet, mit folgender Funktion:

setTimeout(function() {
if (type === "home") {
$(".home-body").addClass("active");
$("#signpost").css({"visibility": "hidden"});
$("#bubbletoggle1").css({"visibility": "visible"});
// Hier der Wechsel der Sprachblasen
$(".bubble2").hidden();
$(".bubble1").show();
$".stop-button").addClass("hint");
$(".homeoption").removeClass("hint");
}
<div class="option-wrapper ">
<a class="option active wobble-vertical-on-hover homeoption hint" data-option="home">
I'm gonna read a nice book and stay in.</a>
<a class="option wobble-vertical-on-hover outdooroption hint" data-option="outdoor">
I'm gonna explore the wide world and beyond! </a>
</div>

Der ‘Signpost’ ist eine Grafik, die in Ebene 2 eingeblendet wird, hier jedoch ausgeblendet werden soll. Mit der Klasse ‘hint’ wird eine farbliche (türkis-farbene) Umrandung um den Stop-Button gesetzt, damit der User darauf aufmerksam gemacht wird, dass er das Visual Graphic Novel ab jetzt beenden kann. Gleichzeitig wird diese Klasse der jetzt ausgewählten Option entzogen, da die Aufmerksamkeit des Users bereits auf diesem Button liegt. Die ID ‘#bubbletoggle1’ ist in einem anderen Abschnitt erklärt.

Der Start- und Stop-Button

Der Start- und Stop-Button dient dazu, einen Start-Bildschirm und einen End-Bildschirm zu erschaffen, sowie dem User die Möglichkeit zu geben, dass Visual Graphic Novel jederzeit zu verlassen. Dazu wird den beiden Buttons die Klasse ‘active’ gegeben, damit diese genauso wie die Szenen-Options reagieren (weiter oben beschrieben). Ebenso wird zum Zwecke der User-Lenkung und User-Aufmerksamkeit die Klasse ‘hint’ vergeben, die farbliche Effekte (türkis-farbene Umrandung) vergibt.

<span class="hint">
<div class="button hint" style="">
<a class="Start-button option wobble-veretical-on-hover hint">Star !</a>
<a class="stop-button option wobble-vertical-on-hover">Stop playing !</a>
</div>
</span>

Der Style der beiden Buttons wird in CSS festgelegt. Dafür wird die Klasse ‘buttons’ vergeben. Der Zweck der Klasse ‘hint’ wird im Abschnitt ‘Besonderheiten’ und die CSS-Definition unter Visuelle Effekte  mehr erläutert.

.button{
display: flex;
position: center;
margin:0en auto;
background: rgba(255,255,255,0.25);
border-radius: 50px;
padding: 5px;
max-width: 300px;
font-size: 15px;
line-height: 1.2;
} /* Wird genutzt, um per JS zu steuern, wann der Inhalt auftaucht, wenn die buttons gedrückt werden*/
#gamestart{
visibility:hidden;
}
#gamestop{
visibility:hidden;
}/* Danke-Text am Ende des Spiels */

Die ID ‘#gamestart{visibility:hidden;}’ und ‘#gamestop{visibility:hidden;}’ werden in JavaScript dafür verwendet, um beim Klicken der Buttons den ‘main-content’ einzublenden und beim Drücken des Stop-Buttons den ‘main-content’ auszublenden. Zur Übersichtlichkeit der Steuerung in JavaScript wurden also die beiden ID’s jeweils einzeln in CSS definiert, obwohl sie die gleichen Attributwerte besitzen. Die beiden Funktionen für den Start-Button und den Stop-Button sehen wie folgt aus:

$(".star-button").on("click", function() {
$(".main-content").removeAttr("id", "gamestart");
$(".thanks").css({"visibility": "hidden"});
$("#signpost").css({"visibility": "visible"});
// "hint" gibt dem User Hinweise, wo hingeklickt werde
$(".button").removeClass("hint");
$(".start-button").removeClass("hint");
$(".option-wrapper").addClass("hint");
});
//Funktion und eizelne Aktionen, die ausgeführt werde
$(".stop-button").on("click", function() {
$(".mnain-content").attr("id", "gamestop");
$(".bubble").hide();
$("#signpost").removeAttr("style", "visible");
$(".thanks").css({"visibility": "visible"});
$(".button").addClass("hint");
// wenn der stop-button geklickt wird, muss das lightni
$(".stop-button").removeClass("hint");
//hiermit wird die Klasse "hint" den beiden Scenen-Opt
$(".homeoption").addClass("hint");
$(":outdooroption").addClass("hint");
});

Die beiden Funktionen definieren auch, was beim Drücken des Buttons eingeblendet und ausgeblendet werden soll. Dies geschieht durch die Klassen und ID’s, die in CSS definiert sind (wenige Ausnahmen befinden sich als Attributwert in HTML).

Sprechblase

Die Sprechblase der Figur in beiden Szenen hat jeweils einen verschiedenen Text. Aus diesem Grund wurden einmal die Klassen ‘bubble1’, ‘bubbletoggle1’, ‘bubble2’, ‘bubbletoggle2’ vergeben und an beide jeweils die Klassen ‘bubble’ und ‘anim-typewriter’.

<div id="bubbletoggle1" class="buble1" style="visibility:hidden;">
<a lass="bubble bubble1 anim-typewriter "> Ah! That was a good desicion! Now a nice cup of tea...would you set the kettle on? </a>
</div>
<div id="bubbletoggle2" class="bubble2" style="visibilioty:hidden;">
<a class="bubble bubble2 anim-typewriter">What a lovely day, isn't it? Ans such charming strangeers visiting!</a>
</div>

Die Klasse bubble

Die Klasse ‘bubble’ ist dafür da, um die Sprechblase per CSS zu stylen. Die CSS-Attributwerte von ‘min-width’, ‘max-width’, ‘max-height’ sind hierbei besonders wichtig, da sie bestimmen, wie groß die Sprechblase werden kann, wenn der Text auftaucht. Je nachdem, wie lang der Text ist, muss natürlich auch die ‘min-width’, ‘max-width’ und ‘max-height’ angepasst werden. Wäre ‘max-height’ in diesem Fall kleiner als die festgelegten ’50px’, würde nicht der ganze Text auftauchen können.

.bubble {
z-index:4;
min-width: 0px;
max-width: 210px;
max-height: 50px;
font-size: 15px;
line-height: 1.2;
display: flex;
text-align: center;
position: absolute;
border-radius: 50px;
margin-right:auto;
margin-left: auto;
left: 85%;
righht:0;
top:50%;
padding:1px;

Des Weiteren ist die Klasse ‘bubble’ auch dafür da, um mit dem Stop-Button die Sprechblase an sich vollends auszublenden (siehe Abschnitt Buttons.

Die Klasse anim-typewriter

Diese Klasse ist in CSS definiert. Sie sorgt für den Effekt der auftauchenden Sprechblase, wo der Text nach und nach erscheint.

.anim-typewriter{
animation: typing 7s steps(8,end) intinite normal both;
-webkit-animation-duration: 7s;
}
@keyframes typing{
from{width: 0;}
to{width: 20em;}

Wichtig hierbei ist der Attributwert infinite, der leider etwas schwierig zu handhaben ist. Darauf wird in “bubbletoggle: Der unendliche Text” weiter eingegangen.

Die Klassen bubble1 und bubble2

Die Klassen ‘bubble1’ und ‘bubble2’ werden in JavaScript verwendet, um die jeweilige Sprechblase in der richtigen Szene einzublenden und auszublenden. Die Klasse ‘bubble1’ ist hierbei für die Home-Szene, ‘bubble2’ für die Outdoor-Szene. Aus- und eingeblendet wird die Klasse in JavaScript mit ‘$(.bubble1).hide()’ und ‘$(.bubble1).show()’. Da beide Szenen auch unterschiedlich helle Hintergründe haben, wird mit dieser Klasse in CSS auch die Farbe der Sprechblasen angepasst.

.bubble.bubble1{
background:rgba(255, 255, 255, 0.30);
padding: 6px 6px 4px;
}
.bubble.bubble2{
background:rgba(26, 22, 95, 0.55);
padding: 6px 6px 4px;

Bubbletoggle: Der unendliche Text

Eigene Abbildung: Der unendliche Text der Sprechblase
Eigene Abbildung: Der unendliche Text der Sprechblase

Der Text in den Sprechblasen wird unendlich wiederholt, um dem User das Lesen zu ermöglichen und zu vereinfachen, wann auch immer die Szene ausgewählt wird und unabhängig davon, wie schnell die Lesegeschwindigkeit des Users ist. Die Klassen ‘bubbletoggle1’ und ‘bubbletoggle2’ werden dafür verwendet, um den Text der Sprechblasen durch JavaScript (und CSS) in HTML mit ‘visibility:hidden’ und ‘visibility:visible’ unsichtbar und sichtbar zu machen. Dies ist sehr ähnlich wie das, was die Klassen ‘bubble’ und ‘bubble1’ (oder bubble2) schon machen. Hierbei gibt es aber ein Problem: Unendlich heißt unendlich. Die einzige Möglichkeit in diesem Fall, den sich unendlich wiederholenden Text in der Sprechblase unsichtbar zu machen, ist über eine extra ID und ein dazugehöriger Style-Attributwert in HTML, der in JavaScript gezielt angesprochen wird. Damit wird keine andere Klasse beeinflusst oder verändert, was später zu Komplikationen führen könnte. In JavaScript sieht das dann folgendermaßen aus: $(“bubbletoggle1″).css({visibility:”visible”}); für die Home-Szene und für die Outdoor-Szene $(“#bubbletoggle2”).css({“visibility:”visible”}); . In dem Abschnitt Buttons ist die gesamte Funktion erklärt und zu sehen.

<div id="bubbletoggle1" class="bubble1" style="visibility:hidden;">
<a class="bubble bubble1 anim-typewriter ">Ah! That was a good decision! Now a nice cup of tea...would you set the kettle on?</a>
</div>
<div id="bubbletoggle2" class="bubble2" style="visibility:hidden;">
<a class="bubble bubble2 anim-typewriter">What a lovely day, isn't it? And such charming strangers visiting!</a>
</div>

Visuelle Effekte

Die Klasse hint

Eigene Abbildung: Klasse hint beim Start-Button und Stop-Button
Eigene Abbildung: Klasse hint beim Start-Button und Stop-Button

Die User-Lenkung durch die Klasse ‘hint’ wurde vom Zweck und der Funktion her im Abschnitt Besonderheiten erläutert. Der Licht-Pulse-Effekt wird in CSS erstellt und definiert.

.hint{
-moz-border-radius: 200px/200px;
-webkit-border-radius: 200px 200px;
border-radius: 200px/ 200px;;
border:1px solid #52c7aa;
width: auto;
height:auto;
outline:none;
-webkit-animation-name: hintPulse;
-webkit-animation-duration: 2s;
-webkit-animation-interation-count: infinite;
}
@-webkit-keyframe hintPulse {
from { -webkit-box-shadow: 0 0 3px #0c2720; }
50% { -webkit-box-shado: 0 0 21px #52c7aa; }
to {-webkit-box-shadow: 0 0 12px #246E5B; }
}

Die Dauer der Animation ist mit ‘-webkit-animation-duration:2s;’ festgelegt. Der Farbwechsel (oder auch die Intensität) im Verlauf der Animation ist durch die ‘@-webkit-keyframes hintpulse’ definiert. Dabei wurden verschiedene Abstufungen des original Farbtons für die Intensität verwendet.

Der Wobble-Effekt

Der Wobble-Effekt wird durch die Klasse ‘wobble-vertical-on-hover’ in CSS definiert. Beim Hovern über ein Element mit dieser Klasse “wobbelt” jenes. Damit weiß der User, dass mit diesem Element interagiert werden kann. Die Definition und Animation ist in CSS festgelegt.

.wobble-vertical-on-hover:hover, .wobble-vertical-on-hover:focus, .wobble-verical-on-hover:active {
-webkit-animation-name: wobble-vertical-on-hover;
animation-name: wobble-vertical-on-hover;
-webkit-animation-duration: 1s;
animation-duration: 1.5s;
-webkit-animation-timing-function: ease-in-out;
animation-timing-function: 1;
-webkit-animation-interation-count: 1;
animation-interation-count: infinite;
} /* Bewegungen der Animation wobble, aufgeteilt nach Prozent */
@keyframes wobble-vertical-on-hover {
16.65% {-webkit-transform: translateY(8px);transform: translateY(8px);}
33.3% {-webkit-transform: translateY(-6px);transform: translateY(-6px);}
49.95% {-webkit-transform: translateY(4px);transform: translateY(4px);}
66.6% {-webkit-transform: translateY(-2px);transform: translateY(-2px);}
83.25% {-webkit-transform: translateY(1px);transform: translateY(1px);}
100% {-webkit-transform: translateY(0);transform: translateY(0);}
}

Mit der Klasse ‘wobble-vertical-on-hover’ und zusätzlich ‘:hover’, ‘:focus’, ‘:active’ wird festgelegt, dass sowohl beim hover, als auch so lange die Maus darauf ist der Effekt gilt. Mit ‘animation-iteration-count:infinite’ wird dieser Effekt so lange wiederholt, bis weder ‘hover’,’active’ noch ‘focus’ für dieses Element gilt, bzw. es dadurch nicht mehr ausgelöst wird. Mit ‘@keyframes wobble-vertical-on-hover’ wird die Bewegung nach oben und unten definiert/ festgelegt; also die Vektoren, wo sich das Element mit dieser Klasse an einem bestimmten Prozent(-punkt) der Bewegung befinden muss.

Und nun sind alle wichtigen Code-Abschnitte erklärt. Falls das Interesse an dem Quellcode (inklusive Kommentare darin!) vorhanden ist, muss nur wieder nach zum Seitenanfang gesprungen, die ZIP-Datei heruntergeladen und entpackt werden!


Dieser Beitrag ist im Studiengang Informationsmanagement an der Hochschule Hannover im Rahmen des Kurses Entwicklung von Multimediasystemen (Sommersemester 2020, 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.

Tutorial: Wetter Szenarien

Wetter Szenarien

Tutorial: Wetter Szenarien

Autoren: Fabian Krampe und Michel Kühne

Das Konzept

Das Konzept hinter dem Projekt sah vor, eine Animation zu schaffen, welche dem Nutzer alle möglichen Wetter Szenarien zeigt. Die Animation wird hierbei im Hintergrund eines einfachen Preloaders geladen. Der programmierte Button ermöglicht es außerdem, die Animation zu “verstecken” oder diese wieder anzeigen zu lassen. Unten seht Ihr das fertige Projekt.

Das Tutorial

Fangen wir mit dem “Head” des HTML-Dokuments an. Hierbei sind die standardisierten HTML Tags zu beachten, wie z.B. den DOCTYPE anzugeben. Außerdem ist es wichtig, im “Head” auf die externe JavaScript Datei zu verlinken. Auf diese Verlinkung und die damit verbundenen Möglichkeiten gehe ich unten genauer ein.

Im Folgenden der “Head” des HTML-Dokuments.

<!DOCTYPE html> 
<html> 
<head> 
<a href="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js </a> 
<meta charset="UTF-8" /> <link rel="stylesheet" href="css.css"> 
<a href="http://js.js">http://js.js</a>
 </head>

Nachdem wir nun den “Head” erfolgreich programmiert haben, folgt auch schon der erste JavaScript Funktionsaufruf. Hierbei wird beim Laden des “Body” die Funktion “myFunction” aufgerufen. Auf die Funktion an sich wird später genauer eingegangen. Das Ganze sieht wie folgt aus:

<body onload="myFunction()" style="margin:0;">

Der nächste HTML Block zeigt zunächst einen DIV Aufruf. Dabei wird der DIV durch die oben beschriebene Funktion aufgerufen und erzeugt somit den Preloader. Anschließend werden die Button erzeugt, welche dafür zuständig sind, ob die Animation dargestellt wird oder bei entsprechendem Klick wieder verschwindet. Um dies zu realisieren benötigen wir einen DIV, welcher beim Klicken auf den entsprechenden Button entweder einen leeren DIV über die Animation legt oder diesen wieder verschwinden lässt. Das wird realisiert durch den DIV mit der ID “hidden”. In der letzten Zeile wird schlussendlich die eigentliche Animation aufgerufen.

<div id="loader"></div> 
<button id = "hide">Anzeigen</button> 
<button id = "show">Löschen</button> 
<div id="hidden"> <div style="display:none;" id="myDiv" class="animate-bottom">

Die Animation braucht definierte DIVs um die gewünschten Wetter Szenarien darzustellen. Diese DIVs werden im folgenden Abschnitt realisiert und definiert. Dabei ist es sinnvoll, dass nicht jeder Animationsschritt einzeln definiert wird. So kann z.B. bei der Darstellung der Wolke auf eine einmalige Definition dieser zurückgegriffen werden. Dadurch minimiert man den Quellcode und optimiert somit die Ladegeschwindigkeit. Nun der HTML-Code:

<div class="wrapper">
  <div class="sun"></div>
  <div class="cloud">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div class="cloud_s">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  
  <div class="cloud_vs">
    <div class="cloud1">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
    <div class="cloud1 c_shadow">
      <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </ul>
    </div>
  </div>
  <div class="haze"></div>
  <div class="haze_stripe"></div>
  <div class="haze_stripe"></div>
  <div class="haze_stripe"></div>
  <div class="thunder"></div>
  <div class="rain">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>
  <div class="sleet">
     <ul>
       <li></li>
       <li></li>
       <li></li>
    </ul>
  </div>

Im letzten Abschnitt des HTML-Codes erzeugen wir einen ebenso wichtigen DIV, damit die Nutzer erklärt bekommen, um welche Wetterlage es sich bei der Animation handelt. Dazu erzeugen wir einen DIV mit dem Namen “text”. Wie der Name bereits sagt, handelt es sich hierbei um den DIV, der nun die Unterschriften zur passenden Animation zeigt. Anschließend schließen wir sämtliche DIVs und beenden das HTML-Dokument mit dem entsprechenden Tag. Das könnte wie folgt aussehen:

 <div class="text">
    <ul>
      <li>Überwiegend sonnig</li>
      <li>Teilweise sonnig</li>
      <li>Teilweise bewölkt</li>
      <li>Überwiegend bewölkt</li>
      <li>Bewölkt</li>
      <li>Nebelig</li>
      <li>Stürmisch</li>
      <li>Regnerisch</li>
      <li>Schnee</li>
    </ul>
  </div>
</div>
</div></div>



</body>
</html>

CSS

Kommen wir nun zum oben eingebundenen CSS-Code. Dieser ist leider zu lang um ihn hier einzeln zu erläutern. Deshalb werde ich nur grob umschreiben, was die wichtigsten CSS-Funktionen sind. Der gesamte Code kann oben in der CodePen-Fassung eingesehen und nachvollzogen werden.
Der DIV mit dem Namen “loader” definiert den PreLoader. Wichtig ist hierbei der sogenannte “Z-Index”. Dieser gibt an, in welcher Reihenfolge die DIVs auf den Ebenen verteilt sind. Mit “Z-Index 1” ist der Preloader auf der ersten Ebene untergebracht und steht somit vor allen anderen Ebenen. Dies ist wichtig, damit der Preloader die eigentlich Seite während des Ladens überlagert.
Anschließend werden die einzelnen Animationen näher definiert. Hierbei ist ebenfalls der “Z-Index” sehr wichtig um die einzelnen Animationen überlagern zu können. Andere Befehle definieren die Farbe, Position und so weiter.
Ebenfalls sehr wichtig, sind die “animation” Befehle. Damit werden die einzelnen DIVs angesprochen und so animiert, dass es zu einem fließenden Übergang zwischen den einzelnen Wetteranimationen kommt.
Zum Schluss werden die einzelnen Keyframes definiert. Hierbei wird besonderer Wert auf die “Durchsichtigkeit” der einzelnen DIVs gelegt. So wird schlussendlich ein fließender Übergang mit einem “Slide-Effekt” ermöglicht.
Wie oben bereits erwähnt, können all diese Funktionen innerhalb der CodePen Einbettung nachvollzogen und geändert werden.

Der JavaScript Teil

Kommen wir nun zum letzten Teil, dem Javascript-Code. Um die ganze Animation zu starten und die Button mit Funktionen zu versehen, starten wir mit dem ersten Teil der Animation. Und zwar dem Preloader. Hierzu wird eine Funktion beim Laden des “Body” aufgerufen. Diese lädt eine neue Funktion namens “showPage”. Das erste was in der neuen Funktion aufgerufen wird, ist der DIV “loader”. Dieser wird laut der ersten Funktion drei Sekunden lang gezeigt. Nach diesen drei Sekunden wird laut “showPage” ein anderer DIV aufgerufen und zwar der DIV mit dem Namen “myDiv”. Die beiden Funktionen sehen wie folgt aus:

 function myFunction() {
    myVar = setTimeout(showPage, 3000);
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("myDiv").style.display = "block";
}

Zum Abschluss müssen noch die Buttons eine Funktion bekommen. Dazu sprechen wir die oben erzeugten Buttons mit “document” an. Anschließend bestimmen wir Anhand der id die genaue Funktion der einzelnen Button. Wird z.B. der Button mit der id “show” betätigt, wird der DIV “hidden” aktiviert und überlagert laut CSS Definition die gesamte Seite. Es wird das Bild der “gelöschten” Animation erzeugt. Das ganze kann per Klick auf den Button “hide” wieder rückgängig gemacht werden, denn dieser lässt den DIV hidden wieder “verschwinden”. Das ganze kann wie folgt aussehen:

 $(document).ready(function(){
    $("#hide").click(function(){
        $("#hidden").hide();
    });
    $("#show").click(function(){
        $("#hidden").show();
    });
});

Ich hoffe wir konnten euch mit diesem Tutorial die Funktionsweise unseres Projektes nahelegen. Für Anregungen, Kritik oder Lob stehen wir euch immer zur Verfügung.

 

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Tutorial: Einen Preloader erstellen

Preloader

Tutorial: Einen Preloader erstellen

Autoren: Straube und Wisnia

Konzept

Preloader sind Animationen, die während dem Ladevorgang einer Website angezeigt werden. Sie informieren den Nutzer über Ladeprozesse und befriedigen sein Bedürfnis  zu wissen, was während der Interaktion mit einer Website im Hintergrund abläuft. Gleichzeitig überbrücken die Wartezeit. So sind sie zum einen unterhaltsam, zum andern verbessern sie die User Experience einer Seite.

In diesem Beispiel dient der Preloader durch sein außergewöhnliches Design, passend zu einer Website aus dem Themenbereich Foodblogging, zusätzlich dem Branding. Die Animation bleibt dem Nutzer im Gedächtnis und steht in einem klaren thematischen Bezug zur Seite aus dem Genre.

Dabei handelt es sich um eine zustandsbehaftete Animation, die, zumindest in der praktischen Anwendung, mit HTML Statuscodes korrespondiert. Zur Erstellung wurde mit der Web Animation API und CSS3 eine native Animationstechnik genutzt.

Dieser Preloader besteht aus zwei Bestandteilen: Einem sehr grafiklastigen endless Spinner, der zur Unterhaltung der Betrachters dient und einem Ladebalken, der je nach Implementierung scheinbar oder tatsächlich einen Ladefortschritt anzeigt.

Nun zum praktischen Teil. Im Folgenden ist in 3 einfachen Schritten erklärt, wie ein individueller Leader selbst ‘gebaut’ werden kann.

Die Entwicklungsumgebung:

Entwicklungsumgebungen wie codepen.io eignen sich besonders gut zum Erstellen von Animationen, da sie den Code sehr übersichtlich visualisieren und das Ergebnis des Codes und Änderungen daran augenblicklich aktuell anzeigen. Dennoch eignen sich auch klassische Texteditoren wie Notepad++.

Schritt 1: HTML-Grundgerüst

Im ersten Schritt wird ein einfaches HTML-Grundgerüst erstellt. Dennoch sollte im Voraus bereits ein Polyfill für die Web Animation API (WAAPI) eingebunden werdende diese nicht von allen Browsern unterstützt wird.  Anschließend wird eine Div-Klasse für die gesamte Animation erstellt, sowie drei weitere für den oberen Teil der Animation sowie eine Klasse und Unterklasse für den Ladebalken, um diese Elemente später mit CSS3 und Java Script weiter bearbeiten zu können. Der gesamte HTML-Code sieht wie folgt aus:

 HTML-Grundgerüst
HTML-Grundgerüst

Schritt 2: Styling und Animation mit CSS

Das Entwickeln des CSS Codes ist der komplexeste Teil der Animation. Als erstes wird die Größe des Div-Containers für die gesamte Animation festgelegt. Anschließend werden die drei Elemente, die sich über dem Ladebalken befinden sollen und später animiert werden, gestylt. Durch eine Anweisung kann Größe, Höhe und Position für alle drei Elemente festgelegt werden und deren Farbe ggf. in individuellen Anweisungen für jedes Element. An dieser Stelle ist es wichtig, die Eigenschaft ‘display’ auf den Wert ‘inline-block’ zu setzten, sodass die Elemente nebeneinander angezeigt werden.

Um den Ladebalken zu erstellen, werden zunächst Größe, Form und Farbe sowie Position für diesen festgelegt. Dabei ist eine absolute Positionierung innerhalb des übergeordneten Containers zu empfehlen, um Verschiebungen der Grafik bei unterschiedlichen Bildschirmgrößen zu vermeiden. Darauffolgend werden die Animationsmöglichkeiten von CSS3 genutzt , da diese leicht einzusetzen und für einen Leader mit unbestimmten Ladefortschritt gut geeignet sind.

Zum Animieren des Ladebalkens wird zunächst ein weiterer Balken mit anderer Farbe und geringerer Größe innerhalb des ersten Balkens erstellt. Diesem wird mithilfe der CSS Eigenschaften ‘transition:’ und ‘animation’ Funktionalität verliehen. Durch die Attribute dieser Eigenschaften können ua. Dauer, Art und Iteration der Animation bestimmt werden. Anschließend werden für die load Eigenschaft des Ladebalkens Keyframes definiert. So startet in diesem Beispiel der Ladevorgang bei 2% und hat bei 10% ebenfalls 10% der Länge des Balkens erreicht.

    

 

Schritt 3: Animation mit JS

Im letzten Schritt wird der obere Teil des Loaders mithilfe von Java Script uns WAAPI animiert. Für einfache Ladegrafiken ist die Verwendung von CSS3 ausreichend. Animationenmit Java Script erlauben jedoch mehr Kontrolle und bieten mehr Möglichkeiten.  Das erste zuganimierende Element wird zunächst mit dem Quer Selektor ausgewählt und im Folgenden  mit der .animate() Methode animiert. Mit der Eigenschaft ‘transform’ werden Keyframes festgelegt. Das bedeutet in diesem Fall das Verschieben des Elementes auf der Y-Achse. Des Weiteren werden Dauer und Wiederholungsfreqenz festgelegt. In diesem Beispiel ist die Animation ‘infinite’, in der Implementierung in einer Website würde die Animation in Abhängigkeit mit dem Ladestatus der Website bzw. einem Systemstatus gesetzt werden. Der Vorgang wird für alle zu animierenden Elemente wiederholt.

Abschließend können nach Belieben an Stelle der mit CSS gestylten Elemente Grafiken eingefügt werden. Hier eignen sich besonders Icons im Flat Design, um eine optische Überladung der Animation zu vermeiden.

Listings:

 
  
  Loading Bar Food Blogger
      

https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.1.4/web-animations.min.js


http://js/index.js

 

 

 

 

 

Loading…

 

 

https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.1.4/web-animations.min.js http://js/index.js

var a = document.querySelector('.a');
var animation = a.animate([
  { transform: 'translateY(-1em)' },
  { transform: 'translateY(0em)' }], 
  { duration: 700,
  iterations: Infinity,
  direction: 'alternate',
});

var b = document.querySelector('.b');
var animation = b.animate([
  { transform: 'translateY(-1em)'},
  { transform: 'translateY(0em)'}],
  { duration: 700,
  iterations: Infinity,
  direction: 'alternate',
  delay: 250
  });  

var c = document.querySelector('.c');
var animation = c.animate([
   { transform: 'translateY(-1.2em)'},
   { transform: 'translateY(-0.2em)'}],
   { duration: 700, 
   iterations: Infinity,
   direction: 'alternate',
   delay: 500
  });
.container_animation {
  position:absolute;
  left:45%;
  top: 30%;
  height: 400px;
  width:400px;
}


.a, .b, .c {
  postition:absolute;
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 4em;
  border-radius: 50%;
  margin-right:0%;
  padding: 10px;
  top:20px;
  left:25%;
}


/* Loading CSS */


.body {
	color: #333;
}
.progressbar{
  height: 26px;
  position: absolute;
  left: 25%;
  top: 110px;;
  width: 300px;
  background: rgba(150, 0, 0, 0.5);
  border-radius: 10px;
  margin: -20px 0 0 -100px;
  padding: 2px;
}
.loading{
  transition: all 500ms ease;
  height: 20px;
  width: calc(100% - 10px);
  border-radius: 8px;
  background: #474747;
  position: absolute;
  margin: 3px;
  display: inline-block;
  animation: load 15s ease infinite;
}
.load{
  font-family: Arial;
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
}

@keyframes load{
  0%{
    width: 2%;
  }
  10%{
    width: 10%;
  }
} 

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Tutorial: Multistep Login Formular

multisteplogin

Tutorial: Multistep Login Formular

Autor: Ilja Melnik

Einleitung

Bei dieser Prüfungsleistung handelt es sich um eine konzeptionelle Erstellung eines Multistep Formulars mit funktionalen Animationen. Für die Umsetzung wurden ausschließlich Html-5, Css3 und Javascript (JQuery) verwendet.

Die Grundidee ist ein Formular mit visuellem Feedback und einer inhaltlichen Strukturierung.

Dies wird primär mit drei funktionalen Animationen umgesetzt:

  1. Einer Progressbar, die sich direkt über dem Formular befindet und den Fortschritt visualisiert.
  2. Einer Strukturierung in 4 Formulareinheiten (Slides), die mit 2 Navigationsbuttons bedient werden und an die Progressbar geknüpft sind. Die Übergänge der einzelnen Slides sind zusätzlich animiert, um die Bedienung intuitiver zu gestalten.
  3. Einem Shake-Feedback bei nicht Ausfüllen von benötigten Feldern (im Beispiel nur das Username Feld).

Die Progressbar:

Zunächst wurde in Html ein Grundgerüst für die Progressbar erstellt und das erste <li> Element mit der class=”active” markiert. Diese Klasse wird später mithilfe von Javascript an die weiteren <li> Elemente weitergegeben um den gewünschten Fortschritt zu visualisieren.

Grundgerüst für die Progressbar
Grundgerüst für die Progressbar

Anschließend wird mit Css die visuelle Struktur eines Balkens erstellt, der mithilfe der :before und :after Selektoren die einzelnen Punkte verbindet. Zusätzlich wird ein counter erstellt, der eine Nummerierung durchführt. Zuletzt wird das “first-child” der :before Selektoren (also das erste Verbindungselement) ausgeblendet, um die gewünschte Struktur zu erhalten. Es würde sonst links überstehen, z.b. ist das Blau gefärbte Verbindungsstück in der unteren Abbildung tatsächlich der :before Element des zweiten Punktes <li>).

Code des Balkens
Fortschrittsbalken

 

 

 

 

 

 

 

 

 

 

Die Sliderstruktur:

In Html wird nun die Grundstruktur für die verschiedenen Slider geschaffen, indem jeweils pro Slide ein <fieldset> Element geschaffen wird. Anschließend werden den <fieldset> Elementen die <input> Elemente, die aus Formelementen wie text, password, email, tel und dem Submitelement Button bestehen untergeordnet.

Grundstruktur der verschiedenen Slider

Nachdem die einzelnen Slider in Css visuell angepasst wurden, ist vor allem ein Schritt interessant: Momentan befinden sich noch alle Slides, bzw. <fieldset> Elemente untereinander, wir blenden also alle außer dem ersten zunächst aus. Dies ist mit einer Zeile Code möglich, da die Html Struktur hierarchisch so aufgebaut ist, dass die <fieldset> Elemente direkt dem <form> Element mit der id #formwrapper untergeordnet sind.

Nun werden im JQuery Teil zunächst die Variablen definiert, die uns die Übergangsanimation ermöglichen: Die Fieldsets, um richtig iterieren zu können, die Attribute, die wir verändern um eine Animation zu erschaffen und der Animationszustand selbst, mit dem wir bei wiederholtem Knopfdruck Überschneidungen verhindern können.

Der Übergang läuft wie folgt ab:

Mit dem next_fs index übergeben wir den active Status auf der Progressbar. Dann beginnen wir das momentane Fieldset zu verstecken, während das nächste angezeigt wird. Das momentane Fieldset wird transparenter, da die opacity auf 0 geht, zusätzlich wird es auf 80% Größte herunterskaliert. Gleichzeitig wird das nächste Fieldset von rechts eingeschoben, während dessen opacity auf 1 hochgeht.

Dieser Vorgang findet innerhalb eines click Events beim drücken des ‘Next’ Button statt, ein Ablauf feuert auch bei der Interaktion mit dem ‘Previous’ Button. Dabei sind dann die Animationsrichtungen angepasst, außerdem werden die entsprechenden active Klassen auf der Progressbar wieder entfernt.

Das Shake-Feedback:

Bei dem Shake-Feedback in diesem Beispiel handelt es sich um eine kurze links-rechts Bewegung des Inputs, wenn der ‘Next’ Button gedrückt wird, während ein benötigtes Feld noch nicht ausgefüllt wurde (in diesem Fall nur bei dem ersten Slider und dem ‘Username’ Input Feld). Hierfür erstellen wir zunächst eine .error Klasse im Css, die eine Animation beinhaltet und noch keinem Html Element zugewiesen wird. Zusätzlich erstellen wir einen zugehörigen Keyframe at-rule und definieren hier die links-rechts Bewegung mithilfe der 0-100% Skala.

Als muss mit Javascript sichergestellt werden, dass diese Klasse allen leeren Input Elementen hinzugefügt wird, die sich im aktuellen Fieldset befinden, während der ‘Next’ Button gedrückt wird (In diesem Beispiel selektieren wir statisch die id ‘#username’). Anschließend erstellen wir einen Timer, der diese Klasse nach 2 Sekunden wieder löscht, damit diese Interaktion nochmal stattfinden kann (In diesem Beispiel selektieren wir statisch die id ‘#username’).

Weitere Features:

Ein weiteres Feature, was nicht unbedingt den funktionalen Animationen zugehört ist die Erkennung des Inputs ins Username Feld und die Übergabe an das Titel Feld des folgenden Fieldsets. Hierbei ist zu beachten, dass das Titel Feld beim feuern der Buttons mit der empty Funktion zurückgesetzt wird, um eine Überflutung von Worten zu vermeiden.

Zuletzt ist der ‘Done!’ Submit-Button zu erwähnen, dieser ist rein dekorativer Natur und hat absolut keine Funktion.

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Tutorial: Informativer OnePager für Austauschstudenten

Onepager

Tutorial: Informativer OnePager für Austauschstudenten

Autor: Cagla Bacaksiz

Im Rahmen des Kurses „Entwicklungen von Multimediasystemen II“ sollte eine funktionale Web Animation konzipiert und technisch umgesetzt werden. Die Grundidee meiner Web Animation bestand darin, einen übersichtlichen One-Pager zu programmieren, welcher Informationen für ausländische Studenten bzw. Studieninteressierten beinhaltet. Da ich selber in diesem Semester im Austausch mit amerikanischen Austauschstudenten an unserer Fakultät war, ist mir diese Idee in den Sinn gekommen. Technischer Anspruch bestand darin, eine platzsparende Navigationsleiste und einen intuitiven Slider zu implementieren.

Erster Entwurf

Hierfür wurde zunächst eine Zeichnung erstellt, um zu visualisieren wie der One-Pager aussehen soll:

 

Sektion 1: Navigation & Parralax Effekt

 

Sektion 1: Slider

Der One-Pager sollte zunächst zwei Sektionen beinhalten (natürlich ist dies zukünftig erweiterbar), welche durch einfaches scrollen oder per Navigation erreichbar sein sollten. Die Navigation wird aufklappbar sein, um zum einen Platz zu sparen und zum Anderen eine funktionale Interaktion mit dem User zu bieten. Optisch soll das Logo der Hochschule mithilfe des Parallax-Effektes mit nach unten scrollen und die Überschrift beim Start der Seite einfliegen. Der Vor- und Zurückbutton soll hierbei beim drüberhovern vergrößert werden.

Technische Umsetzung:

Zur Implementierung der oben beschriebenen interaktiven Funktionen und Effekte wurde JavaScript verwendet und externe jQuery-Bibliotheken hinzugezogen. Zum Aufbau wurde eine HTML-Datei erstellt, die die Seitenstruktur enthält und eine CSS-Datei für Layout und Design.

Es bestehen insgesamt sechs JavaScript-Dateien: eine für die erste Sektion, eine für die Zweite, eine für das Menü (Navigation), eine für den Scroll-Effekt, und zwei jQuery-Bibliotheken (jQuery Foundation und Waypoints).

Hier einige Aspekte des Projektes beispielhaft dargelegt:

Scroll-Effekt

Zunächst wird mithilfe eines Eventhändlers in der section1.js Datei auf die scroll.js Datei zurückgegriffen, welche wiederum die jQuery-Bibliothek nutzt.

function parallax(){
    var layer_1 = document.getElementById('layer_1');
    var layer_2 = document.getElementById('layer_2');
    
    layer_1.style.top = -(window.pageYOffset / 3) + 'px'; 
    layer_2.style.top = -(window.pageYOffset / 3) + 'px';	
}
window.addEventListener("scroll", parallax, false);
// ##############################################################################################
// Smooth Scrolling 
// Source: http://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_animate_smoothscroll 
// ##############################################################################################

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      // tried to delete the next function line to see what happens here but the scroll didn't work correct 
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // 1500 is the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 1500, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
})

Fly-In-Text

Es wird hier ebenfalls auf jQuery zurückgegriffen.

// 	Text Animation 
// 	Source: https://www.youtube.com/watch?v=QZpZ1zRcR6c
$(function(){
    setTimeout(function(){
        $(".fly-in-text").removeClass("hidden");
        }, 400);
        
})();

// 	Explanation: 
// 	-	has a $-sign because we use jquery for the 'animation'  
// 	- 	remove class from fly-in-text 
// 	-	setTimeout() method calls a function or evaluates an expression after 400 milliseconds

Es entstand so eine für den User übersichtliche und ansprechende Seite, welche intuitiv bedienbar ist und durch die Navigation und den Ankerpunkten gut steuerbar ist ohne von eigentlich Inhalt der Seite abzulenken. Zukünftig könnte die Seite um weitere Sektionen erweitert werden. Beispielsweise könnte man eine Sektion mit Kontaktformular ergänzen, um es ausländischen Studenten zu ermöglichen, Fragen zu stellen.

One-Pager:

Code des Projektes auf Codepen.io

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Tutorial: Dynamische Notendarstellung

Dynamische Notendarstellung

Dynamische Notendarstellung

Autor: Jana Avemarg

Design

Die Grundlage bildet eine auf HTML5 basierte Single-Page Website (1). Diese bietet den Vorteil, dass die Navigation ohne Verzögerung ausgeführt, da sich der Besucher immer der gleichen Seite befindet, ohne es zu merken.

Für eine schönere Darstellung wurde eine öffentlich verfügbare Schriftart von google (2) und ein Farbschema von coolors.co (3) benutzt.

Benutzung / Chart

Der interessante Teil befindet sich unter dem Menüpunkt ‘Chart’. Das erste Eingabefenster reagiert auf Eingaben und beinhaltet die, unter dem Diagramm angezeigten, Labels. Das zweite Eingabefenster reagiert ebenfalls auf Eingaben und beinhaltet die Anzahl der jeweiligen Note. Die Eingaben müssen mit einem Komma getrennt werden. Nachkommastellen werden mit einem Punkt abgebildet (z.B. 2,1.75,1.5,1.25,1). So ist es auch möglich verschiedene Notenschemata zu verwenden. Der Chart wurde mit Hilfe der Library Chart.js (4) erstellt. Unter dem Chart wird die auf zwei Nachkommastellen gerundete Durchschnittsnote angezeigt. Über die Checkbox ‘Barchart’ lässt sich die Darstellung des Charts zwischen Barchart und Linienchart schaltet.

Tutorial

Das Tutorial erklärt zuerst, wie ein statisches Diagramm angezeigt werden kann. Ab Kapitel 5. wird erklärt, wie sich das Diagramm dynamisch verändern lässt. In Kapitel 8. wird die Berechnung der Durchschnittsnote gezeigt. Abschließend ist das Resultat auf Codepen.io zusehen.

Die Darstellung eines statischen Diagramms gestaltet sich als relativ einfach.

1. Import der Chart.js-Library

<head>

< script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js" >

< /script >

</head>

2. Es muss ein <canvas>-Element erstellt werden

<canvas id="myChart"></canvas>

3. Chart mit 2D-Kontext des Canvas verbinden

Die Konfiguration (‘{configuration}’) wird im nächsten Schritt erläuert.

var ctx = document.getElementById("myChart").getContext('2d');

var myChart = new Chart(ctx, {configuration...}

4. Konfiguration des Charts

Der Chart wird mit Hilfe eines javascript-Objektes konfiguriert. Dieses Objekt beinhaltet alle Information, die für die Darstellung notwendig sind.

Die einzelnen Konfigurationsmöglichkeiten werden in den Kommentaren erläutert.

{
   type: 'bar', //Zeigt die Daten in einem Balkendiagramm an
   data: { //Datenobjekt
    labels: ["6", "5", "4", "3", "2", "1"], //Beschriftung der Y-Achse
    datasets: [   //Liste von Daten, da mehrere pro Chart angezeigt werden können.
     {
       label: 'Notenverteilung',  //Überschrift
       data: [0, 2, 3, 5, 8, 5],  //Dateneingabe: Anzahl des jeweiligen Labels (z.B. Note '6' = 0)
       backgroundColor: 'rgba(255, 99, 132, 0.2)', //Hintergrundfarbe der Balen (Listen sind möglich für verschiedene Farben)
       borderColor: 'rgba(255,99,132,1)', //Farbe der Umrandung (auch hier sind Listen möglich)
       borderWidth: 1 //Weite der Umrandung
     }
    ]
   }
}

Bis jetzt haben wir einen statischen Chart, der die vorkonfigurierten Labels (“6″,”5″,”4″,”3″,”2″,”1”) und die dazugehörige Verteilung (0,2,3,5,8,5) anzeigt.

5. Reagieren auf Benutzereingaben

Zuerst erstellen wir ganz normale HTML-Textareas. Eins für die Labels und eins für die Anzahl der Noten. Wir definieren das Event ‘onkeyup’, das ausgeführt wird, sobald eine Taste in der entsprechenden Textarea losgelassen wird. Das Event soll den Aufruf der javascript-Funktion ‘zeicheneGraph()’ ausloesen. Diese Methode wird im folgendem Punkt erläutert.

<h3>Eingabe<h3>

<p>Labels</p>

<textarea id ="labelInput"rows="4" cols="50" onkeyup="zeichneGraph()">1,2,3,4,5,6</textarea>

<p>Noten</p>

<textarea id ="notenInput"rows="4" cols="50" onkeyup="zeichneGraph()">0,2,3,5,8,5</textarea>

6. Manipulation der Chart-Daten

Wie zuvor erklärt, wird die zeichneGraph()-Funktion bei jeder Eingabe ausgelöst. Nun wird beschrieben, wie die Eingaben in den Chart gelangen.

Zuerst muss die Eingabe in ein Format gebracht werden, wo mit der Chart arbeiten kann. Das sind in diesem Fall Listen von Labels und Daten.

Vorbedingung: Die Informationen liegen komma-getrennt vor, z.B. 1, 2, 3,….

6.1 Zugriff auf die Eingabefelder

Auf das Eingabefeld wird mit jQuery zugegriffen und dessen Wert ausgelesen:

$('#notenInput').val()
6.2 Eingabe in eine Liste konvertieren

Der Befehl split(‘,’) zerlegt die Eingabe an der Stelle des Kommas und liefert so eine Liste von Werten, z.B. [1,2,3,…].

var noten = $('#notenInput').val().split(',');
6.3 Zuweisung der Liste in den Chart

Diese Liste muss jetzt nur noch dem Objektes unseres Charts zugewiesen werden.

In der Konfiguration kann man erkennen das die Labels in dem Objekt data liegen. Der Zugriff erfolgt so auf myChart.data.labels.

myChart.data.labels = labels;

Die Daten liegen in dem dataset-Objekt, welches wiederum auch in dem Objekt data liegt. Das dataset-Objekt ist eine Liste, da mehrere Graphen in einem Chart angezeigt werden können. Wir haben nur einen Graphen definiert und die Daten befinden sich daher an der ersten Stelle in der Liste. Der Zugriff erfolgt daher auf die Stelle 0.

myChart.data.datasets[0].data = noten;
6.4 Chart neu zeichnen

Damit der Chart neu gezeichnet wird, muss auf dem Objekt die update()-Methode aufgerufen werden.

myChart.update();
6.5 Gesamte Methode

Abschließend noch mal die Methode in ihrer Gesamtheit.

function zeichneGraph(){

      var noten = $('#notenInput').val().split(',');
      var labels = $('#labelInput').val().split(',');
      myChart.data.datasets[0].data = noten;
      myChart.data.labels = labels;

      myChart.update();
}

7. Änderung der Chart-Art

Die Änderung der Chart-Art (z.B. Linien- und Balken-Diagramm) gestaltet sich ähnlich, wie die Änderung der angezeigten Werte aus Kapitel 6.

7.1 Erstellung einer Checkbox

Es wird eine HTML-Checkbox verwendet, deren Änderungs-Event (onchange) mit einer javascript-Funktion verbunden ist. Das Attribut checked definiert, dass die Checkbox direkt gesetzt ist.

<label>

<input type="checkbox" onchange='klickAufBarchart(this);' checked/> Barchart

</label>
7.2 Prüfen des Checkbox-Zustandes

Eine Checkbox kann gesetzt bzw. checked sein, oder nicht.

Wir übergeben unserer Funktion die Checkbox selber über den Parameter mit (this).

In unserer javascript-Funktion können wir auf das Attribut checked zugreifen und prüfen, ob die Checkbox gesetzt ist oder nicht.

function klickAufBarchart(cb) {
   if(cb.checked){
       aendereGraph('bar');
   }
   else{
       aendereGraph('line');
   }

}
7.3 Änderung der Art des Charts ausführen

Das Object myChart muss komplett gelöscht und neu erstellt werden.

Dazu wird zuerst die destroy-Funktion aufgerufen und danach ein neues Chart-Objekt mit der übergebenen art-Objekt (z.B. ‘line‘ oder ‘bar‘) neu erstellt.

Die Daten werden auf den Ursprung-Zustand gesetzt, aber abschließend, durch den Aufruf der zeichneGraph()-Funktion mit den Werten der Eingabefelder aktualisiert.

function aendereGraph(art){

myChart.destroy();

myChart = new Chart(ctx, {
   type: art,
   data: chartData,
});

zeichneGraph();
}

8. Berechnung der Durchschnittsnote

Die Durchschnittsnote wird bei jeder Eingabe neu berechnet. Es bietet sich daher an, die Funktion, die wir schon für die Änderung des Diagramms (zeichneGraph()) erstellt haben, zu erweitern.

Ein Status-Text soll hier mögliche falsche Eingaben abfangen und eine Fehlermeldung ausgeben.

8.1 Überprüfung der gleichen Längen

Um eine Berechnung machen zu können, müssen die Labels die gleiche Anzahl wie die Noten haben.

if(noten.length==labels.length){ ... }
8.2 Berechnung der Zwischenwerte

Es muss berechnet werden, wie viele Noten in Summe eingetragen worden sind um die Anzahl von Klausuren zu erhalten.

Und es muss eine Summe errechnet werden, welche die Klausuren nach ihren Noten gewichtet z.B. (6*0)+(5*2)+(4*5)+….

Das passiert in einer Schleife, bei der über die Liste der Noten und Labels gelaufen wird.

Nachdem beide Summen errechnet worden sind, wird der Durchschnitt errechnet, indem die gewichtete Summe durch die Anzahl der Klausuren geteilt wird.

Abschließend wird der Durchschnitt auf zwei Stellen gerundet mit Math.round(durchschnitt * 100) / 100).

var notenSum=0;
var notenAnzahl=0;
var breakup = false;
for(var i=0; i< noten.length;i++){
    //https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Global_Objects/parseFloat
    //zu Zahlen konvertieren
    var label= parseFloat(labels[i]);
    var note = parseFloat(noten[i]);
    //https://www.w3schools.com/jsref/jsref_isnan.asp
    //Falls keine Zahl => Berechnung abbrechen und Fehlermeldung anzeigen
    if(isNaN(label) || isNaN(note)){

        breakup = true;
        break;
    }else{
        notenAnzahl = notenAnzahl + note;
        notenSum = notenSum + (note*label);
    }
}
if(breakup){
    $('#status').text('Bitte nur komma-getrennte Zahlen eingeben (z.B. 1,3,2).');
        $('#durchschnitt').text('');
}
else{
    var durchschnitt = notenSum/notenAnzahl;
    //https://stackoverflow.com/questions/9453421/how-to-round-float-numbers-in-javascript
    $('#durchschnitt').text('Durchschnittsnote: '+ Math.round(durchschnitt * 100) / 100);
}

9. Resultat:

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Tutorial: Login Kalender

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Login Kalender

Autoren: Melis Rufaioglu und Diana Hamasur

Konzept:

Das Konzept wurde anhand der alltäglichen Aktivität eines digitalen Kalenders erstellt. Da immer mehr Nutzer zu der digitalen Variante greifen, weil diese einfacher zu bedienen ist.

Die Funktionen des digitalen Kalenders bestehen aus einem Sign in und aus einem Logout Button. Auf der Startseite sieht der Benutzer die Felder „Benutzer- und Passwort“. Diese haben jedoch in der Demo keine besondere Funktion, jedoch sind sie im alltäglichen Leben als Zugangsfelder gedacht. Die Felder können aber müssen in der Demo nicht ausgefüllt werden. Als Test kann etwas eingegeben werden, ob es funktioniert.

Aus Stilgründen steht unter dem Sign in Button noch ein Hinweis auf eine Registrierung, welche jedoch keine weitere Funktion hat. Wird auf den Sign in Button geklickt, erscheint ein sich drehender Kreis mit Punkten. Daraufhin wird die Maske kurz in der Farbe des Buttons erscheinen und führt dann zu dem eigentlichen Kalender.

Bei dem Öffnen des Kalenders scheint kurz das Benutzerbild hervor, die Linien der Lupe kreisen einmal um die Lupe herum und unten rechts erscheint der Log-out Button. Auf dieser Seite wird ein Benutzerbild mit einer Notifikation angezeigt. Da drüber befindet sich ein kurzer Satz, der beliebig sein kann.

Oben links befindet sich ein „Menü“ Icon, rechts eine Lupe. Diese beiden haben keine weiteren Funktionen. Unter dem Benutzerbild stehen der aktuelle Monat und eine Kalenderwoche. Anschließend werden die entsprechenden To-Do´s angezeigt. Wenn der Log-out Button gedrückt wird, springt dieser in die Mitte des Fensters und übernimmt kurz das ganze Feld in seiner eigenen Farbe.

Anschließend wird wieder auf die Startseite zurückgeführt und es erscheint ein Haken, dieser steht für ein erfolgreiches Logout.

Technische Umsetzung

Der digitale Kalender mit einem Sign in und Logout System wurde mithilfe von Elementen aus HTML5, CSS3 und Javascript entwickelt. Darüber hinaus wurden Librarys von JQuery oder CSS bezüglich der Funktion und der visuellen Darstellung als Hilfe genommen. Das JQuery ist eingebunden und die ready Funktion ist befüllt. Diese Funktion ist dafür da, dass der Inhalt erst geladen wird, wenn die Seite vollständig geladen ist.

Die Plattformen wie „Codepen“, „Selfhtml“ und „W3Schools“ haben an der Entwicklung und Konzeption sowie der Inspiration weitergeholfen.

Die Icons „Benutzer“ und „Passwort“ wurden gestaltet und in die richtige Position gebracht. Der Button „Sign in“ wurde ebenfalls positioniert und animiert. Das ganze wird mit der ripple Funktion ausgeführt.

Um ein besseres technisches Verständnis dafür zu entwickeln, sind die hinterlegten Kommentare im Quellcode hilfreich.

Quellcode und das Konzept

Quellen:

Tutorial: Klausuren Countdown

Klausuren Countdown

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinberg) einige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Klausuren Countdown

Autor: Matthias Olbrisch

Die Idee

Die Idee der Webapplikation ist es dem Studenten eine App zu liefern, die ihm die Möglichkeit bietet, den Lernfortschritt bzw. den Lernstand bis zu einem Klausurtermin zu überwachen. Der Fokus lag hierbei nicht auf einem besonders aufwendigen Design, sondern auf der Funktionalität der Web Applikation.

Wie funktioniert das Ganze ?

Die einzige Eingabe, die ein Student dazu zu tätigen hat, ist die der Eingabe des Klausurensdatums in das dafür vorgesehene Feld unter der Frage „Wann ist deine Klausur?“ und die Bestätigung über den „Bestätigen“ Button.

Wann ist deine Klausur?
Abbildung 1 – Wann ist deine Klausur?

Danach generiert sich unter der Aussage „Wie viel Zeit du noch hast!“ ein Countdown, der die verbleibenden Tage bis zur Klausur berechnet und live herunterzählt.

Wie viel Zeit du noch hast!
Abbildung 2 – Wie viel Zeit du noch hast!

Der Code für den Countdown behandelt zwei Problemstellungen. In der Funktion time_remaining(startTime) wird die im Eingabefeld vom Nutzer eingegebene Zeit in Millisekunden von der Startzeit abgezogen, daher wird im anschließenden Verlauf von Millisekunden auf Sekunden, Minuten, Stunden usw. gerechnet. Schließlich gibt der Operator „math.floor“ den größten Integer zurück, der bei der Berechnung der Sekunden, Minuten usw. entsteht.

Codeausschnitt
Abbildung 3 – Codeausschnitt

Die Funktion SubmitDate update nun die Countdown Daten mittels z. B. days_span.innerhtml=t.days; die Countdown – Werte. Schließlich würde der definierte Countdown nach dessen logischem Ende noch in den Minus Bereich laufen. Dies wird mittels der bedingten Funktion verhindert.

Codeausschnitt
Abbildung 4 – Codeausschnitt

Bei mehr als 7 Tagen wird der Status „Alles Okay“ ausgegeben, bei weniger als 7 Tagen wird vermeldet, dass man „Nur noch eine Woche“ zur Vorbereitung hat. Unter oder bei 4 Tagen Restlaufzeit wird „Jetzt aber!!“ ausgeliefert und am letzten Tag wird angekündigt, dass man „Morgen“ die Klausur schreibt. Am Prüfungstag wird „Viel Glück und Erfolg“ gewünscht.

Alles okay
Abbildung 5 – Alles okay

Der entsprechende Code verdeutlicht, dass sofern 8 Tage oder mehr Vorbereitungszeit bleiben, „Alles okay“ ist. Dazu wird am Beginn die restliche Tageszahl über console.log(days) ausgelesen. Die unterschiedlichen Status werden über if – else Bedingungen formuliert.

Codeausschnitt
Abbildung 6 – Codeausschnitt

Zusätzlich zu diesen Statusmeldungen, wird ein Kreis gezeigt, der anhand des vorhandenen Puffers den Fortschritt des Lernens veranschaulicht darstellen soll. Dazu wächst er in den letzten 7 Tagen der Klausurvorbereitung um je 100/7 % pro Tag. Bis er schließlich voll ist. Dauert es noch länger als 7 Tage, wird der Kreis nicht angezeigt.

Codeausschnitt
Abbildung 7 – Codeausschnitt

Das Ergebnis:

Umsetzung

Die Applikation wurde mithilfe von Elementen aus HTML 5, CSS 3, Javascript sowie jQuery entwickelt. Unterstützung habe ich bei den Plattformen „codepen.io” und „W3schools“ gefunden.

Dateienliste: hier

Zum besseren Verständnis ist der Code mit ausführlichen Kommentaren versehen.

 

Tutorial: Radiales Menü mit JavaScript

Radiales Menü mit JavaScript

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen II (Sommersemester 2017, Prof. Dr.-Ing. Steinbergeinige gute, funktionale Animationen samt Tutorials entstanden. Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Die besten Tutorials stellen wir euch hier in den nächsten Wochen nach und nach vor.

Technisches Konzept für ein radiales Menü

Autor: Julian Hundertmark

Als Ziel gesetzt wurde ein Menü mit verschiedenen Funktionalitäten und Animationen welches als individualisierbare Grundlage für weitere Nutzer zur Verfügung gestellt werden soll. Hierzu soll es leicht in eine bestehende Seite integrierbar, intuitiv und vielseitig einsetzbar sein.

Begonnen wurde damit, ein bereits vorhandenes Menü als Grundlage einzubauen. Dieses wurde nachfolgend sowohl in der Funktion als auch im Design und Animation abgeändert und erweitert.

Das Menü lässt sich mithilfe einer Javascriptfunktion aktivieren. Dies triggert die Menüknöpfe welche animiert in den Vordergrund verschoben werden und wodurch diese nun anwählbar sind. Weitere Javascriptfunktionen wurden als Beispielfunktionen hinzugefügt. So lässt sich exemplarisch die Schriftgröße der Webseite oder auch die Hintergrundfarbe per Mausklick verändern. Zusätzlich wurde das Menü in einem ziehbaren Div-Container eingegliedert sodass es für Nutzer frei auf der Webseite zu bewegen ist. Diese zweckmäßige Annehmlichkeit soll die Usabillity der Menüs erhöhen. Auch die animierten Tooltips sollen zukünftigen Nutzern weitere Möglichkeiten geben das Menü intuitiv auf einer eigenen Seite anzubieten. So könnte das Menü auf One-Pagern eine alternative Steuer- und Anpassungsmöglichkeit bieten. Die Möglichkeiten weiterer Veränderungen und Individualisierung in Form von weiteren Funktionen bietet sich an.

Auch das Design des Menüs lässt sich leicht den Funktionalitäten anpassen. So können wie bereits durch meinen Entwurf gezeigt Knöpfe hinzugefügt oder entfernt werden. So habe ich die Positionen einzelner Knöpfe wieder in eine Symmetrische Position gebracht und Hover-Effekte nachgebaut.

Link zu Codepen : https://codepen.io/hundertj/pen/YxwmpJ