Bitte nehmt Euch ein paar Minuten Zeit und füllt den Fragebogen aus!

• Nachschlagewerke
• CSS Verläufe
• Multicolumn Bilder
• Responsive Images (incl. Generator)
• CSS Transitions
• CSS Animations
• Waagrechte Scrollstreifen
• Smooth Scrolling
• Scroll-Snap
• Grundlagen Javascript
• CSS-Klasse via Javascript ein-/ausschalten
• Nachtmodus via Javascript
• Header schrumpft bei Scrolling
• Menü animiert ein- und ausblenden
• Figcaption erst sichtbar bei Click
• Aufspringendes Großbild
• Selbstlaufende Bildershow
• Waagrechte Scrollstreifen (Javascript-Unterstützung)
• Akkordeon-Darstellung
• Hausaufgabe/Übung
• am Semesterende abzugeben

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

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

Es können lineare, kreisförmige und auch konische Verläufe dargestellt werden.

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter

HTML

<div class="demo linear_1"></div>

CSS

.linear_1 {
  background-image: linear-gradient(orange, red);
}

.linear_3 {
  background-image: linear-gradient(45deg, red 30%, orange);
}

.radial_1 {
  background-image: radial-gradient(orange, red);
}

.radial_1b {
  background-image: radial-gradient(circle at bottom left, orange 60%, red);
}

.conic_1 {
  background-image: conic-gradient(hsl(0, 100%, 50%), hsl(0, 100%, 40%));
}

Online-Tutorial

Bei CSS-Tricks gibt es ausführliche Erklärungen dazu

Auch Texte können seit kurzem mit Verläufen versehen werden!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<h2>Hat der Gestalter nichts drauf, nimmt er nen Verlauf!</h2>

CSS

h2 {
    font-size: clamp(2rem, 10vw, 12rem);
    text-align: center;
    font-family: Impact, Verdana, sans-serif;
    text-transform: uppercase;

    /* Anweisungen für den Text-Verlauf */
    background: linear-gradient(to right, red, yellow);
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

Online-Tutorial

Bei codyhouse.co gibt es mir Informationen dazu

Online-Demo

Schaut Euch die Demo an, ich habe dort auch die Möglichkeit eingebaut, zwischen verschiedenen Layout-Methoden (Grid, Flexbox, Multi-Column) umzuschalten. Ihr könnt Euch zum Experimentieren die Zip-Datei herunterladen!

HTML

<main class="multiColumn">
    <img src="p/1-gardasee.jpg" alt="Gardasee" />
    <img src="p/3a-gardasee.jpg" alt="Gardasee" />
    <img src="p/1b-gardasee.jpg" alt="Gardasee" />
    <img src="p/1c-gardasee.jpg" alt="Gardasee" />
    <img src="p/2-gardasee.jpg" alt="Gardasee" />
    […]
</main>

CSS

.multiColumn {
    column-width: 16em;
    column-gap: 5px;
}

Schaut Euch dazu auch noch die Slides bzgl. Multicolumn-Text bei den letzten Scripten an!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<img
    src="p/group_portrait_900.jpg"
    alt="Group Portrait"
    srcset="
        p/group_portrait_1200.jpg 1200w, <-- wird ab 1200px Browserbreite verwendet
        p/group_portrait_900.jpg   900w, <-- wird ab 900px Browserbreite verwendet
        p/group_portrait_640.jpg   640w, <-- wird ab 640px Browserbreite verwendet
        p/group_portrait_320.jpg   320w <-- wird ab 320px Browserbreite verwendet
    "
    sizes="100vw"
/>

Der Browser ist so „klug“, abzufragen, wie breit das Browserfenster gerade ist und lädt das entsprechende Bild. sizes="100vw" bedeutet, dass dies für die Bilder gilt, die die volle Breite des Browserfenster nutzen – bei Bilder, die nur die Hälfte benötigen, würde hier sizes="50vw" stehen!

Inspector/Network

Hier könnt Ihr sehen, dass nur das für die jeweils benötigte Browser-Fenster-Breite Bild geladen wird!

Probiert es doch mal aus!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

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

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

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

Detailliertes Tutorial

An Interactive Guide to CSS Transitions – schaut es Euch mal an!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<p id="button"><a href="https://kaufnix.net/">Kauf mich!</a></p>

CSS

#button {
    […]

    /* ===== CSS Animationen relevantes ===== */

    /* 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.4);
        box-shadow: 0 0 15px 5px rgba(0, 0, 0, 0.3);
    }
}

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<main>
    <p>
        <span id="Zeile_1">2021: Happy New Year!</span>
        <span id="Zeile_2">Hopefully it will be better!</span>
        <span id="Zeile_3">It's too late to be a pessimist…</span>
    </p>
</main>

Beachtet, dass die Animation zeile_1_Ani zweimal verwendet wird – diese aber unterschiedlich lang abläuft!

CSS

#Zeile_1 {
  display: block;
  animation-duration: 4s;
  animation-name: zeile_1_Ani;
  animation-iteration-count: infinite;
}

#Zeile_2 {
  display: block;
  color: red;
  animation-duration: 8s;
  animation-name: zeile_2_Ani;
  animation-iteration-count: infinite;
}

#Zeile_3 {
  display: block;
  animation-duration: 6s;
  animation-name: zeile_1_Ani;
  animation-iteration-count: infinite;
}

@keyframes zeile_1_Ani {
  0% {
    transform: translateX(100vw);
  }
  40% {
    transform: translateX(0);
  }
  80% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100vw);
  }
}

@keyframes zeile_2_Ani {
  0% {
    transform: translateX(-100vw);
  }
  40% {
    transform: translateX(-100vw);
  }
  80% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(100vw);
  }
}

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<section class="scrollaussen">
    <div class="scrollstreifen">
        <img src="https://picsum.photos/600/300?random=1" alt="Besipielbild">
        <img src="https://picsum.photos/400/300?random=2" alt="Besipielbild">
        <img src="https://picsum.photos/300/300?random=3" alt="Besipielbild">
        <img src="https://picsum.photos/600/300?random=4" alt="Besipielbild">
        […]
    </div>
</section>

CSS

/* das Elternelement des "scrollstreifen" */
.scrollaussen {
    margin-bottom: 3em;
    width: 100%;

    /* nur damit Ihr die Grenze besser seht! */
    border: 10px solid black;

    /* nächste Zeile fügt automatisch
    Scrollbalken hinzu, wenn diese benötigt werden */
    overflow: auto;
}

/* enthält die Bilder, ist breiter als der zur Verfügung stehende Platz */
.scrollstreifen {
    display: flex;
    gap: 3px;
}

/* damit behalten die Bilder ihre Original-Breite */
.scrollstreifen img {
    width: auto;
}

Unterstützung via Javascript

Die Bedienung kann noch via Javascript-Buttons für die Leute verbessert werden, die nicht via Mouse/Trackpad waagrecht scrollen können. Ein entsprechendes Beispiel findet Ihr gegen Ende dieses Scriptes!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Dazu braucht man nur folgende Anweisung im CSS einbauen:

CSS

html {
  scroll-behavior: smooth;
}

HTML

<header>
    <h1><a href="#main">Smooth Scrolling</a></h1>
    <nav>
        <ul>
            <!-- Anchor-Links innerhalb des Dokumentes -->
            <li><a href="#headline_1">Top 1</a></li>
            <li><a href="#headline_2">Top 2</a></li>
        </ul>
    </nav>
</header>

<main id="main">
    <!-- hier ein "Ziel" (Anchor) der bei <nav> angelegten Anchor-Links -->
    <article>
        <h2 id="headline_1">Überschrift 1</h2>
    […]
    …

das die Links im Header rot werden, ist mit Javascript erstellt…

Das könnte z.B. für Präsentationen und andere Slides praktisch sein…

Online-Demos

1. senkrecht scrollende Slideshow-Demo, Download
2. waagrecht scrollende Slideshow-Demo, Download
3. Bildershow-Demo, Download

Online-Tutorial

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

HTML

<section class="container">

    <article>
        <h2>Happinger See</h2>
        <img src="p/IMG_20221016_170032.jpg" alt="Landschaftsfoto">
    </article>

    <article>
        <h2>Floriansee</h2>
        <img src="p/IMG_20221016_174721.jpg" alt="Landschaftsfoto">
    </article>

    […]

</section>

CSS

.container {
    height: 100vh;

    /* das 1. Entscheidende für scroll-snap */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
}

article {
    height: 100vh;

    /* das 2. Entscheidende für scroll-snap */
    scroll-snap-align: center;
}

Dass die Texte bei der Bildershow-Demo 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! Mehr dazu bei der Intersection Observer API

Sobald man auf die Vorschaubilder am unteren Rand klickt, scrollt der Browser an den gewünschten Anker-Punkt (hier z.B. #a_6).

Online-Demo

1. Schaut Euch die Bildershow-Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!
2. … und ein waagrechter Slider mit Unicode-Zeichen, auch zum Herunterladen

HTML

<!-- wird via CSS am unteren Rand des Browsers positioniert -->
<header>
    <nav>
        <ul>
            <li><a href="#a_1"><img src="p/IMG_20221016_170032.jpg" alt="Vorshaubild"></a></li>
            <li><a href="#a_2"><img src="p/IMG_20221016_174721.jpg" alt="Vorshaubild"></a></li>
            […]
        </ul>
    </nav>
</header>

<!-- die große Darstellung der Bilder -->
<section class="container">
    <article id="a_1">
        <h2>Happinger See</h2>
        <img src="p/IMG_20221016_170032.jpg" alt="Landschaftsfoto">
    </article>
    <article id="a_2">
        <h2>Floriansee</h2>
        <img src="p/IMG_20221016_174721.jpg" alt="Landschaftsfoto">
    </article>
    […]
</section>

CSS

/* ================================== navi-buttons/Vorschaubilder ================================== */

header nav ul {
    width: 80%;
    position: absolute;
    right: 20px;
    bottom: 10px;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    list-style-type: none;
    gap: 8px;
}

[…]

/* ================================ scroll-snap relevantes ================================ */

.container {
    height: 100vh;

    /* das 1. Entscheidende für scroll-snap */
    overflow-y: scroll;
    scroll-snap-type: y mandatory;

    /* entscheidend, damit Übergang beim Klicken der Vorschaubilder animiert wird! */
    scroll-behavior: smooth;
}

article {
    height: 100vh;

    /* das 2. Entscheidende für scroll-snap */
    scroll-snap-align: center;
}

Weiterführendes

CSS-Tricks: CSS-Only Carousel

Javascript ist

• 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!

LinkedIn Learning

… auch dort gibt es einige Javascipt-Kurse!

… bei youtube findet Ihr bestimmt auch viele, gute Tutorials …

• South China Sea
• The Boat
• Firestorm: The story of the bushfire at Dunalley
• Permafrost in Sibirien
• This Is Inequity at the Boiling Point
• Killer heat: how a warming land is changing Australia forever

vergleichbar mit dem Einbinden von CSS

HTML

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

<!-- als externe Datei (meist die bessere Lösung! -->
<script src="js/demo.js"></script>

je nach Situation kann das Einbinden im <head>- oder <body>-Bereich sinnvoll sein. Bei den hier gezeigten Beispielen ist Javascript jeweils am Ende des <body>-Bereichs eingebunden:

HTML

[…]
    <script src="js/script.js"></script>
  </body>
</html>

HTML

    <body>
        […]
        <!-- dieses Element soll via Javascript angesprochen werden -->
        <div id="demo">
            <h2>Überschrift</h2>
            <p>Lorem ipsum dolor…</p>
        </div>
        […]
        <footer>
            <!-- dieses Element soll ebenfalls via Javascript angesprochen werden -->
            <button id="meinKnopf">Klasse ändern</button>
        </footer>
        <script src="js/script.js"></script>
    </body>
</html>

Javascript

// das DIV mit der ID "demo"
const demo = document.querySelector('#demo');

// der auslösende Button
const meinKnopf = document.querySelector('#meinKnopf');

Damit sind die beiden Elemente jetzt Javascript „bekannt“ und können verwendet werden…

Mit dem einfachen Ein- und Ausschalten von Klassen kommt Ihr schon sehr weit – schaut Euch dazu auch die weiteren Beispiele an!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

        […]
        <div id="demo">
            <h2>Überschrift</h2>
            <p>Lorem ipsum dolor…</p>
        </div>
        […]
        <footer>
            <button id="meinKnopf">Klasse ändern</button>
        </footer>
        <script src="js/script.js"></script>
    </body>
</html>

CSS

#demo {
    margin: 1.5em 0;
    transition: all 0.3s ease-in-out;
}

/*
diese Klasse ist nicht im HTML-Code enthalten!
sie wird via Javascript bei "div#demo" hinzugefügt und wieder entfernt
– also "getoggelt"
*/
.betont {
    font-size: 150%;
    padding: 1rem;
    border-radius: 10px;
    background-color: #ffea9a;
    /* nächste Zeile lässt das div.betont zweimal um die eigene Achse rotieren */
    transform: rotate(720deg);
}

Javascript

// das DIV mit der ID "demo"
const demo = document.querySelector("#demo");

// der auslösende Button
const meinKnopf = document.querySelector("#meinKnopf");

// "toggle" bedeutet, dass wie bei einem Lichtschalter
// die Klasse "betont" entweder hinzugefügt oder entfernt wird
meinKnopf.addEventListener("click", function() {
    demo.classList.toggle("betont");
});

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

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;

    /* damit werden die Übergänge zwischen Tag- und Nachtansicht animiert gezeigt! */
    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

// der Button mit der ID "nachtansicht"
const nachtansichtButton = document.querySelector("#nachtansicht");

// das gesamte HTML-Dokument
const html = document.querySelector("html");

nachtansichtButton.addEventListener("click", function() {
      // HTML bekommt die Klasse "nacht" oder sie wird wieder genommen
      html.classList.toggle("nacht");
});

Auch hier wird nur via Javascript die Scrollposition abgefragt und dem Header die Klasse gescrollt hinzugefügt – den Rest übernimmt wieder CSS!

Beachtet auch hier die Anweisungen transition: all .3s: Diese sorgen dafür, dass das Schrumpfen und Wachsen des Headers animiert geschieht!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<header>
    <hgroup>
        <img src="assets/p/svg_test.svg" alt="Demo-Logo">
        <h1>DesignCamp</h1>
    </hgroup>
    <nav>
        <ul>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Über uns</a></li>
            <li><a href="#">Kontakt</a></li>
        </ul>
    </nav>
</header>

CSS

/* ================================ header ================================ */

[…]

header hgroup {
    display: flex;
    gap: 7px;
    align-items: baseline;
}

header img {
    width: 60px;
    transition: all .3s;
}

header h1 {
    text-transform: uppercase;
    font-size: 500%;
    line-height: 1;
    transition: all .3s;
}

[…]

/* ================================ header reduziert ================================ */

/* wenn der User etwas runtergescrollt hat 
die Klasse "gescrollt" wird via Javascript gesetzt */

header.gescrollt hgroup {
    gap: 4px;
}

/* das Logo wird kleiner dargestellt */
header.gescrollt img {
    width: 19px;
}

/* h1 ebenfalls deutlich kleiner */
header.gescrollt h1 {
    font-size: 150%;
}

Javascript

// dieses Element soll verändert werden
// wenn man scrollt
const header = document.querySelector('header');

// wenn mehr als 20px heruntergescrollt wurde
// wird dem header die Klasse "gescrollt" gegeben
// den Rest erledigt wieder CSS
function menueHoeheAendern() {
    if (window.scrollY > 20) {
        header.classList.add('gescrollt');
    } else {
        // ganz nach oben gescrollt wird die Klasse "gescrollt"
        // wieder entfernt
        header.classList.remove('gescrollt');
    }
}

// beobachtet, ob im Browser gescrollt wird
window.addEventListener('scroll', function () {
    menueHoeheAendern();
});

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<header>
    […]

    <button id="naviButton"><img src="burger.svg" /></button>

    <nav>
        <ul>
            <li><a href="portfolio.html">Portfolio</a></li>
            <li><a href="ueber_mich.html">Über mich</a></li>
            […]
        </ul>
    </nav>
</header>

CSS

/*
button nicht zu klein machen,
damit man diesen mit dem Finger gut "anklicken" kann!
*/
#naviButton {
    background: none;
    border: none;
    width: 44px;
    height: 44px;
    position: absolute;
    right: 0;
    top: 0.3rem;
}

/* das eigentliche Symbol kann dann kleiner sein! */
#naviButton img {
    width: 24px;
    transition: all 0.3s;
}

