A B E G

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


|



 



Themen

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

Responsive Images

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…

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


Transitions

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

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

Hover mit Transition

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

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

Menü animiert ein- und ausblenden

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

Figure mit Figcaption erst sichtbar bei Hover

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

Lightbox-Bilder

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

/* identisch mit dem vorherigem Beispiel! */

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


Javascript

Javascript ist nicht unbedingt nötig – man kann sehr gute Websites gestalten ohne Javascript zu verwenden!

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

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!


typische Anwendungen von Javascript

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

  • Animationen - z.B. beim Scrollen
  • Interactive Storytelling - z.B. The Boat
  • Webdesigner Portfolio: Leg Work
  • 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.


Einbinden von Javascript

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 Kommentare

Javascript

// ich bin ein einzeiliger Kommentar

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

Codecademy

Codecademy/Javascript

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


JavaScript for Web Designers

If staring down JavaScript leaves you unsteady, take heart. Mat Marquis is at your side, offering a detailed yet approachable tour around this essential language. Make your way through plenty of practical examples, as you pick up syntax rules, the fundamentals of scripting, and how to handle data types and loops. You’ll emerge clear-eyed and confident—and ready to get to work.

Das Buch kostet als eBook $ 11.-


Javascript-Libraries

Mike's Xtracycle von grrsh

Javascript-Libraries machen das Leben einer Webdesignerin/eines Webdesigners deutlich leichter!

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!


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


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

jQuery: Elemente ein- & ausblenden

Bei Mouse-Click Elemente sichtbar/unsichtbar machen …

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

jQuery: Elemente ein- & ausblenden 2

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 …


jQuery: Klasse ein- und ausschalten

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

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

HTML

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

CSS

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

nav img {
    width: 40px;
    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
    hier spezielle Animation -- siehe:
    https://matthewlein.com/tools/ceaser
    */
    transition: all 0.5s cubic-bezier(0.680, -2.550, 0.265, 3.850);

}

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

Javascript

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

Sanftes Scrollen innerhalb einer HTML-Seite

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

HTML

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

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

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

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

Schaut Euch dazu die Demo an!

Sanftes Scrollen dank Javascript

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

Javascript

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

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

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

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

});

</script>

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


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

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>

Masonry

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/reset.css">
    <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
    });
});

Am 25.1.18 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_venedig-fotos/index.html">Venedig Fotos</a></li>
    <li><a href="07_web_typografie/index.html">Web Typografie</a></li>
    <li><a href="08_garda-popup/index.html">Garda Popup</a></li>

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

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

Alle Übungen

  1. Tim Berners-Lee
  2. Continentenspiel
  3. Rezept
  4. Fotografie
  5. Dreispaltig
  6. Venedig-Fotos
  7. Web Typografie
  8. 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

Übung/Hausaufgabe

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

Danke!

… und erholsame Feiertage!

Weitere Vorträge: