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

Tutorial: Ein mobiles Hamburger Menü

Hamburger Menü

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.

Konzept: Ein mobiles Hamburger Menü

Autorinnen: Katharina Suhr, Anna Ratzke

Als funktionale Animation wurde ein Hamburger-Menü für eine mobile Ansicht mit Unterstützung von Codepen.io erstellt. Zudem wurde ein rotierender Pfeil zum Einblenden für das Untermenü mit Hover-Effekt programmiert.

Das Hamburger-Menü ist eine Variante der versteckten Navigation. Zunächst sind nur drei horizontale Striche zu erkennen. Die Elemente des Hauptmenüs sind erst durch eine gezielte Nutzeraktion sichtbar. Im Vergleich zu Desktop-Bildschirmen sind Smartphone Displays deutlicher kleiner und somit sollten auch die Menüs angepasst und schnell auffindbar sein. Das Hamburger-Icon kann weniger schnell zwischen den anderen Seitenelementen untergehen, dem Nutzer fällt es sofort ins Auge. Viele App-Anwendungen auf Smartphones nutzen bereits dieses Menü, dadurch entsteht beim Nutzer ein bestimmter Wiedererkennungswert, der erahnen lässt, dass sich hinter dem Hamburger-Icon eine Navigation befindet. Das Hamburger-Menü besitzt drei verschiedene Zustände. Wenn auf das Hamburger-Icon geklickt wird, erscheint kurzzeitig nur ein horizontaler Strich. Der Schließen-Button (in Form eines X) ist der dritte Zustand. Dieser Schließen-Button führt den Nutzer durch Erfahrungswerte zu der Intention, dass sich durch Anklicken das Menü wieder schließen lässt.

Ist das Hamburger-Menü angeklickt, erscheint das Hauptmenü. Die Seiten “HOME”, “ABOUT”, “BLOG” und “CONTACT” sind zu sehen. Rechts neben dem Menüpunkt “ABOUT” ist der Pfeil zu erkennen. Wird der Pfeil angeklickt, erscheint das Untermenü. Der Pfeil besitzt zwei Zustände. Wenn das Menü geschlossen ist, zeigt der Pfeil nach unten, dabei wird unbewusst der Instinkt beim Nutzer ausgelöst, dass sich etwas hinter diesem Pfeil versteckt und es wird angeklickt. Im zweiten Zustand, wenn das Untermenü geöffnet ist, zeigt der Pfeil nach oben, um zu symbolisieren, dass das Menü wieder geschlossen bzw. versteckt werden kann. Beim ersten Anklicken bewegt sich der Pfeil nach rechts oben, dies war eine bewusste Entscheidung, da z.B. auch beim Öffnen des Deckels einer Flasche diese Richtung verwendet wird. Also handelt es sich um eine instinktive natürliche Bewegung. Beim zweiten Anklicken zeigt der Pfeil eine rotierende Bewegung nach rechts auf. Dies wurde ebenso mit Absicht so gestaltet, denn der Mensch schreibt von links nach rechts und somit handelt es sich auch um eine natürlich zu erwartende Bewegung.

Technische Umsetzung

Zu Beginn wurde ein passender Hamburger-Button ausgewählt, dieser bildet das Grundgerüst für die funktionale Animation. Die Größe des Hamburger-Menüs wurde für eine mobile Ansicht optimiert sowie oben links platziert. Anschließend wurde das Hauptmenü so animiert, dass beim Anklicken des Hamburger-Icons, das Menü von links eingeflogen kommt. Als nächsten Schritt wurde der Pfeil programmiert sowie im Menü integriert.

Folgender Quellcode ist nur ein Ausschnitt aus der funktionalen Animation

HTML
<li class="has-children">About <span class="icon-arrow"></span>
  <ul class="children">
    <li><a href="submenu1.html">Submenu #1</a></li>
    <li><a href="submenu2.html">Submenu #2</a></li>
    <li><a href="submenu3.html">Submenu #3</a></li>
  </ul>
</li>
CSS
.icon-arrow {
  position: absolute;
  display: block;
  font-size: 0.7em;
  color: black;
  top: 5px;
  right: 10px;
  transform: rotate(0deg);
  transition: .6s;
}
.icon-arrow:after {
  content: "\25BC";
}
.icon-arrow.open {
  transform: rotate(-180deg);
  transition: .6s;
}
JavaScript
$('.has-children').on ('click', function() {
  $('.icon-arrow').toggleClass('open');
});

Das Attribut transform: rotate lässt den Pfeil drehen. Mit den Angaben  0deg und  -180deg wird die Endposition der Drehung bestimmt. Die Dauer der Animation wird mit dem transition: .6s bestimmt. Die JavaScript Funktion ToggleClass lässt den Nutzer zwischen den zwei Zuständen hin und her gewechseln. Die Gestaltung des Pfeils wurde in CSS festgelegt.

Tutorial: Registrierungs- und Loginformular mit jQuery

Login und Registrierungsformular

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.

Registrierungs- und Loginformular

Autoren: Felix Struckmann, Yannik Wissner

Codepen-URL: https://codepen.io/wappsify/pen/zdYjZV

Ziel der im Rahmen der Veranstaltung erstellten funktionalen Animation war es, ein Registrierungs- oder Loginprozess einer Webseite darzustellen. Dafür wurde ein Formular erstellt, welches die benötigten Eingaben abfragt.

Das Formular verzichtet fast gänzlich auf externe JavaScript-Bibliotheken, jQuery ausgenommen, hat also einen geringen Overhead. Stattdessen werden die Animationen größtenteils über CSS-Transitions definiert, sodass sowohl Ladezeit als auch Performance besser abschneiden, als Lösungen, die die Animationen komplett über JavaScript steuern.

Die Implementierung prüft den Inhalt der Felder nicht und die Animation des Ladevorgangs geht immer über einen fixen Zeitraum, um zu zeigen wie dieser animiert ist.

Bei einem tatsächlichen, praktischen Einsatz des Formulars würde sich nach Klick auf einen der Knöpfe nach kurzer Ladezeit das Formular schließen oder eine neue Seite laden, weshalb die Animation an dieser Stelle endet.

Wechseln des Reiters