/* Klasse "gedreht" wird via Javascript gesetzt */
#naviButton.gedreht img {
    transform: rotate(-90deg);
}

/* ================= nav ================= */

nav {
    width: 10em;
    position: absolute;
    right: 13px;
    /* damit aus dem sichtbaren Bereich hinausgeschoben */
    top: -250px;
    /* Transition definieren */
    transition: all 0.3s ease-in-out;
}

/*
erst wenn via Javascript "nav" die Klasse "sichtbar"
hinzugefügt wird, wird "nav" in den sichtbaren Bereich hinausgeschoben
*/
nav.sichtbar {
    top: 40px;
}

Javascript

// das nav-Element
const nav = document.querySelector("nav");

// der Button mit der ID "naviButton"
const naviButton = document.querySelector("#naviButton");

/*
Klickt man auf den Button "#naviButton",
wird von "nav" die Klasse "sichtbar" ein- oder ausgeschaltet
damit wird ebenfalls die Transition ausgelöst!
siehe dazu auch bei "style.css" die Anweisungen für "nav"
*/
naviButton.addEventListener("click", function() {
      // das Nav-Menü sichtbar/unsichtbar machen
      nav.classList.toggle("sichtbar");

      // das SVG im Button um 90° drehen
      naviButton.classList.toggle("gedreht");
});

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<html>
    […]
    <body>
        […]
        <div class="galerie">
            <figure>
                <img src="p/klein/1-gardasee.jpg" alt="Gardasee" />

                <!-- das ist zuerst unsichtbar! -->
                <figcaption>
                    <p>Lorem…</p>
                </figcaption>
            </figure>
            […]
        </div>

            […]

        <!-- hier die Verlinkung zur Javascript-Datei -->
        <script src="js/script.js"></script>
    </body>
</html>

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, 0.7);

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

/* die Klasse "angeklickt" wird via Javascript vergeben */
.galerie figure.angeklickt figcaption {
    top: 0;
}

Javascript

// Sammlung ALLER figure-Elemente innerhalb der Galerie
const galerieFigures = document.querySelectorAll(".galerie figure");

function angeklicktWegMachen() {
      // erst mal die Klasse "angeklickt" entfernen
      // falls diese schon existiert,
      // weil man schon ein Bild angeklickt hat
      // sonst würde die figCaption jeweils stehen bleiben
      const angeklickt = document.querySelector("figure.angeklickt");
      if (angeklickt) {
        angeklickt.classList.remove("angeklickt");
      }
}

function figcaptionSichtbarMachen(ereignis) {
      angeklicktWegMachen();

      // man klickt auf das Bild,
      // der Event muss auf das figure-Element "hochgeleitet" werden
      const myFigure = ereignis.target.closest("figure");
      myFigure.classList.add("angeklickt");
}

// Click-Event für jedes Figure-Element innerhalb der Galerie
galerieFigures.forEach(function(ereignis) {
      ereignis.addEventListener("click", figcaptionSichtbarMachen);
});

Der Javascript-Code ist anders als der bisher verwendete: Diesmal werden nicht einzelne HTML-Elemente für Javascript ausgewählt, sondern eine ganze Liste document.querySelectorAll(".galerie figure"). Diese Javascript-Funktion erfasst hier alle figure-Elemente.

