Autoren: Amelie Andresen & Artjom Arustamov
Die fertige Arbeit finden sie hier.
Konzept
Die Seite zum „Bauhaus-Ereignisse 1919 – 1933“ kann in drei Teilbereiche aufgeteilt werden:
- Header mit integriertem Slider und Navigation
- Die Hauptseite mit dem vertikalem Zeitstrahl
- Footer mit den Direktoren
One Pager
Der Aufbau der Seite besteht aus nur einer HTML-Seite, die den gesamten Inhalt darstellt. Der „One Pager“ wird in diesem Fall vertikal aufgebaut und grenzt die drei Bereiche mit grafischen Elementen voneinander ab. Die Navigation erfolgt entweder durch Klicken auf den Menüpunkt im Header, hierbei wird direkt zum gewählten Bereich im Zeitstrahl gesprungen, oder durch eigenständiges Herunterscrollen. Anders als bei Webseiten mit Unterseiten wird die Struktur über sogenannten Sektionen und Sprungmarken erreicht, die über die Navigationsleiste bedient werden können.
Scroll-to-top
Für eine besucherfreundliche Seite wurde ein “Scroll-to-top-button” eingeführt, der es ermöglicht, längere Bereiche der Seite zu überspringen. In der rechten unteren Seite des Browsers erscheint ein Button, sobald min. 300 Pixel nach unten gescrollt wurden. Ein Klick auf den Button und der Seitenbesucher wird per animiertem Scrolling zurück ans obere Seitenende geleitet.
Favicon
Als kleines Extra verfügt die Seite über ein Favicon. Zu erkennen ist dieses Tab-Fenster des Browsers. Ein Favicon ist ein sehr kleines Logo, welches normalerweise eine Größe von 16×16 Pixel besitzt. Dazu dient das Favicon meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen.
Footer/Slider
Footer und Slider der Seite sind responsiv gestalltet.
Vorgehenweise
Um die Menge der Daten und Texte darzustellen, die von Design-Studenten bereitgestellt wurden, schien eine vertikale Timeline am sinnvollsten, um das Konzept des „One-Pager´s“ nicht zu verletzen. Des Weiteren mussten die vorhandenen Bilder ebenfalls sinnvoll eingebaut werden. Letztendlich geschah dies in Form eines Sliders im oberen Bereich der Seite und mit einer Animation der Direktorenbilder im Footer.
Realisierung
One Pager
Die Realisierung des One-Pagers über sogenannte Sections, einer Art Anker innerhalb einer HTML-Seite.
<body>
<section id="start"> </section>
<nav role='navigation'>
<ul>
<li><a href="#start" class="active">Start</a></li>
<li><a href="#weimar">Bauhaus Weimarer Zeit</a></li>
<li><a href="#dessau">Bauhaus Dessauer Zeit</a></li>
<li><a href="#berlin">Bauhaus Berlin</a></li>
<li><a href="#direktoren">Direktoren</a></li>
</ul>
</nav>
<div class="css-slider">
<h1 class="title">Bauhaus-Ereignisse 1919 - 1933</h1>
</div>
</br>
<h2>
<img src="css/bauhaus.gif">
<section id="weimar">Bauhaus Weimarer Zeit (1919 - 1925) </section>
</h2>
<section class="timeline">
<ul>
<li>
<div>
<time>1919</time> Gründung des Staatlichen Bauhauses durch Walter Gropius am 1. April 1919 in Weimar.
</br>Johannes Itten wird zum Meister berufen und Leiter des Vorkurses den er selbst als Einführungssemester entwickelt hat.
</div>
</li>
Slider
- Zeile 290
- Dauer des ganzen Sliders 20 Sekunden
- fünf Sekunden pro Bild
- Zeile 285 – 288
- enthält die Bilder
- Startbild die Eigenschaft“repeat”
- Zeile 276:
- Funktion des Z-index: hält Slider in einer der hinteren Ebenen, wäre dieser höher, wäre die Navigation nicht mehr sichtbar
- Navigation im Browser “fest”, höchste Z-Index von allen Elementen der Navigation
.css-slider h1 {
font-size: 5.5vw;
color: #fff;
text-align: center;
}
.css-slider {
overflow: hidden;
padding: 10% 0 15%;
position: relative;
margin: 48px auto 0;
max-width: 100%;
}
.css-slider:before,
.css-slider:after {
content: "";
z-index: -1;
position: absolute;
top: 0;
bottom: 0;
left: 0;
}
.css-slider:before {
width: 500%;
background: url("dessau.jpg") no-repeat,
url("weimar.jpg") no-repeat,
url("sw.jpg") no-repeat,
url("100.jpg") repeat-x;
background-position: 75% top, 50% top, 25% top, 0% top;
background-size: 20% auto;
animation: slide 20s ease-in-out infinite;
}
.css-slider:after {
right: 0;
background:rgba(0, 0, 0, .25);
}
JS-Erläuterungen
- Zeile 5
- Sections, die als Links mit “#” versehen sind
- Zeile 7
- Container, zu dem man scrollen will
- Zeile 8
- Scroll Speed in Millisekunden
- Zeile 10
- Höhe der Navigation
$.fn.pageScroller = function( options ){
var settings = $.extend({
nav: $(this),
links: $(this).find('a'),
navActiveClass: 'active',
scrollContainer: $('html, body'),
scrollSpeed: 1500,
section: $('section'),
navHeight: $(this).outerHeight()
}, options);
Quellen
| Element | Bemerkung |
|---|---|
| Scroll-to-top-Button | JS-Datei verändert und Design selber angepasst. Die Kommentare auf der Webseite benutzt. |
| Timeline | Die Timeline dient lediglich Impuls. Wir haben zusätzlich zu diesem Template einen Header und Footer konfiguriert. Innerhalb der Timeline wurden die Epochen als animierte Elemente innerhalbs eines One-Pagers runter gebrochen. |
| Bilder | genutzte Bilder |
| Ajax | genutztes Frameworks |
