Christoph's Lernblog

Fullscreen-Slideshow

Ich habe mich dazu entschlossen, eine Fullscreen-Slideshow als Hintergund meiner gesamten Webapplikation zu verwenden, da ich nicht für jede einzelne Section (Content-Information) ein passendes Bild fotografieren konnte. Jedoch habe ich eine zweite Version - Neue Dateien: index_v2.html, style_v2.css - mit fixen Hintergrundbildern pro Section ebenso angefertigt.

Warum habe ich mich für diese Slideshow-Variante entschieden? Die Entscheidung war nicht einfach, da ich auch die Variante mit statischen Bildern bzw. färbigen/weißen Hintergründen pro Section sehr passend fand und mir gut gefallen hat (Anmerkung: Ich habe beide Varianten umgesetzt und getestet). Schlussendlich war für mich die dynamische/lebendige der Slideshow die Nummer 1, da somit der Website mehr Bewegung eingeflößt wird und dies auch die sportliche Zielgruppe (größter Anteil meiner Zielgruppe) gut trifft. Beide Versionen werde ich natürlich auf den Webspace laden, um Einsicht in beide Designvarianten zu gewährleisten.

Diese Slideshow soll insgesamt sechs Bilder beinhalten, welche automatisch alle sechs Sekunden wechseln. Damit die Website nich allzu langsam wird, wurden die Bilder komprimiert.

Hier die sechs selbst geschossenen und bearbeiteten Bilder die als Hintergrund-Slideshow dienen sollten:

Wie "programmiert" man nun eine Fullscreen-Slideshow in HTML5/CSS3?

Da die Zeit und mein Wissen in Java-Script nicht ausreicht, habe ich mir hierfür ein Open Source Java Script-File "Fullscreen Background Image Slideshow" vom Internet heruntergeladen.

Einbinden der Slideshow

Um diese Slideshow verwenden zu können, habe ich das heruntergeladene JS-File in den HTML-Head folgendermaßen eingebunden:

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

Weiters muss noch die Stelle definiert werden, wo sich die Slideshow befinden sollte. Dies geschied im BODY-Bereich des HTML-Files, in meinem Fall im "CONTENT"-Bereich. Dazu benögit man eine Liste, die Anzahl der Liste muss gleich die der Bilder sein.

<ul class="cb-slideshow">
            <li><span>Image 01</span></li>
            <li><span>Image 02</span></li>
            <li><span>Image 03</span></li>
            <li><span>Image 04</span></li>
            <li><span>Image 05</span></li>
            <li><span>Image 06</span></li>
            <li><span>Image 07</span></li>
</ul>

Um nun Bilder der Slideshow zuzuweisen benötigt es noch folgenden Code im Stylsheet (CSS3):

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/bg/bg1.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/bg/bg2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
    animation-delay: 6s; 
}

Dieser Code muss nun noch für die Bilder 3 - 6 kopiert werden und die Anzahl der Sekunden jeweils um 6s erhöt werden. Also Bild 3 12 Sekunden, usw.

Natürlich muss noch die Position der Slideshow im CSS festgelegt und fixiert werden. Diesen Code werde ich jedoch hier nicht weiter anführen.

One-Page-Navigation

Damit die Usability meiner One-Page-Website für die Betrachter/Benutzer gwährleistet ist, sollte auch immer sichtbar sein auf welcher Section/Menüpunkt sie sich gerade aufhalten. Meine Überlegung dazu war es, die Menüpunkte der Navigation hervorzuheben bzw. anders zu färben (in diesem Fall ORANGE zu BLAU). Dies soll nicht nur beim Klick auf den Menüpunkt geschehen, sondern auch automatisch beim Scrollen der Website nach unten. Die Website sollte somit die "Intelligenz" besitzen, den aktuellen Standort auf der One-Page-Seite zu erkennen und nach diesem Orientierungspunkt die Menüpunkte hervorzuheben.

Dazu benötige ich wiederum Java-Script, dessen Code ich am Ende des HTML-BODY's einfüge. Folgender Codeausschnitt zeigt die Ermittlung der Section und das Aktivieren/Hervorheben der Menüpunkte:

       //Pulling sections from main nav.
        var sections = $('nav a[href^="#"]');

        // Go through each section to see if it's at the top.
        // if it is add an active class
        function checkSectionSelected(scrolledTo){
           
            //How close the top has to be to the section.
            var threshold = 100;

            var i;

            for (i = 0; i < sections.length; i++) {
               
                //get next nav item
                var section = $(sections[i]);

                //get the distance from top
                var target = getTargetTop(section);
               
                //Check if section is at the top of the page.
                if (scrolledTo > target - threshold && scrolledTo < target + threshold) {

                    //remove all selected elements
                    sections.removeClass("active");

                    //add current selected element.
                    section.addClass("active");
                }

            };
        }

Natürlich muss danach noch das Stylesheet angepasst werden. Hier ein kurzer Ausschnitt meines CSS3-Files, welcher die Menüpunkte hervorhebt und färbt:

header nav a:hover {
    color: #0011A7 !important;
}

nav .active:link,
nav .active:hover,
nav .active:visited {
   color: #0011A7 !important;
}

Google Maps-Karte einbinden

Da der Besucher der Website sich im Menüpunkt "Kontakt" auch über den Standort (Adresse) der Firmenzentrale informieren kann, soll zusätzlich auch eine Karte (Google Maps) eingebaut werden.

Die Einbindung einer einfachen Google Maps-Karte in HTML erfolgt eigentlich relativ einfach. Hierzu gibt es verschiedene Maps-Generatoren (z.B. diesen), welches den gewünschten Code erzeugt und nur noch in das HTML-Dokument an die gewünschte Stelle eingefügt werden muss. Nachfolgender Code-Ausschnitt zeigt einen Teil meiner Einbindung von Google Maps.

<iframe width="430" height="300" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="https://maps.google.at/maps?f=q&amp;source=s_q&amp;
hl=de&amp;geocode=&amp;q=salzburger+stra%C3%9Fe,+linz&amp;sll=
48.116835,13.87012&amp;sspn=3.300589,8.453979&amp;
ie=UTF8&amp;hq=&amp;hnear=Salzburger+Stra%C3%9Fe,+Linz,+Ober%C3%B6sterreich&amp;
ll=48.256786,14.289992&amp;spn=0.205723,0.528374&amp;t=m&amp;z=12&amp;output=embed">
</iframe>

Anhand der ID "googleMap" kann man diese Karte an eine beliebige Stelle im HTML-Code einbinden. Nachfolgend ein Screenshot meiner Google-Maps Einbindung:

Screenshots der aktuellsten Version der Website

Section "Produktinformationen"

Nachfolgender Screenshot zeigt die Section Produktinformationen. Zu sehen ist der in blau hervorgehobene Menüpunkt "Produktinfo", da sich der Benutzer gerade auf dieser Section befindet. Als Hintergrund ist die nach sechs Sekunden automatisch wechselnde Bilder-Slideshow zu sehen, welche sich über den gesamten Content zieht.

Section "Startseite"

Section "Anwendung"

Section "Bestellung"

Section "Kontakt"

Section "Impressum"

Weiterführende Links:

Website-Erstellung 1 - Aufbau/Grundgerüst

Projektkonzeption - ContraPain Sportgel

Bildbearbeitung / Entwürfe (Photoshop)

Video-Entwurf

Videoproduktion