Es wurden zwei Container erstellt,  welche jeweils die nötigen Felder und den korrekten Button für die Formulare enthalten. Damit diese später ein- bzw. ausgeblendet werden können, werden sie absolut positioniert:

#login-main-container,
#register-main-container {
 position: absolute;
 width: 460px;
}

Außerdem gibt es die beiden Tabs mit dem Namen LOGIN und REGISTER. Diese Elemente können jeweils aktiv oder inaktiv sein und erhalten für beide Fälle einen Style:

.active-tab {
  width: 70%;
  font-size: 30px;
  font-weight: bold;
  letter-spacing: 0.2em;
  color: #0ea7b5;
  cursor:default;
}

.inactive-tab {
  width: 30%;
  cursor: pointer;
  font-size: 20px;
}

Ein aktiver Tab nimmt mehr Platz in Anspruch, die Schrift ist dickgedruckt und bekommt eine neue Farbe.

Wenn man nun auf den inaktiven Tab klickt, so wird das eine Formular ausgeblendet und das aktive eingeblendet. Hinzu kommt das Festlegen der Variabel myButton, welche jeweils entweder den Login- oder Registerbutton enthält, da diese Information für eine spätere Funktion benötigt wird. Außerdem werden die active und inactive Klassen vergeben. Dies geschieht mithilfe von jQuery:

$('.tab-l').click(function() {
  theButton = $('#login-button');
  $(this).addClass('active-tab');
  $('.tab-r').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-r').addClass('inactive-tab');
  $('#register-main-container').fadeOut(250, function() {
    $('#login-main-container').fadeIn(250);
  });
});

$('.tab-r').click(function() {
  theButton = $('#register-button');
  $(this).addClass('active-tab');
  $('.tab-l').removeClass('active-tab');
  $(this).removeClass('inactive-tab');
  $('.tab-l').addClass('inactive-tab');
  $('#login-main-container').fadeOut(250, function() {
    $('#register-main-container').fadeIn(250);
  });
});

Das aktiv werdende Formular wird durch eine simple jQuery Animation eingeblendet, nachdem das inaktive Formular ausgeblendet wurde.

Ausfüllen der Felder

Bei den Feldnamen handelt es sich nicht um klassische Placeholder, sondern um Label, welche im Input positioniert sind:

label {
  position: absolute;
  top: 0;
  left: 0;
  color: #757575;
  font-size: 24px;
  font-weight: 300;
  line-height: 60px;
  -webkit-transition: 0.2s ease;
  transition: 0.2s ease;
}

Wählt der Nutzer nun einen Input aus, so verschiebt sich das Label nach oben. Sobald der Nutzer etwas im Feld eingetragen hat verweilt das Label auch an dieser Position:

input:focus ~ label,
input:valid ~ label {
  color: #0ea7b5;
  font-size: 15px;
  top: -20px;
}

Außerdem heben sich Inputs, die gerade aktiv sind sowie Inputs, deren Inhalt ausgefüllt wurde, ab, indem der Balken unterhalb von ihnen sich mit der Akzentfarbe füllt. Dieser Balken wird nicht etwa durch ein border-bottom erstellt. Stattdessen gibt es nach jedem input-Element einen div-Container, dem die Klasse .balken zugewiesen ist. Diese hat folgende CSS-Eigenschaften, durch die sich der Balken aus der Mitte horizontal heraus füllt, sobald das vorausgehende input-Element den Fokus erhält.

.balken {
  position: absolute;
  left: 0;
  bottom: 0;
  background: #757575;
  width: 100%;
  height: 1px;
}

.balken:before {
  left: 50%;
}

.balken:after {
  right: 50%;
}

.balken:before,
.balken:after {
  content: '';
  position: absolute;
  background: #0ea7b5;
  width: 0;
  height: 2px;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
}

input:focus ~ .balken:before,
input:focus ~ .balken:after {
  width: 50%;
}

Formular abschicken

Die Loadinganimation wird durch jQuery gesteuert. Zunächst wird der Submitbutton an sich verändert:

$('#login-button, #register-button').click(function(){
	i = 0;
	$(this).css({'border-color':'#0ea7b5','color':'#0ea7b5'});
	$(this).animate({'font-size':'16px'},500,function(){
		$(this).html('');
		$(this).css("background-color",'#0ea7b5');
		$(this).animate({'border-radius':'100px','width':'0px','height':'0px','border-width':'0px'},{complete:function(){
			$(this).animate({'margin-top':'30'},500,animateLoading);
		}});
	});
});

Die Farbe des Buttons wird auf die Akzentfarbe geändert, der Inhalt des Buttons wird geleert, der Button verkleinert sich und nimmt eine Kreisform an. Danach bewegt sich der Button etwas nach unten. Im Anschluss wird eine weitere Funktion aufgerufen, die für den nächsten Teil der Animation zuständig ist.

var i = 0;
var loadingCycles = 3;
var animateLoading = function(){
	if(i<loadingCycles){
		if(i==0){
			clone = theButton.clone();
			clone.id = theButton.name+'-copy';
			theButton.parent().append(clone);
			$(clone).css('opacity','0.6');
			$(theButton).css('opacity','0.6');
		}
	$(clone).animate({'margin-top':'60'},750,function(){$(clone).animate({'margin-top':'0'},750);});
	$(theButton).animate({'margin-top':'0'},750,function(){$(theButton).animate({'margin-top':'60'},750,animateLoading);});
	i+=1;
	}
}

Da nicht auf eine “echte” Antwort eines Servers gewartet wird, gibt es eine feste Anzahl an Wiederholungen, welche hier mit loadingCycles beschrieben wird. Die Variabel theButton beinhaltet den gerade aktiven Button, also entweder den Login- oder den Registerbutton, je nach dem welcher Tab gerade aktiv ist. Beim ersten Durchlauf der Schleife wird der Button zunächst kopiert. Dann wird die ID der Kopie verändert, da eine ID einzigartig sein muss. Anschließend wird der erstellte Klon in das Document Object Model (DOM) direkt nach dem originalen Button eingepflegt. So erhält man zwei identische kreisförmige Buttons. Nun werden die Buttons gegensätzlich bewegt, welches durch die Veränderung vonmargin-top geschieht. Sobald diese Animation fertig ist wird i um eins erhöht und die Funktion erneut aufgerufen solange bis die Anzahl an nötigen Wiederholungen erreicht ist.

