Von jQuery zu CSS

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.

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

/** 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>

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