Box folgt den Bewegungen des Mauszeigers Animation mit CSS und Javascript von Voll Webdesign Frankfurt
Der Pen auf Codepen unter https://codepen.io/vollwebdesign/pen/bGOyaYG ist ein anschauliches Beispiel für interaktive Animationen, um eine Website ansprechender und benutzerfreundlicher zu gestalten. In diesem speziellen Pen, erstellt von Voll Webdesign Frankfurt, folgt eine Box den Bewegungen des Mauszeigers auf dem Bildschirm. Die Box behält dabei eine konstante Größe und eine einfarbige Füllung bei.
Die Animation wird durch JavaScript ermöglicht. Ein Event-Listener wird für das mousemove-Event des Dokuments definiert, um die aktuelle Position des Mauszeigers zu erfassen. Die clientX und clientY Eigenschaften des Event-Objekts werden genutzt, um die horizontale bzw. vertikale Position des Mauszeigers zu ermitteln. Diese Werte werden anschließend verwendet, um die Position der Box mittels der transform CSS-Eigenschaft zu aktualisieren, speziell durch die translate-Funktion, die die Box an die gewünschte Position verschiebt.
In der CSS-Definition ist eine Übergangseigenschaft (transition) festgelegt, die eine glatte und animierte Bewegung der Box ermöglicht, anstatt einer sprunghaften Bewegung. Dadurch entsteht eine fließende Animation, die den Eindruck vermittelt, dass die Box dem Mauszeiger folgt.
Webdesigner und Webagenturen in Frankfurt optimieren die Benutzererfahrung ihrer Websites
Solche interaktiven Animationen können ein wesentlicher Bestandteil des Webdesigns sein und sind besonders für Webdesigner in Frankfurt und Webagenturen in Frankfurt von Bedeutung, die nach Möglichkeiten suchen, die Benutzererfahrung auf den Websites ihrer Kunden zu verbessern. Mit der Kompetenz von Voll Webdesign Frankfurt in solchen interaktiven Animationstechniken können Webprojekte visuell ansprechender und interaktiver gestaltet werden, was letztendlich zu einer verbesserten Benutzerzufriedenheit führt.
HTML, CSS und Javascript von Voll Webdesign Frankfurt
HTML
<div id=“box“></div>
CSS
#box {
position: absolute;
width: 100px;
height: 100px;
background-color: red;
transition: background-color 0.3s, transform 0.3s;
}
JS
const box = document.getElementById(‚box‘);
// Change position of box on mouse move
document.addEventListener(‚mousemove‘, (event) => {
const x = event.clientX;
const y = event.clientY;
box.style.transform = `translate(${x – 50}px, ${y – 50}px)`;
});
// Change color of box on click
box.addEventListener(‚click‘, () => {
const colors = [‚red‘, ‚green‘, ‚blue‘, ‚yellow‘, ‚purple‘, ‚orange‘];
const currentColor = getComputedStyle(box).backgroundColor;
const newColor = colors[(colors.indexOf(currentColor) + 1) % colors.length];
box.style.backgroundColor = newColor;
});