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:
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.