• Nachschlagewerke
• Responsive Images (incl. Generator)
• Transitions
• Figure mit Figcaption erst sichtbar bei Hover
• Lightbox Pop-Up
• Scroll Snap
• Grundlagen Javascript
• CSS-Klasse via Javascript ein-/ausschalten
• Javascript-Library jQuery
• Ein- und Ausblenden via jQuery
• Sanftes Scrollen via jQuery
• jQuery Slideshow FlexSlider
• jQuery Masonry
• Hausaufgabe/Übung
• am Semesterende abzugeben

Seit 15 Jahren freue ich mich jeden Advent auf diesen Kalender – und hole mir dort jedesmal viele Inspirationen und Tricks…

Bitte schaut Euch auch mal dort um!

• MDN Webdocs (Mozilla Firefox)
• web.dev (Google Development)
• SelfHTML (deutschsprachig…)

Ihr könnt das Buch kostenlos online lesen – auch dort ist es sehr schön gestaltet!

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

Probiert es doch mal aus!

Ich habe das Tool beim Beispiel „Scroll Snap“ eingesetzt – ein paar Slides weiter…

Responsive Image Generator Settings

hier meine Settings für die Bilder des Beispiels „Scroll Snap“

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);
  }
}

Schaut Euch die Demo an – oder ladet das Paket herunter…

Einen detaillierten Artikel dazu findet Ihr bei 24ways.org

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

Schaut Euch die Demo an – oder ladet das Paket komplett herunter

Online-Tutorial

Es gibt dazu einen detaillierten Artikel bei 24ways.org! Dort werden noch weitere Möglichkeiten erklärt.

CSS

section {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}

article {
  position: relative;
  height: 100vh;
  scroll-snap-align: center;
}

article img {
  height: 100vh;
  /* ähnlich wie bei Hintergrundbildern -- die Fläche wird gefüllt */
  object-fit: cover;
}

Dass die Texte animiert eingeblendet werden, ist wieder eine Kombination aus Javascript und CSS. Die Javascript-Anweisungen schalten auch hier die Klassen um, wenn ein neues Bild in das Browser-Fenster gescrollt wird!

Variante mit „Responsive Images“

der Browser lädt nur die Bilder herunter, die für die jeweilige Browser-Breite passen – siehe Screenshot!

Demo mit responsiven Bildern (ändert mal bei geöffneten Network-Inspector die Browser-Breite) – und das Paket zum Herunterladen

HTML

<img
    sizes="(max-width: 1600px) 100vw, 1600px"
    srcset="
        p_responsive/IMG_20190929_131844_vbppo2_c_scale,w_320.jpg   320w,
        p_responsive/IMG_20190929_131844_vbppo2_c_scale,w_617.jpg   617w,
        p_responsive/IMG_20190929_131844_vbppo2_c_scale,w_823.jpg   823w,
        p_responsive/IMG_20190929_131844_vbppo2_c_scale,w_1004.jpg 1004w,
        p_responsive/IMG_20190929_131844_vbppo2_c_scale,w_1161.jpg 1161w,
        p_responsive/IMG_20190929_131844_vbppo2_c_scale,w_1600.jpg 1600w
    "
    src="p_responsive/IMG_20190929_131844_vbppo2_c_scale,w_1600.jpg"
    alt=""
/>

Nutzt dazu den Responsive Breakpoint Image Generator – das Tool erstellt Euch sogar den HTML-Code für „srcset“ – Ihr müsst dann nur noch die relativen Pfade für alle Bilder korrigieen!

• die dritte Säule beim Frontend-Entwickeln von Websites
• das umfangreichste Paket bei der Frontend-Entwicklung

Javascript ist aktuell eine der beliebtesten Programmiersprachen. Es läuft u.a. auch auf Servern – und man kann damit auch Roboter programmieren

Wenn Ihr eine Programmiersprache lernen möchtet, ist Javascript bestimmt eine sehr gute Wahl!

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

Schaut Euch die Demo an – oder ladet das gesamte Paket herunter

CodePen

See the Pen CSS-Klasse-via-Javascript-umschalten by Matthias Edler-Golla (@megolla) on CodePen.

HTML

<div id="wichtig">
    <h2>Überschrift</h2>
    <p>Lorem ipsum dolor…</p>
</div>
…
<footer>
    <button id="meinKnopf">Klasse ändern</button>