Videos rundum IM: Was ist eigentlich die Fernleihe?

Fernleihe in der Bibliothek

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet.

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

Was ist eigentlich die Fernleihe?

Autorinnen: Isabelle Sawatzki und Sina Kirchhoff

Unser Erklärvideo beschäftigt sich mit der Dienstleistung „Fernleihe“ in Bibliotheken.

Da viele Medien in der eigenen Bibliothek, vor allem in öffentlichen Bibliotheken, zu speziellen Themen oft nicht vorhanden sind, bietet die Fernleihe die Möglichkeit diese Medien aus anderen Bibliotheken zu bestellen.

Um diesen Service zu nutzen, muss der Kunde sich an eine Bibliothek in seiner Umgebung wenden. Diese Bibliothek übernimmt die nötigen Recherchearbeiten, leitet die Bestellung weiter und stellt das Material nach dessen Eingang dem Kunden zur Verfügung.

Leider wissen immer noch wenige Bibliothekskunden über die Existenz dieses Services. Um hier der Unwissenheit entgegen zu wirken, erklärt der Film kurz und anschaulich, was eine Fernleihe ist und wie diese praktisch für den Kunden funktioniert.

Das Video zeigt einen jungen Studenten (Max), der im Fach Philosophie eine Hausarbeit schreiben muss. Das Thema ist Traumdeutung. Um Literatur zu diesem Thema zu finden, geht er in die nahe Stadtbibliothek. Er fragt die junge Bibliotheksmitarbeiterin (Emma), die für diesen Fachbereich zuständig ist, nach Literatur zu diesem Thema. Nach kurzem Blick in den Bibliothekskatalog und den Bestand, stellt Emma fest, dass es zu diesem Thema keine, oder nicht genügend Literatur in der Stadtbibliothek gibt.

Sie schlägt dem Studenten die Bestellung von Büchern und Aufsätzen über die Fernleihe vor. Dieser nimmt die Idee gerne an. Daraufhin recherchiert Emma über den Verbundkatalog und wird in anderen Bibliotheken fündig. Es wird Literatur aus verschiedenen Bibliotheken über die Fernleihe bestellt und an die Stadtbibliothek verschickt.

Max kann die Bücher und Aufsätze nun in seiner Bibliothek abholen und so seine Hausarbeit schreiben. Anschließend werden die Bücher wieder über den Leihverkehr zu der besitzenden Bibliothek zurückgeschickt.

Der Film wurde komplett digital am Computer erstellt, die verwendeten Bilder sind lizenzfrei und der Webseite Freepik entnommen worden. Die im Hintergrund abgespielte Musik konnte bei Evermusic lizenzfrei heruntergeladen werden.

Nachdem das Storyboard angefertigt war, wurden mit Hilfe von PowerPoint die entsprechenden Grafiken und Bilder erstellt und in eine sinnvolle Reihenfolge gebracht.Einige der Grafiken wurden vorher mithilfe des Programms Paint bearbeitet und freigestellt und /oder auch zusammengefügt. Die Audiospur wurde im Tonstudio der Stadtbibliothek Mülheim von Isabelle Sawatzki eingesprochen und anschließend mit EasyCutXP verarbeitet und geschnitten.

Mit Quicktime wurde der Film via Bildschirmaufnahme/Screencast erstellt und dann mit iMovie geschnitten sowie die beiden Audiodateien (gesprochenes Wort und Hintergrundmusik) eingefügt.

Storyboard

Videos rundum IM: Was ist Informationsmanagement?

Was ist Informationsmanagement?

Im Studiengang Informationsmanagement an der Hochschule Hannover sind im Rahmen des Kurses Entwicklung von Multimediasystemen I (Wintersemester 2017/18, Prof. Dr.-Ing. Steinberg) einige sehr gute Videos rundum das Studium Informationsmanagement und das studentische Leben an der Expo Plaza in Hannover entstanden. Dabei wurden unterschiedliche, klassische Techniken wie z.B. Erklärvideo, Legetechnik oder Stopmotion verwendet.

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

Was ist Informationsmanagement?

Autoren: Mareike Schulte, Sven Bessel

Kurzbeschreibung

In unserem Studium Informationsmanagement hörten wir folgenden Satz in verschiedene Varianten immer wieder:

„Die richtige Information zum richtigen Zeitpunkt in der richtigen Form und für die richtige Zielgruppe.“

Dieser Satz beschreibt kurz und knapp die Bedeutung von Informationsmanagement. Daher kam uns die Idee, diesen Satz als Grundlage für unsere Animation zu nehmen. Dabei sollten die einzelnen Elemente des Satzes visuell dargestellt werden. Bei der Erstellung des Skripts entschieden wir uns dafür die Animation inhaltlich auszuschmücken. Daher fügten wir eine Sequenz ein, in der auf humorvolle Art der Mangel an Informationen mit traurigen Menschen und schlechtem Wetter gezeigt wird. Der Erhalt von Informationen führt im Gegenzug zu fröhlichen Menschen und gutem Wetter. Zum Schluss fügten wir noch einen Aufruf zum Studieren unseres Studiengangs hinzu.

Wir entschieden uns bewusst gegen Software für Erklärvideos und für die eigene Herstellung aller Elemente. Nach den ersten Versuchen mit der Legetechnik entschieden wir uns für eine andere Vorgehensweise, da wir mit dem Ergebnis nicht zufrieden waren.

Die Zeichnungen wurden komplett als Vektorgrafiken in Adobe Photoshop erstellt und anschließend mit Keyframes in Adobe Premiere Pro animiert. Die Animation setzt sich aus einer Mischung von nicht bewegten und mit Keyframes animierten Bildern zusammen, welche auf verschiedenen Ebenen liegen. Die zeitliche Abfolge und die Menge der Keyframes haben wir nach Bedarf angepasst. Den eingesprochenen Text haben wir mit Audacity aufgenommen und anschließend in Adobe Premiere Pro importiert und passend zum Video zurechtgeschnitten.

Die Soundeffekte haben wir aus dem Internet heruntergeladen, alle sind Creative Commons lizensiert. Diese haben wir ebenfalls in Adobe Premiere Pro importiert und passend zurechtgeschnitten. Die Reduzierung des Hintergrundrauschens und die Erstellung des Vorspanns erfolgten nachträglich mit iMovie für Mac.

Das Ergebnis ist ein kleiner unterhaltsamer Werbefilm zum Thema Informationsmanagement und dem Studiengang an der HsH.

Das Storyboard zur Animation ist hier zu finden.

 

Tutorial: Scroll Percent Display with liquid Animation

Tutorial: Scroll Percent Display with liquid Animation

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.

Konzept und Quellcode mit Erläuterung von Scroll Percent Display with liquid Animation

Author: Lars Heinrich und Neele Lange

Einleitung

Mal ehrlich!? Schon mal auf einer Webseite gewesen und ihr musstet scrollen und scrollen und scrollen? Dabei habt ihr euch gefragt, wie weit denn noch? Wann kommt das Ende?

Um dieses kleine Problem mit einem Gimmick zu lösen, haben wir dieses Tutorial geschrieben.

Anmerkung: Diese Idee ist nicht in Stein gemeißelt. Sie kann beliebig erweitert, verbessert oder auch verändert werden.

Notwendige Dateien

Zuerst benötigt man die Grunddateien jeder Homepage. Dafür legt man sich folgende Dateien an.

  • index.html
  • style.css
  • script.js

zusätzlich

  • liquid.js

Erstellt diese Dateien einfach mit einem Editor eurer Wahl und speichert sie in einem separaten Ordner.

Libraries

Die Libraries beinhalten alle wichtigen Information, um die Liquid Animation herzustellen. Jquery und D3.js, sowie die liquid.js werden wir ganz einfach via API hinzufügen. Das hat den Vorteil, dass man immer die aktuellste Version hat.

HTML Datei vorbereiten

In der HTML Datei wird nun folgender Code eingefügt:

<html>
    <head>
        <meta charset="utf-8"> 
        <title> Hier kommt euer Titel hin</title>
      </head>
    <body>
      </body>
</html>

Nun ist das Grundgerüst der HTML Datei erstellt.

<html> Ist dabei der äußerste Gerüst und schließt alles andere ein

<head> ist der Kopf und umfasst neben dem Titel der Seite auch alle Scripte, die Stylesheets und Metadaten.

<body> ist das was der Nutzer am Ende sehen wird. Hier kommen alle Informationen hinein, welche später zu sehen sein sollen.

</html></head></body> schließen die jeweiligen Felder.

Verbindungen herstellen 

Da wir eine Verbindung zu den jeweiligen Dateien und API´s benötigen, fügen wir folgendes im Headbereich ein:

<script src="script.js" type="text/javascript"></script>

Das verbindet die index.html Datei mit eurer script.js Datei

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>
<script src="https://gist.githubusercontent.com/brattonc/5e5ce9beee483220e2f6/raw/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js" language="JavaScript"></script>
<script src="liquid.js" type="text/javascript"></script>

Dieser Abschnitt stellt die Verbindung zu den notwendigen API´s her

<link rel="stylesheet" type="text/css" href="style.css">

und zu guter Letzt, ist auch die style.css Datei verbunden.

<body>

Die HTML Datei ist nun fast fertig. Zum Schluß wollen wir ja etwas sehen und müssen im Body noch unsere Prozent Anzeige hinzufügen.

Ihr vergibt euren <body> noch eine ID um später dem Script seine Aufgabe zuzuweisen zu können.

<body id="body">

Anschließend erstellt ihr einen DIV Container:

<div  class="box" >
    <svg id="fillgauge1" width="300%" height="300" ></svg>
</div>

Der <div> Container benötigt ein class, welches vom Stylesheet benötigt. *optional

<svg id> erstellt die Anzeige. Die ID ist wieder die Zuweisung für das Script.

Es ist auch ohne Div Container möglich, aber für die Übersicht praktischer.

Nach dem </div> muss man nur noch einmal das Script einbinden

<script src="script.js" type="text/javascript"></script>

Das bewirkt, dass das Script hier geladen wird. Ansonsten würde keine Anzeige entstehen.

Die HTML Datei ist fertig.

Komplette index.html Datei zur Übersicht:
<html>
    <head>
        <meta charset="utf-8"> 
        <title> Hier kommt euer Titel hin</title>

<script src="script.js" type="text/javascript"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://d3js.org/d3.v3.min.js" language="JavaScript"></script>
<script src="https://gist.githubusercontent.com/brattonc/5e5ce9beee483220e2f6/raw/4c2e1e4b0ed515d9d9de26d0996519fc16c2ae43/liquidFillGauge.js" language="JavaScript"></script>

       

        <link rel="stylesheet" type="text/css" href=„style.css">
</head>

  <body id=„body">

     <div class="box" >
           <svg id="fillgauge1" width="300%" height="300" ></svg>
     </div>

     <script src="script.js" type="text/javascript"></script>
    
  </body> 
</html>

Anmerkung: Die „id“ und „class“ Bezeichnungen könnt ihr auch beliebig anders benennen, man muss nur darauf achten, diese auch im Script und im Stylesheet anzupassen.

Script Datei mit Inhalt füllen 

Jetzt wird gecodet. Aber alles sehr einfach.

var x = 0;

var config0 = liquidFillGaugeDefaultSettings();
config0.circleColor = "silver"; //Außenringfarbe
config0.waveTextColor = "white"; //Textfarbe
config0.circleThickness = 0.05; //Dicke des Außerings
config0.textVertPosition = 0.2; //Position des Textes
config0.waveAnimateTime = 1000; //Wellenanimation

var gauge1 = loadLiquidFillGauge("fillgauge1", x, config0);

Der Code erstellt das eigentliche Liquid-Display.

var x erstellt eine Variable und erzeugt die erste Zahl, welche beim Laden angezeigt werden soll. Da man immer oben bei einer Homepage beginnt, soll hier die Zahl 0 angezeigt werden, denn schließlich haben wir ja noch gar nicht gescrollt.

var config0 lädt die folgenden Einstellungen, welche auch im Hauptscript liegen, die wir auch für unsere Webseite anpassen möchten. „ACHTUNG: niemals das Hauptscript* ändern, da sonst das ganze Script zerstört werden kann“.*Muss dann als Datei vorliegen.

var gauge1 erstellte die Animation. Darauf ist zu Achten, dass die Klammer folgende Werte enthällt.

