• Responsive Images
• Transitions
• Figure mit Figcaption erst sichtbar bei Hover
• Lightbox Pop-Up
• Grundlagen Javascript
• Javascript-Library jQuery
• Ein- und Ausblenden via jQuery
• Sanftes Scrollen via jQuery
• jQuery Slideshow FlexSlider
• jQuery Masonry
• Hausaufgabe/Übung
• am Semesterende abzugeben

Schaut Euch die Demo an!

HTML

<img src="p/seerose.jpg" alt="seerose" srcset="p/seerose_2x.jpg 2x">

Das „normale“ Bild (960px breit) wird via srcset auf einem Retina-Display gegen das hochauflösende (1920px breit) ausgetauscht.

HTML

<img src="p/seerose.jpg" alt="seerose" srcset="p/seerose_960w.jpg 960w, p/seerose_600w.jpg 600w, p/seerose_300w.jpg 300w" sizes="100vw">

Es wird das Bild geladen, das für die jeweilige Viewport-Breite geeignet ist – damit kann man z.B. auch unterschiedliche Ausschnitte für unterschiedliche Viewport-Breiten festlegen!

Guter Artikel dazu von Chris Coyer

Schaut Euch dafür die Demo an – und das ganze Paket zum Download

HTML

<div>
    <h2>Weicher Übergang bei Hover</h2>
    <p>Lorem ipsum qui ex sale facilis…</p>
</div>

CSS

div {
    margin: 1.5em 0;
    padding: 1em;
    background: rgba(0,0,0,.07);
    border-radius: 10px;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);

    /*
        all          = es wird alles animiert verändert
        0.5se        = der Übergang dauert eine halbe Sekunde
        ease-in-out  = Animation fängt langsam an und hört langsam wieder auf
    */
    transition: all 0.5s ease-in-out;
}

/* so sollen die Divs bei "Hover" aussehen */
div:hover {
    background: red;
    color: white;
    padding: 7em 1em;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.3);
}

Demo

Demo dazu

HTML

<div>
    Hover-Element
    <p>Hallo!</p>
</div>

CSS

div p {
    […]

    position: absolute;
    top: 15px;

    /* Anfangsposition außerhalb des sichtbaren Bereiches */
    left: -2000px;

    /* Festlegen der Transition */
    transition: all 0.5s ease-in-out;  
}

div:hover p {
    /* Position des p bei Hover im sichtbaren Bereich */
    left: 200px;
}

Schaut Euch die Demo an oder ladet Euch diese gezippt runter!

HTML

<nav>
    <img src="burger.svg">
    <ul>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Über mich</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>
</nav>

CSS

nav {
    width: 10em;
    position: absolute;
    right: 10px;
    top: 6px;
}

nav img {
    width: 40px;
    float: right;
    margin-top: .4em;
}

nav ul {
    list-style-type: none;
    background-color: red;
    font-weight: bold;
    width: 100%;
    position: absolute;
    left: 9;
    /*
    Menü nach oben,
    aus dem sichtbaren Bereich verschieben
    */
    top: -300px;

    /* Transition definieren */
    transition: all 0.3s ease-in-out;
}

nav:hover ul {
    /* sichtbare Position des Menues */
    top: 50px;
}

Schaut Euch die Demo an oder ladet Euch diese gezippt runter!

HTML

<main>
    <p id="button"><a href="#">Click mich!</a></p>
</main>

CSS

#button {
  cursor: pointer;

  /* Dauer der Animation */
  animation-duration: 4s;

  /* Name der Animation */
  animation-name: buttonAni;

  /* wie oft soll die Animation ablaufen, hier unendlich */
  animation-iteration-count: infinite;

  /* Ani läuft zuerst vorwärts, dann rückwärts ab */
  animation-direction: alternate-reverse;
}

#button:hover {
  /* hält die Animation an, wenn Mousezeiger darüber liegt */
  animation-play-state: paused;
}

@keyframes buttonAni {
  0% {
    transform: scale(0.8);
    box-shadow: 0 0 7px 2px rgba(0, 0, 0, 0.3);
  }
  35% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(10deg);
  }
  45% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  55% {
    transform: rotate(-10deg);
  }
  60% {
    transform: rotate(0deg);
  }
  100% {
    transform: scale(1.8);
    box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
  }
}