</footer>

CSS

#wichtig {
    margin: 1.5em 0;
    transition: all 0.3s ease-in-out;
}
…
.betont {
    font-size: 150%;
    padding: 1rem;
    border-radius: 10px;
    background-color: #ffea9a;
    transform: rotate(720deg);
}

die Klasse ".betont“ ist nicht im HTML-Code enthalten! Sie wird via Javascript bei "div#wichtig" hinzugefügt und wieder entfernt – also "getoggelt"

Javascript

function klassenToggle(element, klasse) {
  const ele = document.querySelector(element);
  ele.classList.toggle(klasse);
}

function klickKlasseEinAus(ausloeser, element, klasse) {
  document.querySelector(ausloeser).addEventListener("click", function() {
    klassenToggle(element, klasse);
  });
}

// Ihr müsst nur die untere Zeile (Zeile 14) anpassen und oben aufgeführten Code 1:1 übernehmen!
// Aufruf: klickKlasseEinAus(auslösendesElement, betroffenesElement, KlassenName);
klickKlasseEinAus("#meinKnopf", "#wichtig", "betont");

Schaut Euch die Demo an – oder ladet das Paket herunter!

HTML

<header>
    <h1>Tag-/Nachtmodus</h1>
    <!-- Klicken auf den Button löst das Umschalten aus -->
    <button id="nachtansicht">Nachtansicht an/aus</button>
</header>

CSS

html {
    […]
    color: #444;
    background-color: #fff;
    transition: all 0.3s ease-in-out;
}

[…]

/* die Klasse "nacht" wird via Javascipt eingefügt! */
html.nacht {
  background-color: #000;
  color: rgba(255, 255, 255, 0.3);
}

[…]

html.nacht main {
  font-size: 150%;
}

Javascript

[…]
// Klicken auf den "button#nachtansicht" fügt dem "html"-Tag
// die Klasse "nacht" hinzu oder entfernt diese
klickKlasseEinAus("#nachtansicht", "html", "nacht");

Schaut Euch die Demo an – oder ladet das gesamte Paket herunter

Bei diesem Beispiel bekommt das <nav>-Elemente via Javascript eine Klasse „getoggelt“ – das animierte Sichtbar-/Unsichtbarmachen erledigt wieder CSS…

HTML

<nav>
    <img id="burger" src="burger.svg" />
    <ul>
        <li><a href="portfolio.html">Portfolio</a></li>
        <li><a href="ueber_mich.html">Über mich</a></li>
        <li><a href="kontakt.html">Kontakt</a></li>
        <li><a href="impressum.html">Impressum</a></li>
    </ul>
</nav>

Das <nav>-Elemente bekommt via Javascript die Klasse „angeklickt“ zugewiesen

CSS