(„ID“, Anfangswert, Konfiguration)

Scrollscript
document.getElementById("body").onscroll = function() {gauge1.update(NewValue2());};

Im Grunde ist dieser Code Abschnitt das Herzstück des Ganzen. Ohne diesen Abschnitt hätten wir keine Scrollfunktion.

Hier könnte man auch eine andere Funktion implementieren, wenn man die Liquid Animation nicht verwenden möchte.

Beim Scrollen aktivieren wir diesen Code, da wir zuvor dem Body die ID „body“ hinzugefügt haben. Beim Scrollen lösen wir die Function gauge1.update aus, die auf die NewValue2 Function zugreift.

Um beim Scrollen einen Wert zu erhalten benötigen wir diesen Codeabschnitt:

function NewValue2(){	
    
    var $window = $(window);
    var documentHeight = $("body").height();
    var windowHeight = $window.height();
    var scrollTop = $window.scrollTop();
    var scrollPercent = 2* ((scrollTop) / (windowHeight));
    
    if (Math.round(scrollPercent*100) >100)
        return 100;
    else
        return Math.round(scrollPercent*100)
}

Die Function NewValue2 erfasst die Höhe der Seite und berechnet den Abstand der Seite mit dem TOP der Seite. Var scrollPercent berechnet den Wert in Prozent.

Die untere if – else Schleife ist ein Hilfsmittel um immer nur maximal 100% angezeigt zu bekommen.

Achtung: Hier kann es zu Fehlern kommen, wenn eure Seite kürzer oder länger ist, als die Tutorial Seite. Ggf. muss man hier den Code anpassen.

Die Script Datei ist nun fertig erstellt.

Komplette script.js Datei zur Übersicht:
var x = 0;

var config0 = liquidFillGaugeDefaultSettings();
config0.circleColor = "silver"; //Außenringfarbe
config0.waveTextColor = "white"; //Textfarbe
config0.circleThickness = 0.05; //Dicke des Außerings
config0.textVertPosition = 0.2; //Position des Textes
config0.waveAnimateTime = 1000; //Wellenanimation

var gauge1 = loadLiquidFillGauge("fillgauge1", x, config0);

document.getElementById("body").onscroll = function() {gauge1.update(NewValue2());};

function NewValue2(){	
    
    var $window = $(window);
    var documentHeight = $("body").height();
    var windowHeight = $window.height();
    var scrollTop = $window.scrollTop();
    var scrollPercent = 2* ((scrollTop) / (windowHeight));
    
    if (Math.round(scrollPercent*100) >100)
        return 100;
    else
        return Math.round(scrollPercent*100)
        
        }
Stylen nicht vergessen

Ohne Style geht es nicht. Alle  Einstellungen sind veränderbar und auf die eigenen Wünsche und Homepage leicht anzupassen. Also Mut zum ausprobieren.

Komplette style.css Datei zur Übersicht:

body {
    font-family: "Lato", sans-serif;
    background-color: #333;
    height: 200%;
}

.liquidFillGaugeText { font-family: Helvetica; font-weight: bold; }

.box {
    	position: fixed;
    margin: 0 auto;
    	margin-top: 20%;
    width:300;
    	height: 300;
    color: "black";
    text-align: center;
}

Das Tutorial ist in der Funktion nun abgeschlossen.

GESCHAFFT!!!

Beispiel Dateien zum Download

Beispiel:

Beispiel ansehen

 

Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement

Tutorial: Interaktive Führung durch den Studiengang Informationsmanagement

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.

Interaktive Führung durch den Studiengang Informationsmanagement

Autor: Lena Meyer

Der Studiengang Informationsmanagement ist einzigartig und wird derzeit nur an der Hochschule Hannover gelehrt. Damit sich Studieninteressierte einen ersten Eindruck verschaffen können, wird die nachfolgende Website über eine Slideshow die Location der Fakultät kurz darstellen und über die interaktive Timeline einen Überblick zu den inhaltlichen Studienthemen geben.

Konzept

Die Website wurde zum Zweck der inhaltlichen und zugleich der visuellen Darstellung der Studieninhalte eines Informationsmanagers entwickelt. Sie soll den Nutzer interaktiv mithilfe von diversen funktionalen Animationselementen durch den Studiengang Informationsmanagement führen.

Aus Stilgründen wird die Website mit dem einfliegenden Text „Welcome“ gestartet. Dieser hat für den Nutzer jedoch keine weitere Funktion bzw. Bedeutung. Er dient ausschließlich der Gestaltung eines innovativen Layouts.

Die interaktive Navigation soll den Nutzer durch den Studienablauf eines Informationsmanagers führen. Über die farbliche Hervorhebung der Navigation-Tabs erhält der Nutzer die sofortige Rückmeldung an welchem Navigationspunkt er sich aktuell befindet.

Hinter dem Navigationspunkt „Location“ verbirgt sich eine Slideshow. Dadurch erhält der Studieninteressierte einen ersten Eindruck von dem Gebäude und dem dazugehörigen Campus der Hochschule Hannover. Aktuell befinden sich in der Slideshow drei Beispielbilder, diese können nach Belieben ausgetauscht oder ergänzt werden. Allerdings ist dies nur über den Quellcode möglich. Über die Pfeile Links und Rechts kann der Nutzer die Bilder anklicken. Dies gelingt zusätzlich durch das Klicken auf einer der drei im unteren Teil befindlichen Rechtecke. Über eine farbliche Hervorhebung der Rechtecke wird dem Nutzer jeweils signalisiert, welches Bild er zurzeit ausgewählt hat.

Der zweite Navigationspunkt ist die Timeline. Dahinter sollen sich die Studieninhalte innerhalb der insgesamt sieben Semester befinden. Dargestellt wird ein Zeitstrahl, der mit unterschiedlichen Daten versehen ist. Sobald der Nutzer auf eines der Daten klickt, erhält er eine kurze inhaltliche Darstellung der Themen des Semesters. Der Zeitstrahl wurde in einem Responsive Design entwickelt, über die Buttons links und rechts, lässt sich der Zeitstrahl dementsprechend verschieben. Abhängig des angeklickten Datums färbt sich zusätzlich der Zeitstrahl in der Farbe orange, dadurch wird dem Nutzer signalisiert, welches Datum er aktuell ausgewählt hat.