Hier die Demo dazu – bitte schaut Euch dort auch den Source-Code von HTML & CSS an!

Zip-Datei

Die Demo zusammengezippt zum Download…

HTML

<div class="galerie">

<figure>
  <img src="p/klein/1-gardasee.jpg" alt="Gardasee">
  <figcaption><p>Erklärender Text zum jeweiligen Bild, der auch über mehrere Zeilen gehen kann</p></figcaption>
</figure>

<!-- usw. -->

CSS

.galerie {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 2%;
}

.galerie figure {
  /* das Eltern-Element hier definieren! */
  position: relative;

  /* sonst sieht man den Text unterhalb des Bildes */
  overflow: hidden;
}

.galerie figcaption {
  text-align: center;
  width: 100%;
  position: absolute;

  /* nächste Zeile schiebt figcaption nach unten, außerhalb des sichtbaren Bereiches */
  top: 400px;
  left: 0;

  /* damit deckt figcaption das gesammte Bild ab */
  bottom: 0;

  background-color: rgba(255,255,255,.7);

  /* ohne Transition gibt es einen harten Übergang, 0.4s ist die Dauer des Übergangs */
  transition: top 0.4s ease-in-out;
}

.galerie figure:hover figcaption {
  /* bei Hover wird figcaption über das Bild „geschoben“ */
  top: 0;
}

Hier die Demo dazu – bitte schaut Euch dort auch den Source-Code von HTML, CSS und Javascript an!

Zip-Datei

Die Demo zusammengezippt zum Download…

HTML

    <!-- das spezielle Stylesheet fürs Popup -->
    <link rel="stylesheet" href="c/magnific-popup.css">
</head>

<body>

    <div class="galerie">

        <!-- Link zum großen Bild -->
        <a href="p/gross/1-gardasee.jpg" title="Der hier eingefügte Texte wird beim Popup sichtbar!">
            <figure>
                <img src="p/klein/1-gardasee.jpg" alt="Gardasee">
                <figcaption><p>Erklärender Text zum jeweiligen Bild, der auch über mehrere Zeilen gehen kann</p></figcaption>
            </figure>
        </a>

        <!-- usw. -->

    </div><!--/galerie-->

    <!-- benötigte Verlinkungen zu Javascript-Dateien -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="js/jquery.magnific-popup.min.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

CSS

/* zusätzliche CSS-Anweisungen, damit HG langsam abgedunkelt wird */
.mfp-fade.mfp-bg {
  opacity: 0;
  transition: all 0.3s ease-out;
}
/* overlay animate in */
.mfp-fade.mfp-bg.mfp-ready {
  opacity: 0.8;
}
/* overlay animate out */
.mfp-fade.mfp-bg.mfp-removing {
  opacity: 0;
}

Javascript

/* den Code könnt Ihr 1:1 übernehmen, wenn Ihr die gleichen Klassen ("galerie" usw.) verwendet! */
$(function(){
    // alle Links innerhalb von <div class="galerie"> werden angesprochen
    $('.galerie a').magnificPopup({
        type:'image',

        image: {
        // Inhalt des title wird unterhalb des Bildes angezeigt
        // http://dimsemenov.com/plugins/magnific-popup/documentation.html#options
        titleSrc: 'title'
        },

        // Class that is added to popup wrapper and background
        // make it unique to apply your CSS animations just to this exact popup
        mainClass: 'mfp-fade',

        // Animationen beim Ein- und Ausblenden sind möglich
        // siehe dazu: http://dimsemenov.com/plugins/magnific-popup/documentation.html#animation

        // damit kann man mit Pfeiltasten von einem Bild zum nächsten klicken
        // wenn man das nicht will: statt true hier false schreiben
        gallery:{
            enabled:true
        }
    });
});

Verwendetes Plugin:

ausführliche Dokumentation dazu: http://dimsemenov.com/plugins/magnific-popup/documentation.html

• die dritte Säule beim Frontend-Entwickeln von Websites
• das umfangreichste Paket bei der Frontend-Entwicklung
• ca. 10% aller Webuser haben Javascript deaktiviert! – Deswegen ist es ganz wichtig, dass Eure Website auch ohne Javascript funktioniert („Graceful Degradation“)