nav ul {
    …
    position: absolute;
    left: 9;

    /* Menü nach oben, aus dem sichtbaren Bereich verschieben */
    top: -300px;

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

/* die Klasse "angeklickt" wird via Javascript angefügt bzw. gelöscht */
nav.angeklickt ul {
    /* sichtbare Position des Menues */
    top: 50px;
}

Javascript

[…]
// Durch Klicken auf das "img#burger" wird dem "nav"-Element
// die Klasse "angeklickt" hinzugefügt bzw. entfernt
klickKlasseEinAus("#burger", "nav", "angeklickt");

Schaut Euch die Demo an – oder ladet das gesamte Paket herunter

HTML

<ul>
    <li id="Tegernsee">
        <a href="http://24ways.org/"><img src="./p/IMG_20191124_121636.jpg" alt=""/></a>
        Tegernsee
    </li>
    <li id="Katzenfernsehen">
        <a href="http://24ways.org/"><img src="./p/IMG_20191113_200120.jpg" alt=""/></a>
        Katzenfernsehen
    </li>
    <li id="Assistenten">
        <a href="http://24ways.org/"><img src="./p/IMG_20191118_182009.jpg" alt=""/></a>
        Unsere Assistenten
    </li>
    <li id="Brompton">
        <a href="http://24ways.org/"><img src="./p/IMG_20191124_121620.jpg" alt=""/></a>
        The Brompton
    </li>
</ul>

CSS

li img {
  width: 70%;

  /* alle Bilder werden an der gleichen Stelle positioniert */
  position: absolute;
  left: 0;

  /* 
  nächste zwei Zeilen verschieben die Bilder aus dem sichtbaren Bereich
  und drehen sie um 145 Grad
  */
  top: -150vh;
  transform: rotate(-145deg);
  transition: all 0.1s ease-in-out;
}

/* Die Klasse "aktiv" wird wieder via Javascript vergeben/entfernt */
.aktiv {
  border-bottom: 2px solid;
  background-color: rgba(0, 0, 0, 0.1);
}

/*
Das Bild in dem <li>-Element mit der Klasse "aktiv" wird animiert sichtbar/unsichtbar gemacht
*/
.aktiv img {
  box-shadow: 0 0 14px 4px rgba(0, 0, 0, 0.3);
  top: 0;
  transform: rotate(0deg);
  transition: all 0.8s ease-in-out;
}

Javascript

function klickKlasseEin(ausloeser, klasse) {
  document.querySelector(ausloeser).addEventListener("click", function() {
    // bei dem Listen-Elemente, das aktuell die Klasse "aktiv" hat
    // wird diese in einem ersten Schritt entfernt
    document.querySelector(`li.${klasse}`).classList.remove("aktiv");
    // in einem 2. Schritt bekommt das Listen-Element, das man angeklickt hat
    // die Klasse "aktiv" – den Rest erledigt CSS
    document.querySelector(ausloeser).classList.add("aktiv");
  });
}

// das Tegernsee-Bild wird gleich beim Start der Seite sichtbar
// ohne diese Zeile würde das Browserfenster erst mal leer bleiben
document.querySelector("#Tegernsee").classList.add("aktiv");

// hier angeben, bei welchen Elementen die Bilder gezeigt werden sollen
// klickt man auf "li#Tegernsee", bekommt dieses li die Klasse "aktiv"
// dadurch wird via CSS das dazugehörige Bild sichtbar gemacht
klickKlasseEin("#Tegernsee", "aktiv");
klickKlasseEin("#Katzenfernsehen", "aktiv");
klickKlasseEin("#Assistenten", "aktiv");
klickKlasseEin("#Brompton", "aktiv");

Schaut Euch die Demo an – oder ladet das Paket herunter!

HTML

…
<article id="first">
    <!-- div.frage ist zuerst sichtbar -->
    <div class="frage">
        <h1>Klima-Quiz 1</h1>
        <p>Wie viel <strong>C0<sub>2</sub></strong>…</p>
    </div>

    <!-- div.antwort wird via CSS auf die "Rückseite" der Karte plaziert -->
    <div class="antwort">
        <h1>Antwort</h1>
        <p>Aktuell befinden sich <strong>410.71 ppm C0<sub>2</sub></strong>…</p>
    </div>
</article>
…

CSS

…
article {
  display: block;
  width: 100%;
  height: 80vh;
  position: relative;
  /* Abstand hat Auswirkungen auf die Perspektive -- probiert es aus! */
  perspective: 1600px;
}

article .frage,
article .antwort {
  …
  /* muss drinnen bleiben! */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: transform 1s ease-in-out;
}

article .antwort {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: rotateY(180deg);
}

/* 
hat der jeweilige Article via Javascript die Klasse "aktiv" bekommen,
werden die Divs – die ja via CSS "Rücken an Rücken" plaziert sind – 
jeweils um 180 Grad gedreht
*/
article.aktiv .frage {
  transform: rotateY(180deg);
}
article.aktiv .antwort {
  transform: rotateY(360deg);
}
…

JS

…
// hier fehlen die eigentlichen Scripte – schaut bei dem Download-Paket!
…
// klickt man auf einen der Artikel, toggelt dieser die Klasse "aktiv"
klickKlasseEinAus("#first", "#first", "aktiv");
klickKlasseEinAus("#second", "#second", "aktiv");

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 …

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 erste Demo (noch ohne sanftem Scrollen) 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 zweite Demo (mit sanftem Scrollen) 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_symbol_kreuz/index.html">Symbol-Kreuz</a></li>
    <li><a href="07_venedig-fotos/index.html">Venedig Fotos</a></li>
    <li><a href="08_venedig-fotos-responsive/index.html">Venedig Fotos, responsive</a></li>
    <li><a href="09_web_typografie/index.html">Web Typografie</a></li>
    <li><a href="10_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. Symbol-Kreuz
7. Venedig-Fotos
8. Venedig-Foto, responsive
9. Web Typografie
10. 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!