Wenn Ihr den gleichen HTML-Aufbau (incl. der Klassen) verwendet, könnt Ihr einfach den Javascript-Code übernehmen…

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Beachtet, dass es neben dem style.css auch noch die Datei popup.css gibt, in der alle CSS-Anweisungen gesammelt sind, die für das aufspringende Großbild nötig sind!

Ebenso gibt es neben dem script.js auch noch eine Datei popup.js, die Ihr nicht verändern müsst, wenn Ihr meinen Code unverändert verwenden möchtet.

Auf der eigenen Website verwenden

Wenn Ihr den Code für Eure eigene Website verwenden möchtet, müsst Ihr „nur“ die Inhalte der figure-Elemente anpassen, die richtigen Links zu den Großbilder erstellen und sowohl die CSS-Dateien als auch die Javascript-Dateien einbinden.

HTML

<!DOCTYPE html>
<html lang="de">
<head>
    […]
    <!-- das "normale Stylesheet" -->
    <link rel="stylesheet" href="c/style.css" />

    <!-- CSS-Angaben für das Popup in eigenes CSS-Datei! -->
    <link rel="stylesheet" href="c/popup.css" />
</head>

<body>
    […]

    <div class="galerie">
    <a href="p/gross/IMG_20181028_090340.jpg">
        <figure>
        <img
            src="p/klein/IMG_20181028_090340.jpg"
            data-beschreibung="Grappe schaut skeptisch"
            alt="cooles Bild"
        />
        <figcaption>Grappa</figcaption>
        </figure>
    </a>
    […]
    </div>

    <script src="js/popup.js"></script>
    <script src="js/script.js"></script>