Baut keine „Lift-Lösungen“, die nur benutzbar sind, wenn Javascript zur Verfügung steht!

• Animationen - z.B. beim Scrollen
• Interactive Storytelling - z.B. The Boat
• Portfolio: Leg Work
• Portfolio: Uncanny V alley Studio
• Bildertausch – Wechsel der Bilder in einer Bildergalerie
• Dynamische Darstellung – Bereiche der Website z.B. via Mouse-Click ein-/ausblenden
• Pimp my Browser – Mängel und Fehler eines Browsers (z.B. Internet Explorer) ausgleichen
• Modernizr – Fähigkeiten des Browsers abfragen und entsprechend z.B. das CSS anpassen
• …

Darüber hinaus kann man damit z.B. Roboter steuern u.v.a.m.

vergleichbar mit dem Einbinden von CSS

HTML

<script>
    // hier kommen die Javascript-Anweisungen direkt rein…
    function demo(){
        alert('Hallo Welt!');
    }
</script>

<!-- als externe Datei -->
<script src="js/demo.js"></script>

je nach Situation kann das Einbinden im <head>- oder <body>-Bereich sinnvoll sein…

Javascript

// ich bin ein einzeiliger Kommentar

/*
    und ich bin ein längerer
    Kommentar, der über viele
    Zeilen gehen könnte
*/

Das Buch kostet als eBook $ 11.-

Vorteile

• fangen Unterschiede zwischen verschiedenen Browsern ab;
• verkürzen den zu schreibenden Code;
• rel. einfach zu erlernen

Nachteile

• vergrößern den Footprint der Website – die Seite lädt etwas länger;
• haben (teilweise) eine eigene Syntax, die man zusätzlich zu Javascript erlernen muss;
• sorgen auf mobilen Endgeräten dafür, dass sich die Batterie u.U. schneller entlädt

bekannteste Library

die momentan am weitesten verbreitete und verwendete Javascript-Library ist jQuery. Diese verwende ich auch sehr gerne!

jQuery-Code ganz am Ende des <body> einbinden!

HTML

<body>

    <!-- jQuery-Code ganz am Ende des <body> einbinden! -->

    <!--
    die jeweils aktuelle, minimalisierte Version von jQuery bitte unbedingt einbinden!
    die Wahrscheinlichkeit, dass Eure Besucher dies schon im Cache haben,
    ist sehr gross
    -->
    <script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

    <!-- eigene Scripte -->
    <script src="js/meineScripte.js"></script>

</body>
</html>

Source-Code

In der JS-Datei „jquery-3.2.1.min.js“ steckt eine Menge Code drin…

CSS

/* Span-Element via CSS unsichtbar machen */
.demo h3 span {display:none};

Javascript

/* Span-Element via jQuery unsichtbar machen */
$(function(){
   $('.demo h3 span').hide();
});

Online-Demo

Die Demo dazu – schaut Euch den Source-Code an!

HTML

<p id="Button">Demo ein/ausblenden</p>

<div id="demo">
    <p>Lorem ipsum…</p>
</div>

Javascript

/* 
    sobald man auf "p#Button" klickt,
    wird das "div#demo" ein- und ausgeblendet
    und zwar innerhalb von 1000 Milisekunden
*/
$(function(){
   $('#Button').click(function(){
      $('div#demo').toggle(1000);
   });
});

HTML

<!-- HTML-Ausschnitt -->
<h2>Daten und Fakten</h2>
<div class="mehrInfo">
    <p>Venedig resp. venezianisch Venexia…</p>
</div>

Javascript

$(function(){
  //alle "div.mehrInfo"-Blöcke unsichtbarmachen
  $('div.mehrInfo').hide();

  //beim Klicken auf die "h2" geschieht dann folgendes
  $('h2').click(function(){
    //der "div.mehrInfo"-block, der sich direkt nach der
    //angeklickten "h2" befindet, wird sichtbar gemacht
    $(this).next('div.mehrInfo').slideDown('slow');
  });
});

Online-Demo

Hier die Demo dazu – und das komplette Paket zum Download und Anpassen …

Schaut Euch die Demo an oder ladet Euch diese gezippt runter!

mit JQuery kann man einfach einem Element eine Klasse hinzufügen und wieder entfernen – Animationen usw. kann dann CSS erledigen – genau so wie bei :hover

HTML

<nav>
    <img src="burger.svg">
    <ul>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Über mich</a></li>
        <li><a href="#">Kontakt</a></li>
        <li><a href="#">Impressum</a></li>
    </ul>
</nav>

CSS

nav {
    width: 10em;
    position: absolute;
    right: 10px;
    top: 6px;
}

nav img {
    width: 40px;
    position: absolute;
    right: 5px;
    top: 0.4em;
    cursor: pointer;
}

nav ul {
    list-style-type: none;
    background-color: red;
    font-weight: bold;
    width: 100%;
    position: absolute;
    left: 9;
    /*
    Menü nach oben,
    aus dem sichtbaren Bereich verschieben
    */
    top: -300px;

    /*
    Transition definieren
    hier spezielle Animation -- siehe:
    https://matthewlein.com/tools/ceaser
    */
    transition: all 0.5s cubic-bezier(0.680, -2.550, 0.265, 3.850);

}

/* die Klasse "sichtbar" wird via Javascript ein- und ausgeschaltet */
nav ul.sichtbar {
    /* sichtbare Position des Menues */
    top: 50px;
}

Javascript

$(function(){
  // wenn man auf den Burger klickt
  // wird bei der ul entweder die Klasse "sichtbar"
  // hinzugefügt oder entfernt
  // den Rest übernimmt CSS
    $('nav img').click(function(){
       $('nav ul').toggleClass('sichtbar');
    });
});

Auf langen HTML-Seiten macht es Sinn, Zwischenüberschriften einzufügen und diese mit einer ID (#Name) zu versehen. Dann kann man ein Menü erstellen und zu den Überschriften linken:

HTML

<!-- der Link -->
<a href="#k-2">Kapitel 2</a>

<!-- der Anchor mit ID als Ziel -->
<h4 id="k-2">Kapitel 2</h4>

<!-- Ziel beim Scrollen ganz nach oben  -->
<body id="top">

<!-- Link im Footer zum Hochscrollen -->
<footer>
    <a href="#top">nach oben ↑</a>
</footer>

Schaut Euch dazu die Demo an!

Sanftes Scrollen dank Javascript

Mittels Javascript kann man eine Funktion einbauen, die automatisch alle Links, die als Ziel ein „#…“ haben, sanft anscrollt:

Javascript

<script src="//code.jquery.com/jquery-3.2.1.min.js"></script>

<script>
// http://stackoverflow.com/questions/16475198/jquery-scrolltop-animation
// nur die Links, die mit "#" anfangen, werden beachtet
// auch hier könnt Ihr einfach den Code bei Euren Sachen verwenden
// Ihr braucht daran nichts ändern!
$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 500); // 500 (0.5sek) legt Geschwindkeit fest
    }

});

</script>

Schaut Euch dazu die Demo an – oder ladet Euch die Datei herunter!

Online-Demo

Hier die Demo dazu und das ganze Paket zum Download

HTML

<head>
    <!-- das Flexslider-CSS -->
    <link rel="stylesheet" href="c/flexslider.css">

    <!-- eigenes CSS -->
    <link rel="stylesheet" href="c/style.css">
</head>

<body>
    <!--
        ACHTUNG: Die Namen "flexslider" und "slides" müssen so bleiben
        sonst funktioniert das Plugin nicht!
    -->
    <div class="flexslider">
        <ul class="slides">
            <li>
                <figure>
                    <img src="p/Blue-flower.jpg" alt="Blue-flower">
                    <figcaption>Bilddetails</figcaption>
                </figure>
            </li>

            <!-- weitere Listen-Elemente -->
        </ul>
    </div>

    <!-- jQuery, hier ältere Version, sonst geht der Flexslider nicht! -->
    <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>

    <!-- FlexSlider Plugin -->
    <script defer src="js/jquery.flexslider-min.js"></script>

    <!-- hier die Angaben zur Slideshow-Animation -->
    <script type="text/javascript">
        $(window).load(function() {
            $('.flexslider').flexslider({
                animation: "slide",
                // Schleife läuft endlos
                animationLoop: true,
                // Befindet sich der Cursor über den Bilder, hält die Animation an
                pauseOnHover: true,
                // das jeweilige Bild bleibt 3 sek (3000 Mili-Sekunden) stehen
                slideshowSpeed: 3000
            });
        });
    </script>

