jQuery vs Vanilla Javascript
Aus Slideshows, Galerien, weichem Scrollen, responsiven Menüs und all den kleinen Animationen für die Navigation war jQuery für viele Jahre kaum wegzudenken. jQuery versteckt die Komplexität von Animationen hinter einer einfachen Schnittstelle und bringt fertige Animationen mit: die subtilen jQuery-Effekte.
Heute bewerkstelligen die modernen Browser dank querySelector mit reinem Javascript (auch als "Vanilla Javascript" bezeichnet) oder einfach mit CSS-Animationen diese Effekte auch ohne den Einsatz von jQuery.
jQuery – die einfachen Effekte
Mit kaum mehr als zwei drei Script-Anweisungen verlangsamt jQuery Effekte, die wir aus HTML und CSS kennen – display:none und display:block. Statt ein Element wie einen Lichtschalter ein- und auszuschalten, blendet jQuery Elemente nachvollziehbar ein und aus.
- Einspielen von oben Rechts
show()
- Verstecken nach oben Rechts
hide()
- Wechsel von Zeigen und Verstecken
toggle()
- Vergrößern von oben Mitte
slideDown()
- Verkleinern nach oben Mitte
slideUp()
- Vergrößern / Verkleinern im Wechsel
slideToggle()
- Einblenden
fadeIn() - Ausblenden
fadeOut() - Ausblenden zu Wert
fadeTo() - Ein-/Ausblenden im Wechsel
fadeToggle()
Effekte, die das Element sichtbar machen, brauchen für den Start display:none.
jQuery-Effekte werden mit einem Event und einer anonymen Funktion aufgerufen, das hält den Scriptcode zusammen und gut lesbar.
+-- Event ohne 'on'-Präfix
|
| +-- anonyme Funktion
| |
$('.overlay').mouseover (function () {
$('.caption').fadeIn('slow');
});
<div class="hidenshow"> <img src="obstkoerbchen.png" width="340" height="339" alt="obstkoerbchen"> <div class="overlay"></div> <div class="caption">Trauben, die ess ich gern, ….</div> </div>
$('.caption').hide();
$('.overlay').mouseover (function () {
$('.caption').fadeIn('slow');
});
$('.overlay').mouseout (function () {
$('.caption').fadeOut('slow');
});
jQuery show und hide, fadeIn und fadeOut machen zunächst nichts anderes als die CSS-Regeln caption { display: none; } und caption { display: block; } – sie blenden ein Element aus oder ein.
Erst die Übergabe von Parametern wie slow, normal, fast oder die Angabe von Millisekunden (1000 Millisekunden = 1 Sekunde) bringt die Effekte ein.
Effekt zurücksetzen
Nichts einfacher als das:
$("#reset").click ( function () {
$("#icon").removeAttr("style");
});
Bild bei Mausklick oder Touch vergrößern
Den größten Teil der Arbeit übernimmt CSS mit einer Transform-Animationen, so dass das Skript einfach wird.
.container {
position: relative;
overflow: hidden;
}
#zoomable-image {
width: 100%;
transition: transform 0.3s ease;
}
#zoomable-image.zoomed {
transform: scale(2);
}
$(document).ready(function() {
$("#zoomable-image").on("click touchstart", function() {
$(this).toggleClass("zoomed");
});
});
jQuery kann mehrere Events in seiner .on-Methode verarbeiten, während das native Javascript dafür einen kleinen Umweg machen müsste. Um das Bild zu animieren, wenn es in den sichtbaren Bildausschnitt kommt, hat jQuery keine eigene Methode. Da bleibt nur der Weg über den Intersection Observer.
Beispiel slideUp, slideDown
Bei show() und hide() entwickelt sich die Animation zur linken oberen Ecke.
slideUp() und slideDown() vergrößern das Element auf 100% und verkleinern es auf 0.
<div class="upndown"> <img src="slide.png" width="300" height="215" alt="" /> <div class="slider">slideUp, slideDown</div> </div>
$('.slider').mouseenter(function () {
$('.upndown img').slideDown('slow');
});
$('.upndown').mouseleave(function () {
$('.upndown img').slideUp('slow');
});
Die »Urformen« der jQuery-Effekte können wir heute auch mit CSS-Transition und CSS-Keyframe-Animationen durchführen. Obwohl Javascript große Schritte gemacht hat: Die Eleganz der kleinen Effekte mit jQuery ist nicht einfach zu ersetzen.
jQuery durch Javascript und CSS ersetzen
jQuery wurde 2006 entwickelt, in erster Linie, um die Differenzen zwischen den Browsern auszugleichen. Heute sind die Unterschiede und Bugs der Browser egalisiert, Javascript ist standardisierter (sprich: verlässlicher) und CSS hat Effekte mit Siebenmeilenstiefeln vorgelegt.
Brauchen wir jQuery tatsächlich noch? Viele Projekte setzen so automatisch auf jQuery, ohne zu prüfen, ob es den Aufwand wirklich wert ist: Gerade die einfachen jQuery-Effekte lassen sich problemlos durch CSS ersetzen. Mit dem Abgang von IE11 unterstützen die Browser die eleganten jQuery-Methoden wie closest, after, before, replaceWith mit nativen JavaScript.
Was nicht ohne Weiteres als CSS geschrieben werden kann, sind Animationen auf :hover. Auf dem Touchscreen gibt es kein Hovern, und wenn der Touchscreen auf :hover reagiert, friert die kleine Animation oft am Ende ein.
CSS für Desktop
.show img {
width: 50px; height: 50px;
opacity: 0.5;
}
@media (hover: hover) {
.show img {
transition: all 1s;
}
.show img:hover {
transform: scale(2) rotate(180deg);
opacity: 1;
}
}
In den meisten Fällen ist es besser, hover-Effekte auf dem Touchscreen auszublenden – sie sind auf dem Touchscreen auch nicht einfach zu entdecken.
@media (hover: hover) verbirgt die hover-Regel vor Touchscreens. Wenn der Effekt wichtig für das Verständnis der Benutzeroberfläche ist, kann er durch eine Animation ersetzt werden.
CSS für Touchscreens
/** 2s, weil die Animation in zwei Richtungen läuft: vorwärts und zurück **/
.show img.hover {
animation: touchhover 2s ease-in-out;
}
@keyframes touchhover {
0% {transform: scale(1) rotate(0deg) }
50% {transform: scale(2) rotate(180deg) }
100% {transform: scale(1) rotate(-180deg) }
}
Javascript wird gebraucht, um die Animation auf den Touchscreen umzusetzen.
var link = document.querySelector(".show img");
link.addEventListener("touchstart", function () {
this.classList.toggle("hover");
}, false);
Einfliegen von Links
CSS-Animationen werden per Vorgabe abgespielt, wenn die Seite geladen wird. Hier wird die Animation abgespielt, wenn sie in den Viewport kommt – im Browserfenster sichtbar wird.
Aber zuerst mal die Animation:
<div class="fly-in"> <img loading="lazy" src="arc-webp" width="200" height="200" …> </div>
CSS
.fly-in {
position: relative;
height: 100px;
padding: 12px 0;
background: lavender;
}
.fly-in img {
position: absolute;
width: 200px; height: 100px;
left: -220px;
}
.now {
animation: fly 5s;
}
@keyframes fly {
0% { transform: translateX(10px)}
100% { transform: translateX(100vw)}
}
Damit die Animation startet, wenn der Benutzer weit genug gescrollt hat – in den Viewport kommt –, reichen wenige Zeilen vanilla Javascript.
Der IntersectionObserver ist ein relativ neues Javascript-Objekt, das feststellt, ob ein Element sich beim Scrollen mit dem sichtbaren Browserfenster überschneidet.
Wenn das der Fall ist, weist aero.classList.add ("now") dem Bild die Klasse now zu, die wiederum die Animation in Gang setzt.
const aero = document.querySelector (".fly-in img");
const sentinel = document.querySelector('.fly-in');
const intersectionObserver = new IntersectionObserver ( entries => {
if ( entries.some (entry => entry.intersectionRatio > 0)) {
aero.classList.add ("now");
}
});
intersectionObserver.observe (sentinel);
