Responsive Images, Transitions & Javascript / 2021-12-16 / Matthias Edler-Golla, CC BY-SA 4.0



Themen

  • Nachschlagewerke
  • CSS Verläufe
  • Multicolumn Bilder
  • Responsive Images (incl. Generator)
  • CSS Transitions
  • CSS Animations
  • Smooth Scrolling
  • Figure mit Figcaption erst sichtbar bei Hover und Click
  • Grundlagen Javascript
  • CSS-Klasse via Javascript ein-/ausschalten
  • Nachtmodus via Javascript
  • Menü animiert ein- und ausblenden
  • Akkordeon-Darstellung
  • Aufspringendes Großbild
  • Selbstlaufende Bildershow
  • Waagrechtes Scrollen
  • Einstellungen via Cooky merken
  • Javascript-Library jQuery
  • jQuery Slideshow FlexSlider
  • jQuery Masonry
  • Hausaufgabe/Übung
  • am Semesterende abzugeben

Nachschlagwerke


Buchempfehlung: Transcending CSS

https://stuffandnonsense.co.uk/transcending-css-revisited/

Transcending CSS is not just another code book; it’s about more than that. It’s about design and code playing together nicely. It’s the way code is meant to support design considerations. It’s about breaking the chains that sometimes keep us far too grounded in reality.

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


CSS Verläufe (Gradients)

Die Verläufe müssen nicht in Photoshop angelegt werden – sie werden direkt vom Browser „on the fly“ erzeugt!

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


CSS Verläufe auf Text

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


Multicolumn-Bilder

Multicolumn kann auch verwendet werden, um Bild schön dicht darzustellen – was das Grid-Layout noch nicht gut kann!

Online-Demo

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

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!


Responsive Images

Bild von A.Davey

Ein Bild wird in verschiedenen Größen und Auflösungen auf dem Server gespeichert – das jeweils für die Browserbreite bzw. Auflösung passende wird automatisch vom Browser verwendet. Die nicht passenden Bildgrößen werden gar nicht erst vom Server geladen…

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,
        p/group_portrait_900.jpg   900w,
        p/group_portrait_640.jpg   640w,
        p/group_portrait_320.jpg   320w
    "
    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!


Responsive Breakpoint Image Generator

https://responsivebreakpoints.com/

Sehr praktisches Online-Tool, das nicht nur die Breakpoints festlegt, sondern auch gleich die benötigten Bildgrößen herunterrechnet und als Zip-Datei zum Download zur Verfügung stellt – inclusiv des HTML-Codes zum Einbinden!

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“


Transitions

Transitions sorgen z.B. bei „Hover“ für einen weichen Übergang – durch einfache Animationen…

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

Hover mit Transition

Befindet sich der Cursor auf einem Element, wird ein weiteres Element animiert sichtbar

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!


CSS Animations

Shoes von begemot_dn

CSS-Animationen laufen automatisch ab. Ihr könnt festlegen, ob diese endlos oder nur eine festgelegte Anzahl von Wiederholungen ablaufen.

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

CSS Animations (Text)

CSS Animationen eigenen sich auch gut, um Textblöcke zu animieren.

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

Smooth Scrolling

Links, die innerhalb einer langen HTML-Seite z.B. von einer Überschrift zum nächsten springen, können ganz einfach „sanft“ angefahren werden.

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 &lt;nav&gt; angelegten Anchor-Links -->
    <h2 id="headline_1">Überschrift 1</h2>
    …

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


Figure mit Figcaption erst sichtbar bei Hover

Die jeweiligen <figCaption>-Elemente werden erst sichtbar, wenn Ihr mit dem Mauszeiger auf ein Bild „hovert“

Online-Demo

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

HTML

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

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

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

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

Figure mit Figcaption erst sichtbar bei Click

Das Beispiel ist fast identisch mit dem vorherigen Beispiel. Nur wird hier der <figCaption>-Text erst sichtbar, wenn Ihr auf das jeweilige Bild clickt – dafür ist Javascript notwendig!

Online-Demo

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

HTML

<html>
    […]
    <body>
        […]
        <!-- identisch mit dem vorherigen Beispiel! -->
        <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 {
    /* wie vorheriges Beispiel */
}

.galerie figure {
    /* wie vorheriges Beispiel */

    transition: all 0.3s;
}

.galerie figcaption {
    /* wie vorheriges Beispiel */

    transition: top 0.4s ease-in-out;
}

/* die Klasse "angeklickt" wird via Javascript vergeben */

/* 
    Beim Hover-Beispiel stand hier:
    .galerie figure:hover figcaption
*/
.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);
});

Javascript

Javascript ist nicht zwingend notwendig – man kann sehr gute Websites gestalten ohne Javascript zu verwenden!

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!


Graceful Degradation

Central Station von Stig Nygaard