</body>
</html>

Das Javascript-Plugin sorgt dafür, dass auch Bilder mit verschiedenen Höhen- und Breiten-Verhältnissen schön neben- und untereinander dargestellt werden!

Demo

Hier die Demo dazu

Download

Das ganze Demo-Paket zum Download

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Masonry Plugin</title>
    <link rel="stylesheet" href="c/style.css">
</head>

<body>

    <div class="grid">

        <!-- ein Element MUSS die Klasse "grid-sizer" haben! -->
        <img class="grid-sizer" src="p/1-gardasee.jpg" alt="">

        <img class="grid-item" src="p/3a-gardasee.jpg" alt="">
        <img class="grid-item" src="p/1b-gardasee.jpg" alt="">
        <img class="grid-item" src="p/1c-gardasee.jpg" alt="">
        <img class="grid-item" src="p/2-gardasee.jpg" alt="">

        <!-- usw. -->

    </div><!--/grid-->

    </main>

    <!-- jQuery -->
    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script>

    <!-- Masonry Plugin -->
    <script src="js/masonry.pkgd.min.js"></script>

    <script src="js/script.js"></script>

</body>

CSS

img {
    width:100%;
    height: auto;
}

.grid {
    max-width: 1600px;
}

.grid-sizer,
.grid-item {
    width: 20%;
    height: auto;
    float: left;
    /* aktiviert nächste Zeile, wenn Ihr Abstand zwischen den Elementen wollt! */
    /* margin: 0 1% 1% 0; */
}

Javascript

$(document).ready( function() {
    $('.grid').masonry({
        itemSelector: '.grid-item',
        columnWidth: '.grid-sizer',
        percentPosition: true
    });
});

HTML

<ul>
    <li><a href="01_tim-berners-lee/index.html">Tim Berners-Lee</a></li>
    <li><a href="02_continentenSpiel/index.html">Continentenspiel</a></li>
    <li><a href="03_rezept/index.html">Rezept</a></li>
    <li><a href="04_fotografie/index.html">Fotografie</a></li>
    <li><a href="05_dreispaltig/index.html">Dreispaltig</a></li>
    <li><a href="06_venedig-fotos/index.html">Venedig Fotos</a></li>
    <li><a href="06a_venedig-fotos-responsive/index.html">Venedig Fotos, responsive</a></li>
    <li><a href="07_web_typografie/index.html">Web Typografie</a></li>
    <li><a href="08_garda-popup/index.html">Garda Popup</a></li>

    <!-- Link zum eigenen Portfolio -->
    <li><a href="../index.html">eigenes Portfolio</a></li>
</ul>

Verwendet den oben genannten Code auf Eurer Startseite der Übungen, von der aus ich Eure Übungen direkt anschauen kann! Ihr könnt gerne diese Startseite ebenfalls via CSS gestalten…

Alle Übungen

1. Tim Berners-Lee
2. Continentenspiel
3. Rezept
4. Fotografie
5. Dreispaltig
6. Venedig-Fotos
7. Venedig-Foto, responsive
8. Web Typografie
9. Garda Popup

Eigenes Portfolio

• Das Portfolio soll auf Smartphone und Desktop-PC funktionieren
• Das Portfolio muss sowohl Abbildungen Eurer Arbeiten als auch erklärende Texte enthalten
• Das Portfolio soll entweder aus mehreren HTML-Seiten bestehen oder aus einer langen HTML-Seite, zu deren Anker-Punkten man via Mouse-Click springen kann

Schaut Euch dazu die Anmerkungen und Code-Beispiele bei meinem Slide „Lightbox-Bilder“ an!

Briefing

1. Ladet Euch das Übungspaket herunter
2. Der HTML- und Javascript-Code ist fertig – Ihr müsst aber den CSS-Code noch erstellen
3. Schaut Euch die Vorlagen garda-popup-1.jpg und garda-popup-2.jpg an
4. Erstellt für die Hover-Funktion eine Animation, bei der die Figcaption diesmal von links animiert auf das Bild geschoben wird
5. Klickt man auf ein Bild, wird in einer „Lightbox“ das große Bild darüber dargestellt – siehe garda-popup-2.jpg

… und erholsame Feiertage!