</body>
</html>

Javascript

// das ist zu ausführlich, um hier gezeigt zu werden – schaut Euch im Demo-Paket den Code an!
// Ich habe ihn ausführlich kommentiert…

Achtet darauf, dass alle Bilder die gleiche Breite und Höhe haben! Ihr könnt beliebig viele Bilder einfügen!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

…
<main>
    <!-- die hier eingefügten Bilder werden animiert hintereinander gezeigt -->
    <figure id="hero">
        <img src="p/IMG_20181028_090340.jpg" alt="Katzenfoto" />
        <img src="p/IMG_20181125_210154.jpg" alt="Katzenfoto" />
        <img src="p/IMG_20190310_101005.jpg" alt="Katzenfoto" />
        <img src="p/IMG_20190430_082726.jpg" alt="Katzenfoto" />
        <img src="p/IMG_20190727_201636.jpg" alt="Katzenfoto" />
        <img src="p/IMG_20190923_110643.jpg" alt="Katzenfoto" />
        <img src="p/IMG_20191118_182009.jpg" alt="Katzenfoto" />
    </figure>
</main>
…

CSS

#hero {
  position: relative;
  width: 100%;
  height: 70vh;
  margin-bottom: 2em;
}

#hero img {
  position: absolute;
  top: 0;
  left: 0;
  transition: all 2s ease-in-out;
  width: 100%;
  height: 100%;
  /* damit passt sich das Bild automatisch an den
  zur Verfügung stehenden Raum an – der Ausschnitt ändert sich! */
  object-fit: cover;
}

/* wird via Javascript ein/ausgeschaltet */
.unsichtbar {
  opacity: 0;
}

JS

// ===================== Animation des Hero-Bildes oben =====================

const heroImgsArray = [...document.querySelectorAll("#hero img")];

// das 1. Bild im Array soll gleich gezeigt werden
let heroSichtbar = 0;

// macht zuerst mal alle Bilder unsichtbar
// und dann animiert das, das die Nummer "heroSichtbar" im heroImgsArray hat
function heroBilderSichtbarkeit() {
  // console.log(heroSichtbar);
  for (let i = 0; i < heroImgsArray.length; i++) {
    heroImgsArray[i].classList.add("unsichtbar");
  }
  heroImgsArray[heroSichtbar].classList.remove("unsichtbar");
}

// erst mal alle hero-Bilder bis auf das erste unsichtbar
heroBilderSichtbarkeit();

function heroAnimation() {
  if (heroSichtbar < heroImgsArray.length - 1) {
    heroSichtbar = heroSichtbar + 1;
  } else {
    heroSichtbar = 0;
  }
  heroBilderSichtbarkeit();
}

// wie lange soll das jeweilige Bild stehen bleiben ?
// hier 5 Sekunden
const heroAni = setInterval(heroAnimation, 5000);

Das Beispiel funktioniert auch ohne Javascript. Dann muss die Benutzer:in jedoch die waagrechten Scrollbalken mit dem Cursor „fassen“ und verschieben – was eher ungewohnt ist!

Beachtet, dass die orangen Buttons unsichtbar werden, wenn man in die äußeren Zonen des waagrechten Scrollens kommt – das wird ebenfalls via Javascript abgefragt.

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

HTML

<!-- 
    die section#sliding ist der "äußere Rahmen", der stehen bleibt
    und innerhalb dessen Grenzen waagrecht gescrollt wird
-->
<section id="sliding">

    <!-- das "div" nimmt den Inhalt auf und wird waagrecht gescrollt -->
    <div>

        <figure>
            <img src="…" alt="" />
            <figcaption>
            …
            </figcaption>
        </figure>

        <figure>
            <img src="…" alt="" />
            <figcaption>
            …
            </figcaption>
        </figure>

        <figure>
            <img src="…" alt="" />
            <figcaption>
            …
            </figcaption>
        </figure>

        <!-- usw… --/>

    </div>
</section>

CSS

/* ======================= horizontaler Scroller ======================= */

/* äußerer Rahmen */
#sliding {
    margin: 1em 0;
    background-color: #fff;
    width: 100%;
    /* wichtig für die Positionierung der Buttons! */
    position: relative;
}

/* breiter, waagrechter Streifen, der gescrollt wird */
#sliding div {
    display: flex;
    gap: 3px;
    overflow: auto;
}

#sliding div figure {
    margin-bottom: 3em;
}

#sliding div img {
    /* hier die Höhe festlegen */
    height: 400px;
    width: auto;
}

JS

// welche Schritte soll die Animation machen?
// umso größer der Wert, umso "ruckliger" wird die Animation
// umso kleiner der Wert, desto länger braucht das Scrollen
const steps = 60;

// wie weit soll bei "einmal auf Button klicken" gescrollt werden?
const sprungBreite = 600;

Der Javascript-Code ist zu lang, um ihn hier komplett darzustellen! Behaltet Ihr die HTML-Struktur, Klassen und IDs in Euren Sachen bei, braucht Ihr nur die hier oben aufgeführten Sachen für Eure Bedürfnisse anpassen, der Rest sollte automatisch gehen – schaut in den Source-Code der Datei "script.js", dort habe ich viele Kommentare eingefügt!

Online-Demo

Schaut Euch die Demo an – und ladet Euch zum Experimentieren die Zip-Datei runter!

Wenn Ihr das Beispiel für Eure Arbeiten verwenden sollt, müsst Ihr die gleiche HTML-Struktur und Klassen beibehalten, dann braucht Ihr an Javascript nichts ändern!

HTML

<main>
    <article>
        <h2>Überschrift 1</h2>
        <div>
            Inhalt des Div, der eingeblendet wird
        </div>
    </article>

    <article>
        <h2>Überschrift 2</h2>
        <div>
            Inhalt des Div, der eingeblendet wird
        </div>
        </article>

    <article>
        <h2>Überschrift 3</h2>
        <div>
            Inhalt des Div, der eingeblendet wird
        </div>
    </article>

    […]
</main>

CSS

/* 
das soll sichtbar werden, sobald man auf die darüber liegende 
h2-Überschrift klickt 
*/
article div {
    overflow: hidden;

    /* erst mal unsichtbar, weil keine Höhe */
    max-height: 0;

    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 1em;

    transition: all 0.7s;
}

/* "sichtbar" wird via Javascript gesetzt */
article div.sichtbar {
    height: auto;
    /*
    nächster Wert muss etwas höher als echter Inhalt sein,
    sonst wird Inhalt abgeschnitten!
    siehe: https://css-tricks.com/using-css-transitions-auto-dimensions/
    */
    max-height: 500px;
}

Javascript

function akkordionAufZu(ereignis) {
    // wenn mehr als eine "Jalousie" gleichzeitig offen sein soll,
    // nächste Zeile auskommentieren…
    sichtbarWeg();

    const nextEleSibling = ereignis.target.nextElementSibling;
    // fügt dem "DIV" unterhalb der angeklickten H2
    // die Klasse "sichtbar" hinzu oder nimmt sie wieder weg ("toggle")
    // Rest erledigt wieder CSS
    nextEleSibling.classList.toggle("sichtbar");
}

// entfernt von dem DIV, das die Klasse "sichtbar" hat, diese Klasse
function sichtbarWeg() {
    const sichtbarDiv = document.querySelector("div.sichtbar");
    if (sichtbarDiv) {
          sichtbarDiv.classList.remove("sichtbar");
    }
}

// Sammlung alle h2-Überschriften in allen Artikeln
const h2Liste = document.querySelectorAll("article h2");

h2Liste.forEach(function (ereignis) {
    ereignis.addEventListener("click", akkordionAufZu);
});

Auch hier wird wieder die Javascript-Anweisung document.querySelectorAll("") verwendet, um alle h2-Überschriften zu erfassen, die sich in einem Artikel befinden. Mit nextEleSibling.classList.toggle("sichtbar") wird dann das nächste HTML-Elemente angesprochen, das sich im HTML-Code direkt darunter befindet. Der Javascript-Code ist so flexibel, dass Ihr beliebig viele Artikel einfügen könnt – das Akkordeon wird ohne Veränderung des Scripts weiter funktionieren.

• Beim Inhalt von article div seit Ihr frei: Es können auch weitere HTML-Tags eingefügt werden.
• Schaut, dass die dort gezeigten Inhalte nicht sehr unterschiedlich lang sind – sonst die Angabe max-height anpassen!

Briefing

1. Ladet Euch das Übungspaket herunter
2. Der HTML-Code ist fertig – Ihr müsst aber den CSS-Code noch fertigstellen und die Javascript-Datei richtig befüllen – orientiert Euch dabei an dem heute gezeigten Beispiel „Menü animiert via Javascript ein- und ausblenden“. Der Code ist praktisch identisch…
3. Clickt man auf das Menü-Symbol („Burger“), wird das Navigationsmenü ein- bzw. ausgeblendet. Orientiert Euch dabei an den Vorlagen: Das Menü soll komplett den Content-Bereich abdecken.
4. Baut zuzsätzlich die Javascript-Funktion ein, die die Figcaptions sichtbar macht, wenn man auf eines der Bilder klickt. Auch hier könnt Ihr 1:1 die Funktion verwenden, die ich bei Figure mit Figcaption erst sichtbar bei Click vorgestellt habe. Einziger Unterschied: Die jeweilige Figcaption soll von links auf das Bild „geschoben“ werden.
5. Animiert den Outline-Stern so wie Ihr Lust habt – verwendet dazu die heute vorgestellten CSS-Animationen!

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_flowerpower/index.html">Flowerpower</a></li>
    <li><a href="08_venedig/index.html">Venedig</a></li>
    <li><a href="09_katzen_artikel/index.html">Katzen Artikel</a></li>
    <li><a href="10_web_typografie/index.html">Web Typografie</a></li>
    <li><a href="11_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…

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

… und erholsame Feiertage!