Es müssen nicht immer die ausgefallensten Animationen auf eine Webseite eingebaut werden, um den Aha-Effekt bei den Webseitenbesuchern auszulösen. Manchmal reicht es auch, wenn ganz kleine Animationen / Effekte eingebaut werden – wie eine Card, die sich mit der Maus bewegt.

Und genau das baue ich heute mit euch.

Video

HTML

<div data-tilt class="card">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Libero, totam.</div>

JS Bibliothek

Zuerst müsst ihr das Haupt JS File herunterladen und einbauen.
HIer findet ihr alle weiteren Informationen Vanilla Tilt JS

CSS

:root {
    --bg: #7dfef3;
    --hellorange: #ffbf00;
    --orange: #ff930e;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background-color: var(--bg);
}

.card {
    width: 200px;
    height: 200px;
    background: linear-gradient(to bottom right, var(--hellorange), var(--orange));
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 20px 25px rgb(0, 0, 0, 0.1);
    transition: all 200ms ease;

    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

Javascript

VanillaTilt.init(document.querySelector(".card"), {
    max: 20,
    speed: 1000,
    scale: 1.2,
    glare: true,
});