Mit Graceful degradation wird eine auf Stabilität und Sicherheit gerichtete Reaktion eines (Computer-)Systems auf Fehler, unerwartete Ereignisse oder Teilausfälle des Systems genannt, bei der das (Computer-)System den Betrieb so weit als möglich aufrechterhält. Ein Fehler in einem Teilsystem reduziert die Funktionalität des Gesamtsystems nur stufenweise, etwa durch eine geringere Qualität oder weniger Funktionen.

Eine Website muss auch ohne Javascript funktionieren – so wie eine Rolltreppe auch noch funktioniert, wenn der Strom ausgefallen ist!

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


Beeindruckende Anwendungsbeispiele von Javascript

http://www.nytimes.com/newsgraphics/2013/10/27/south-china-sea/


Einbinden von Javascript

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>

Codecademy

Codecademy/Javascript

Ein sehr gut gestalteter Online Kurs zum Erlernen z.B. von Javascript – kostenlos!

LinkedIn Learning

… auch dort gibt es einige Javascipt-Kurse!


Klasse via Javascript umschalten

Javascript schaltet nur eine Klasse an/aus. Den Rest (incl. Animationen) erledigt CSS!

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;
    transform: rotate(720deg);
}

Javascript

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

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

meinKnopf.addEventListener("click", function() {
    demo.classList.toggle("betont");
});

Nachtmodus via Javascript

Um in den Nachtmodus umzuschalten, muss nur das <html>-Element die Klasse „nacht“ via Javascript zugewiesen bekommen – den Rest übernimmt wieder CSS!

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

Menü animiert via Javascript ein- und ausblenden

Das Menü wird sichtbar/unsichtbar, wenn Ihr auf den „Burger“ clickt!

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

CardFlip 3D

Bushfire von bertknot

Auch hier wird Javascript nur dazu genutzt, eine Klasse an und auszuschalten! Die 3D-Transformation erledigt CSS.

Online-Demo

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

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

Bildervorschau via Javascript

Die Bilder bekommen per Mouse-Click eine Klasse zugewiesen bzw. entfernt – das Ein- und Ausblenden übernimmt wieder CSS

Online-Demo

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

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

Akkordeon-Darstellung

Der Inhalt einer Seite wird zuerst bewußt reduziert dargestellt – erst wenn man auf eine Überschrift klickt, wird der dazugehörige Inhalt sichtbar.

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

Aufspringendes Großbild

Klickt man auf eines der Bilder in der Galerie, wird davon eine größere Version gezeigt. Dabei wird keine neue Seite aufgerufen, das große Bild legt sich direkt über die Galerie.

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!

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 Datei popup.css als auch die Javascript-Datei script.js 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>
        […]
        <figure>
            <!-- der Link zum großen Bild -->
            <a href="p/gross/IMG_20181028_090340.jpg">
            <img
                src="p/klein/IMG_20181028_090340.jpg"
                data-beschreibung="Grappe schaut skeptisch"
                alt="cooles Bild"
            />
            </a>
            <figcaption>Grappa</figcaption>
        </figure>

        […]

        <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…

Selbstlaufende Bildershow

Die an der entsprechenden Stelle eingefügten Bilder werden automatisch hintereinander eingeblendet.

Achtet darauf, dass alle Bilder die gleiche Breite und Höhe haben!

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

Waagrechtes Scrollen

Content wird in einem langen Streifen angezeigt. Durch waagrechten Scrollen wird der Inhalt nach und nach sichtbar. Javascript macht die Bedienung einfacher, wenn man kein Eingabemedium hat, das das waagrechte Scrollen unterstützt.

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;
    position: relative;
    width: 100%;
    /* Höhe so einstellen, dass innerhalb des Scroller 
    nicht zusätzlich vertikal gescrollt werden kann! */
    height: 510px;
}

/* breiter, waagrechter Streifen, der gescrollt wird */
#sliding div {
    display: grid;
    /* hier muss die richtige Anzahl stehen! Wieviele Sachen wollt Ihr zeigen… */
    grid-template-columns: repeat(15, auto);
    grid-gap: 1vw;
    overflow: scroll;
}

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


Einstellung via Cooky merken

Habt Ihr den Benutzern die Möglichkeit gegeben, Einstellungen am Aussehen Eurer Website zu machen und möchtet, dass diese Einstellungen auch erhalten bleiben, wenn Ihr mehrere HTML-Seiten habt, bieten sich Cookies an, um die Settings auf dem Rechner der jeweiligen Benutzer:in zu speichern.

Die hier vorgestellten Cookies sind Session Cookies und werden normalerweise vom Browser gelöscht, sobald das Browserfenster geschlossen wird.

Online-Demo

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

HTML

<footer>
    <!-- sobald auf einen der Buttons geklickt wird,
    ändert sich die Hintergrundfarbe
    gleichzeitig wird ein Cooky gespeichert
    -->
    <button id="rot">Roter HG</button>
    <button id="blau">Blauer HG</button>
    <button id="gruen">Grüner HG</button>
    <button id="weiss">Weißer HG</button>
</footer>

CSS

/* ============= Klassen, die via Javascript gesetzt werden ============= */

/*
entweder direkt beim Klicken auf einen der Button
oder beim Laden der jeweiligen Seite, dazu wird der Wert des Cooky ausgelesen
*/
body.rot {
    background-color: red;
    color: #fff;
}

body.blau {
    background-color: blue;
    color: #fff;
}

body.gruen {
    background-color: green;
    color: #fff;
}

JS

// auslösende Buttons
const rotKnopf = document.querySelector("#rot");
const blauKnopf = document.querySelector("#blau");
const gruenKnopf = document.querySelector("#gruen");
const weisserKnopf = document.querySelector("#weiss");

// der ganze body
const body = document.querySelector("body");

// entfernt erst mal die Klassen "rot, blau, gruen"
function bodyKlassenWeg() {
    body.classList.remove("rot");
    body.classList.remove("blau");
    body.classList.remove("gruen");
}

function cookyUndHintergrundSetzen(hgFarbe) {
    // body bekommt die jeweilige Klasse
    body.classList.add(hgFarbe);
    // hier wird das Cooky gesetzt und die "hgFarbe" definiert…
    document.cookie = `hgFarbe=${hgFarbe}; SameSite=Lax; Secure`;
}

rotKnopf.addEventListener("click", function () {
    bodyKlassenWeg();
    let hgFarbe = "rot";
    cookyUndHintergrundSetzen(hgFarbe);
});

blauKnopf.addEventListener("click", function () {
    bodyKlassenWeg();
    let hgFarbe = "blau";
    cookyUndHintergrundSetzen(hgFarbe);
});

gruenKnopf.addEventListener("click", function () {
    bodyKlassenWeg();
    let hgFarbe = "gruen";
    cookyUndHintergrundSetzen(hgFarbe);
});

// Sonderfall, hier wird das Cooky wieder gelöscht,
// weil der weiße HG ja die Grundeinstellung ist…
weisserKnopf.addEventListener("click", function () {
    bodyKlassenWeg();

    // cookie wird durch "max-age=0" geloescht
    // https://www.mediaevent.de/javascript/cookie-read.html
    document.cookie = "hgFarbe=wurscht; max-age=0; SameSite=Lax; Secure";
});

// mehr zu Cookies:
// https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie

// ==================== Beim jeweiligen Laden der HTML-Seite wird das Cooky eingelesen… ====================

function farbEinstellungenLesen() {
    // nur falls es ein Cookie gibt
    if (document.cookie) {
        const cookieValue = document.cookie
            .split("; ")
            .find((row) => row.startsWith("hgFarbe="))
            .split("=")[1];

        body.classList.add(cookieValue);
    }
}

window.addEventListener("load", farbEinstellungenLesen);

Javascript-Libraries

Mike's Xtracycle von grrsh

Javascript-Libraries sind tatsächlich wie ein Hilfsmotor: Sie erleichtern teilweise das Realisieren von Website, sorgen aber für viel (häufig unnötigen) „Balast“…

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 habe ich bisher gerne verwendet – sie wird aber immer seltener benötigt, weil sich Javascript in den letzten Jahren sehr gut weiterentwickelt hat und jetzt viele Funktionen problemlos anbietet, für die früher eine Javascript-Library notwendig war…


Einbinden von jQuery

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.5.1.min.js"></script>

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

</body>
</html>

Source-Code

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


jQuery: Syntax ähnlich CSS

jQuery ist relativ leicht zu erlernen, wenn man CSS kann – ein Grund dafür, dass diese Library so beliebt ist!

CSS

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

Javascript

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

Mit document.querySelector() hat das aktuelle Javascript eine ähnlich einfach zu erlernende Syntax eingeführt – auch ein Grund, dass jQuery immer seltener eingesetzt wird…


FlexSlider Bildershow

flexslider

Sehr praktisches Plugin für Bilder-Gallerien, das auch auf mobilen Endgeräten funktioniert und dort sogar „Swipe-Event“ unterstützt …

Online-Demo

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

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>

Lightbox-Bilder

Online-Demo

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

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


Am 27.1.22 abzugeben

So soll die Dateistruktur bei jeder/jedem von Euch online am Ende aussehen!

Bitte erstellt & gestaltet dazu eine Startseite in Eurem Online-Acount, von der aus alle Übungs-Aufgaben verlinkt sind!

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…

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

(Letzte) Übung/Hausaufgabe

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
  4. Erstellt für die Hover-Funktion eine Animation, bei der die Figcaption zuerst unsichtbar ist und dann von links animiert auf das Bild geschoben wird
  5. Animiert das Herz im Header und den Outline-Stern so wie Ihr Lust habt – verwendet dazu die heute vorgestellten CSS-Animationen!

Danke!

… und erholsame Feiertage!

Alle Scripte durchsuchen

Weitere Vorträge: