Von jQuery zu CSS

Von jQuery zu CSS

CSS hat mit Transitions und Animationen komplexe Animationen mit Javascript vereinfacht, und einfache Animation wie die subtilen Effekte aus jQuery kann CSS komplett und selbst ohne den Einsatz von Javascript ersetzen. Das erspart die Ladezeit für die jQuery Library und gleichzeitig den Aufwand für die Einarbeitung in Javascript und jQuery.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Einblenden und Vergrößern aus der Mitte

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.

Symbol
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:

Symbol
HTML
<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.

Javascript IntersectionObserver
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);