Der Navigationspunkt „Map“ beinhaltet eine Metrik, die aus drei unterschiedlichen Boxen besteht. Die Boxen sollen den Nutzer zum Klicken animieren. Nach dem Klick erhält der Nutzer eine Zusatzinformation, die ausschließlich beim Klick ersichtlich ist. Über das „X“, welches sich oben rechts befindet, kann die Box wieder geschlossen werden.

Der letzte Navigationspunkt ist das Impressum. Allerdings erreicht der Nutzer das Impressum nicht direkt durch das Klicken des Tabs. Er wird dazu animiert, auf den sich im unteren Bereich befindlichen „Scroll-Down Button“ zu klicken. Durch einen Anker gelangt er anschließend zum Inhalt des Impressums. Durch das Bouncen des Buttons, soll der Nutzer auf den Scroll-Down Button aufmerksam werden.

Technische Umsetzung

Die Website wurde mithilfe von Elementen aus HTML 5, CSS 3 und Javascript entwickelt. Zusätzlich wurden diverse Librarys von jquery oder css bezüglich der Funktion und der visuellen Darstellung hinzugezogen. Um welche Libraries es sich dabei handelt wird unter dem Punkt „Quellen“ aufgezeigt.

Plattformen, wie „W3schools“ oder „Codepen“ haben maßgeblich an der Entwicklung der Website mitgewirkt. Zum einen galten sie als Inspiration und zum anderen als technische Unterstützung bei der Umsetzung. Um welche Code Beispiele es sich dabei jeweils handelt, wird ebenfalls in den Quellen aufgeführt.

Zum vollständigen Nachvollzug des Aufbaus und der technischen Gestaltung der Website, ist der dazugehörige Quellcode mit zahlreichen Kommentaren ausgestattet. Dadurch kann ein noch besseres technisches Verständnis erzielt werden.

Die Website ist unter dem folgenden Link zu erreichen : Informationsmanagement.

Der dazugehörige Quellcode mitsamt des Konzepts und Screenshots ist unter dem folgenden Link zu erreichen: Informationsmanagement Quellcode.

Quellen

Libraries:

https://fonts.googleapis.com/css?family=Lato:400,700

https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css

https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css

https://fonts.googleapis.com/css?family=Montserrat:400,700

https://code.jquery.com/jquery-3.2.1.min.js

http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js

https://cdnjs.cloudflare.com/ajax/libs/jquery-mobile/1.4.5/jquery.mobile.min.js

Codepen:

Stackoverflow:

http://stackoverflow.com/questions/542938/how-do-i-get-the-number-of-days-between-two-dates-in-javascript

Tutorial: Ein Akkordeonmenü für die Fakultät III

Ein Akkordeonmenü für die Fakultät III, Hochschule Hannover, Expo Plaza

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.

Ein Akkordeonmenü für die Fakultät III

Autoren: Svenja Hamacher und Alina Finger

Umsetzung: hier

Quellcode+Bild: multimediasysII

Konzept

Die Aufgabenstellung zur Entwicklung und Implementierung einer funktionalen Web Animation hat als Vorgabe, dass es keine rein dekorative Animation ohne Funktion sein durfte. Weiterhin sollte nach Möglichkeit das Thema Studium/ Informationsmanagement aufgegriffen werden.

Vor dem Hintergrund der Funktionalität fiel unsere Wahl recht schnell auf eine Abwandlung eines Akkordeonmenüs. Der Vorteil dieser Art von Menü ist, dass man viel Inhalt auf wenig Raum darstellen kann und somit detaillierte Inhalte zu unterschiedlichsten Themen abbildbar werden. Gerade Kontaktdetails haben dabei oft nur einen geringen Umfang, weswegen bei Fakultäten oft verschiedene Kontaktinformationen auf eine Seite geschrieben werden. Um also die Kontaktinformationen der Fakultät 3 übersichtlicher und schöner zu gestalten, entschlossen wir uns eine einfache Navigation mit JavaScript zu bauen, die den platzsparenden Gedanken des Akkordeonmenüs aufgreift. Derzeit gibt es mehrere Seiten, auf welchen verschiedene Kontakt- und Weginformationen zur Fakultät 3 und ihren Abteilungen „Design und Medien“  und „Information und Kommunikation“ zu finden sind.

Aus der bestehenden Webseite der Fakultät 3 konnten wir als wesentliche Kontaktinformationen den Anfahrtsweg, den Campusplan, die Raumverwaltung und Ausstellungsfläche, die Kontaktinformationen von DM und IK, sowie das Impressum entnehmen. Diese Informationen haben wir zum Großteil übernommen und umstrukturiert. Nur beim Anfahrtsweg haben wir die bestehenden Informationen komplett ersetzt. Für den Anfahrtsweg entschieden wir uns zum einen dazu, Google Maps direkt einzubinden, da so die Adresse, ein Grundriss des Expo Plazas und nahegelegene Bus- und Bahnhaltestellen ersichtlich werden. Zum anderen haben wir einen Button eingefügt, welcher direkt zur Google Maps Navigation weiterleitet und den Expo Plaza 12 als Zieladresse einstellt.

Die verschiedenen Inhalte sollen dabei durch Javascript aus- und eingeblendet werden, je nachdem welcher Reiter aktiviert wird. Durch diese Animation wird das ursprüngliche Ziel des Platzersparnisses erreicht. Als zusätzliche Animation werden die Bilder der Menüreiter animiert. Die Symbole verlassen dabei den Reiter und „fliegen“ in eine der Inhaltsboxen, wodurch der aktive Reiter zusätzlich zur farblichen Hervorhebung gekennzeichnet wird und der Benutzer sich besser orientieren kann. Als Grundlage für den Code wurde der Pen gewählt, welcher unter https://codepen.io/rss/pen/itjqC​  zu finden ist.

How To

Die Animation besteht aus drei Dateien. Im Folgenden wird beleuchtet, wie die HTML-, CSS- und JavaScript-Datei zusammenspielen, um die Animationen zu erzeugen.

In der HTML-Datei werden die Informationsinhalte gespeichert. Dabei wird jeder Menüreiter zunächst in einem Divcontainer gespeichert, welcher sowohl eine ID, als auch einen weiteren Divcontainer mit der Klasse des zugehörigen Icons enthält. Die verfügbaren Icons hängen dabei von dem Iconpaket ab, welches in der CSS Datei eingebunden wird und können daher beliebig verändert oder auch selbst gestaltet werden. Die ID des Divcontainers wird später in der JavaScript-Datei wichtig, da über diese ID die Animation, also das Ein- und Ausblenden der Inhalte, funktioniert.  Dazu ist es eben falls wichtig, dass die Inhalte, welche beim aktivierten Reiter gezeigt werden sollen, von Divcontainer mit individueller ID umschlossen sind.

Standardmäßig ist in unserer Animation der erste Reiter, welcher die Anfahrt via Google Maps enthält, als „active“ gekennzeichnet. Bei einem Klick auf einen anderen Reiter werden folgende Prozesse in Bewegung gesetzt:

  1. Mittels JQuerys .hide() Befehl werden zunächst alle Inhalte ausgeblendet
  2. Allen Reitern wird der Status „active“ durch „removeClass(„active“)“ entfernt, damit wirklich nur der angeklickte Reiter am Ende „active“ ist
  3. Der zum angeklickten Reiter passende Inhalt wird mittels seiner individuellen ID angesprochen und durch den .show() Befehl sichtbar gemacht.
  4. Dem angeklickten Reiter wird durch .addClass(„active“) die Klasse „active“ hinzugefügt, wodurch die farbliche hervorhebung und etwaige Symbolanimationen aktiviert werden.

Diese vier Schritte sollten so schnell ablaufen, dass der Nutzer nur einen flüssigen Wechsel wahrnimmt. Durch diese vier Befehle wird verhindert, dass mehr als ein individueller Div-Container zurzeit angezeigt wird. Ohne JavaScript würden also alle Inhalte einfach untereinander in einzelnen Boxen angezeigt werden.

Die Animation der Icons im Reiter wird dabei nur indirekt durch JavaScript beeinflusst. Standardmäßig erhalten die Icons ihre Positionseigenschaften von der Klasse contactype. Sobald mittels JavaScript jedoch die Klasse „active“ an den jeweiligen Div vergeben wird, werden mittels CSS neue Positionseigenschaften für das Icon gültig. Durch Anpassen des jeweiligen CSS-Containers kann also bestimmt werden, wohin sich das Icon beim Anklicken bewegt, oder ob es (wie beim Reiter Anfahrt) einfach im Reiter stehen bleibt. So können auch, wie bei der Sprechblase des Reiters „Kontakt DM“, Drehungen und andere Transformationen des Symbols vorgenommen werden, was für den Benutzer interessant ist.

Tutorial: Ein responsives Menü mit jQuery für die HsH

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.

Ein responsives Menü mit jQuery für die HsH

Autor: Jan Jäger

Planung

Ziel des Projekts war ein kleines Menü für eine Homepage zu schaffen. Dieses sollte die folgende Funktionalität haben:

  • Ausklappen des Menüs
  • Hervorhebung der Menüpunkte
  • Änderung des Inhalts
  • responsives Design

Umsetzung

Ausklappen des Menüs

Das Menü ist standardmäßig versteckt. Eingeblendet wird es durch eine Schaltfläche. Hierfür wurde das aktuell populäre Hamburger-Menu-Icon () verwendet.[1] Zusätzlich lässt sich das Menü auf diese auch wieder ausblenden. Ansonsten wird das Menü ausgeblendet, sobald ein Menüpunkt angeklickt wird.

Hervorhebung der Menüpunkte

Als beispielhafte Menüpunkte wurden die fünf Fakultäten der Hochschule Hannover gewählt. Zusätzlich ist das ‘Dach’ durch einen Klick auf den Schriftzug ‘Hochschule Hannover University of Applied Sciences and Arts’ im Banner (wieder) erreichbar.

Die Hervorhebung der Menüpunkte geschieht bei mouseover. Ohne Mauszeiger, also beispielsweise auf Smartphones, ist dieser Effekt daher nicht zu sehen. Für die Hervorhebung selbst wurde die Opazität verwendet.[2] Hierdurch kann ein Element trüb dargestellt werden.

Die Menüpunkte sind standardmäßig auf eine Opazität von 0.5 gestellt und werden bei mouseover auf 1.0 gesetzt und bei mouseout wieder auf 0.5 zurückgesetzt. Für das Banner sind die Werte genau umgekehrt gewählt.

Zusätzlich zur Opazität wurde überlegt auch noch die Größe der Menüpunkte zu ändern. Dies wirkte jedoch zu unruhig.

$("#fak3").mouseover(function() {
    $("#fak3").animate({
        padding: '10px',
        margin: '0px',
        opacity: '1.0'
    }, 500);
});

Änderung des Inhalts

Der Inhalt wird durch click auf einen Menüpunkt bzw. auf den oben erwähnten Schriftzug im Banner geändert. Geändert wird dann der Inhalt im content.[3] Gleichzeitig wird das Menü wieder zugeklappt.

Zusätzlich zum Inhalt wird auch die Farbe des Banners geändert, um dem Nutzer zu veranschaulichen auf welcher Seite er sich aktuell befindet. (Hierzu mehr bei der Erläuterung zu den verwendeten Bibliotheken.)

Zu Anfang sollte auch der Inhaltsbereich beim Wechsel des Inhalts aus- und wieder eingeblendet werden. Dies wirkte jedoch insgesamt zu unruhig, da parallel bereits das Menü eingeklappt wird. Zudem hätte noch eine Möglichkeit gefunden werden müssen, eine Pause für den Wechsel des Inhalts einzufügen. Bei der getesteten Variante wurde der Inhalt bereits gewechselt, bevor der Inhaltsbereich komplett ausgeblendet wurde.

$("#content").slideUp(500);
// Code zum Wechseln des Inhalts
$("#content").slideDown(500);

Responsives Design

Die ganze Seite sowie speziell das Menü verhalten sich bei unterschiedlicher Seitenbreite quasi responsiv. Während dies für das Banner sowie den Inhaltsbereich noch vergleichsweise einfach war, weil diese direkt in Abhängigkeit der Elternelemente formatiert werden können, wurde sich vor allem auf das Menü konzentriert.

