Stufenlose und dynamische Bildrotation mit JavaScript und CSS: So funktioniert’s!
Lesezeit: ca. 4 Minuten
Bilder sind ein wichtiger Bestandteil jeder Website – sie machen Inhalte ansprechend und verbessern die User Experience. Aber was, wenn sich Bilder dynamisch bewegen und auf das Scrollverhalten der Nutzer reagieren? Eine stufenlose und dynamische Bildrotation mit JavaScript und CSS sorgt für interaktive und visuelle Highlights. In diesem Beitrag erfährst du, wie du Bilder mit einer fließenden Drehbewegung animierst, ohne dabei die Performance oder SEO deiner Website zu beeinträchtigen.
Warum dynamische Bildrotation für deine Website sinnvoll ist
🔹 Verbesserte User Experience: Bewegliche Bilder erzeugen eine moderne, interaktive Gestaltung.
🔹 SEO-freundlich: Die Animation erfolgt per JavaScript und beeinträchtigt die Ladegeschwindigkeit nicht.
🔹 Individuelle Anpassungen: Jeder Drehwinkel kann flexibel über das Backend definiert werden.
🔹 Keine zusätzlichen Plugins notwendig: Die Lösung basiert auf nativen Webtechnologien.
Schritt 1: HTML-Integration mit ACF in WordPress
Die Bilder werden mit Advanced Custom Fields (ACF) in WordPress ausgewählt und dynamisch in das Template integriert.
Mit einem Ja/Nein-Feld aktiviere ich die Bilddrehung im Einzelfall.
Zusätzlich integriere ich ein Nummernfeld, in dem die gewünschte Bilddrehung angegeben werden kann, wenn die Bilddrehung aktiviert wurde:
Der Funktionsaufruf zur Bilddarstellung übergibt zusätzlich eine Drehklasse (für das CSS) und einen individuellen Winkel:
$image = get_field('bild_text_row_image');
$rotate = get_field('drehung_freischalten');
$rotate_angle = get_field('bild_text_row_rotation_angle');
$rotate_value = ($rotate && isset($rotate_angle)) ? $rotate_angle : null;
$rotate_class = ($rotate) ? 'rotate-on-scroll' : null;
$classes = array('', $rotate_class, ''); // possible add custom classes
echo hbdev_image( $image['id'], 'large', implode(' ', array_filter($classes)), $rotate_value );
Hier ist meine Funktion, die ich für die Bilddarstellung nutze:
/**
* HBDEV-Image-Function
* @param $attachment_id
* @param $size
* @param $custom_class
* @param $rotation_value
*
* @return array|string|string[]
*/
function hbdev_image($attachment_id, $size = 'large', $custom_class = '', $rotation_value = 45) {
if (!wp_attachment_is_image($attachment_id)) {
return '';
}
// Alt-Text und Title abrufen
$alt_text = get_post_meta($attachment_id, '_wp_attachment_image_alt', true);
$title_text = get_the_title($attachment_id);
// Wenn der Alt-Text leer ist, setze ihn auf den Title
if (empty($alt_text)) {
$alt_text = $title_text;
}
// Prüfen, ob die Klasse 'rotate-on-scroll' im Klassenstring enthalten ist
$is_rotatable = strpos($custom_class, 'rotate-on-scroll') !== false;
// Standardwert setzen, falls nichts übergeben wurde
if ($is_rotatable && empty($rotation_value)) {
$rotation_value = 45;
}
// Falls eine Rotation gesetzt wurde, als data-attribute hinzufügen
$data_attr = $is_rotatable ? ' data-rotate-value="' . esc_attr($rotation_value) . '"' : '';
// Bild-HTML generieren
$image_html = wp_get_attachment_image($attachment_id, $size, false, array(
'class' => $custom_class,
'alt' => esc_attr($alt_text),
));
// Das data-attribute ins HTML-Bild einfügen
$image_html = str_replace('<img', '<img' . $data_attr, $image_html);
// Bild-HTML zurückgeben
return $image_html;
}
Schritt 2: CSS für eine weiche Drehung
.rotate-on-scroll {
will-change: transform; /* Optimierung für GPU-Beschleunigung */
transition: transform 0.1s ease-out; /* Weichere Bewegung */
}
✅ GPU-optimiert mit will-change: transform; für ruckelfreie Animationen.
✅ transition: transform 0.1s ease-out; sorgt für eine natürliche Bewegung.
Schritt 3: JavaScript für stufenlose Bildrotation
document.addEventListener("DOMContentLoaded", function () {
const images = document.querySelectorAll(".rotate-on-scroll");
images.forEach(image => {
const rotateValue = parseFloat(image.getAttribute("data-rotate-value")) || 45;
// Setzt die Start-Rotation als CSS-Variable
image.style.setProperty("--rotate-initial", `-${rotateValue}deg`);
image.style.transform = `rotate(-${rotateValue}deg)`;
image.style.transition = "transform 0.1s linear"; // Sanfte Bewegung
});
function updateRotation() {
const viewportHeight = window.innerHeight;
const offset = 115; // +115px extra Verschiebung nach unten, damit der Header berücksichtigt wird
images.forEach(image => {
const rect = image.getBoundingClientRect();
const rotateValue = parseFloat(image.getAttribute("data-rotate-value")) || 45;
// Berechnung der relativen Position (zwischen -1 und 1 begrenzen)
let normalizedPosition = (rect.top + rect.height / 2 - (viewportHeight * 0.5 + offset)) / (viewportHeight * 0.5);
normalizedPosition = Math.max(-1, Math.min(1, normalizedPosition));
// Interpolierte Rotation
const interpolatedRotation = rotateValue * normalizedPosition;
// Smooth transform
image.style.transform = `rotate(${interpolatedRotation}deg)`;
});
requestAnimationFrame(updateRotation); // Ständiges Neuberechnen für flüssige Bewegung
}
requestAnimationFrame(updateRotation);
});
✅ Flüssige Animation mit requestAnimationFrame() → 60 FPS für maximale Performance
✅ Drehwinkel basiert auf der Position im Viewport → Natürliches Verhalten
✅ Optimierte Berechnung mit normalizedPosition → Kein Ruckeln mehr
Fazit
Sanfte Bilkdrotation für mehr Interaktion: Mit dieser SEO-optimierten JavaScript- und CSS-Lösung lassen sich Bilder stufenlos drehen, basierend auf der Scrollposition des Nutzers. Die fließende Animation verbessert die User Experience, ohne die Ladezeit oder SEO-Rankings negativ zu beeinflussen. Perfekt für moderne Webdesigns!
🔥 Jetzt ausprobieren und deine Bilder interaktiv gestalten! 🔥
Auf dieser Seite habe ich ein paar Bilder mit einer Drehung versorgt: Englisch Cocker Spaniel von den Isarwiesen