Üblich ist aktuell die Verwendung von Media Queries, also beispielsweise

@media (min-width: 900px) {
    /* anzupassende Elemente */
}

@media (min-width: 600px) {
    /* anzupassende Elemente */
}

@media (min-width: 300px) {
    /* anzupassende Elemente */
}

Dabei hätte in diesen Media Queries u.a. die Höhe und Breite der Menüpunkte in Abhängigkeit von der Seitenbreite gesetzt werden müssen. Dies hätte jedoch dazu geführt, dass das Menü nicht immer – wie gewünscht – die volle zur Verfügung stehende Breite einnimmt. Deswegen wurde bewusst der eher klassische Weg über JavaScript gewählt. Dies hatte dann auch noch den kleinen Nebeneffekt, dass das Menü durch die Neuberechnung bei Größenänderungen des Browserfensters quasi dynamisch seine Größe ändert. Im eigentlichen Sinne ist dies natürlich keine Animation.

Ursprünglich sollte auch noch die Schriftgröße dynamisch angepasst werden, damit die vollständige Beschriftung zu sehen ist.

if(pageWidth <= 480){
    $(".menu").css("fontSize", (pageWidth / 40) + "px");
}
else{
    $(".menu").css("fontSize", "15px");
}

Dies führte jedoch dazu, dass die Schrift im Menü im Vergleich zur Schrift in allen anderen Bereichen ziemlich klein gesetzt werden musste. Stattdessen wurde deswegen der Text mittels CSS ‘abgeschnitten’.

overflow: hidden;

Code

HTML + CSS

Es wurde ein eigenes HTML-Grundgerüst geschrieben und dieses mit CSS angepasst.

JS

Es wurden zwei Bibliotheken verwendet und zusätzlich eigener Code geschrieben.

Bibliotheken

Zur Umsetzung des Projekts wurden die folgenden Bibliotheken verwendet:

Ursprünglich sollte nur jQuery verwendet werden. Die Farbänderung im Banner war damit jedoch nur abrupt möglich. Gewünscht war jedoch ein fließender Übergang, also von einer Farben zur nächsten.

Dies hätte zwar auch mit @keyframes in CSS erreicht werden können. Dies hätte jedoch zu einer Vermischung von Methoden geführt, da die @keyframes noch mittels JavaScript zum Banner hinzugefügt werden müssen. Außerdem wäre dies sehr umfangreich gewesen, da in Abhängigkeit der Anzahl der verwendeten Farben im Banner eine Vielzahl @keyframes benötigt worden wäre. Genauer gesagt hätte es bei Verwendung von n Farben n * (n - 1) = n2 - n @keyframes benötigt, also bei den hier verwendeten 6 Farben 6 * (6 - 1) = 6 * 5 = 30 @keyframes.[4] Zusätzlich hätte es auch noch eine Menge JavaScript-Code benötigt, um die @keyframes zum Banner hinzuzufügen. Es muss ja für die Auswahl des richtigen @keyframes sowohl die Ausgangs- als auch die gewünschte Zielfarbe bestimmt werden müssen. Zusätzlich müssen die @keyframes so eingestellt werden, dass die Animation am Ende automatisch stoppt und nicht immer wieder von vorne beginnt. Dazu bedarf es dem folgenden CSS-Code:

animation-fill-mode: forwards;

Eine eventuelle Erweiterung des Menüs wäre dadurch nur mit sehr viel Aufwand möglich. Insgesamt wurde diese Variante als zu umfangreich angesehen. Nach Rücksprache mit Frau Steinberg wurde dann letztlich auch noch jQuery UI eingebunden, das die gewünschte Funktionalität mitbringt. Hier bedarf es nur einer Zeile JavaScript-Code pro Zielfarbe, unabhängig von der Ausgangsfarbe.[5] Um beispielsweise die Farbe des Banners in Richtung der Fakultät I zu ändern, muss nur die folgende Zeile JavaScript-Code eingefügt werden.

$("#header").animate({backgroundColor: "rgb(30,190,235)",}, 1000 );

Eigener Code

Am Ende wurde auch noch eigener JavaScript-Code geschrieben, um das Menü automatisch in abhängig von der Seitenbreite anzupassen. Dazu wurde zunächst eine globale Variable definiert, in die die Seitenbreite geschrieben wird. Mit dieser wird dann die selbst geschriebene Funktion menuWidth() aufgerufen, die die gewünschte Höhe und Breite der Elemente des Menüs berechnet und in diese schreibt. Bei Änderungen an der Seitenbreite, z.B. durch Größenänderung des Browserfensters, würde dies jedoch bestehen bleiben. Deswegen wurde zusätzlich ein EventListener definiert, der bei Änderungen der Seitenbreite diese abfragt und die Funktion menuWidth() erneut aufruft.

Ergebnis

See the Pen menu for HsH by Jan Jäger (@jaegerjan) on CodePen.

https://production-assets.codepen.io/assets/embed/ei.js


[1] Nähere Informationen z.B. in der Wikipedia: https://de.wikipedia.org/wiki/Hamburger-Men%C3%BC-Icon.

[2] Nähere Informationen z.B. in der Wikipedia: https://de.wikipedia.org/wiki/Opazit%C3%A4t.

[3] Um dies zu simulieren wird nur die Überschrift mit der ID greetings geändert. Prinzipiell müsste stattdessen Inhalt nachgeladen und in div-Element mit der ID content geschrieben werden.

[4] Es liegt quadratisches Wachstum vor.

[5] Es liegt lineares Wachstum vor.

BestOf: Funktionale Animationen (Multimediasysteme II / Medienintergration SoSe 2017)

Im Rahmen der Kurse Entwicklung von Multimediasystemen II und Medienintegration (Studiengang Informationsmanagement, Prof. Dr.-Ing. Steinberg) im Sommersemester 2017 entstanden einige funktionale Animationen durch die Studierenden. Anforderung an die Arbeiten war, keine rein dekorativen Animationen zu erstellen, sondern sich kleinen, abgeschlossenen, funktionalen Aspekten der Nutzerinteraktion zu widmen.

Verwendete Techniken sind HTML5, CSS3 und JavaScript.

Ein paar der besten Arbeiten findet ihr hier:

Um zur Animation bei CodePen zu kommen, einfach auf das Bild klicken.