Vissza az animációkhoz
Szöveganimációk

Betűtávolság-szétnyílás

Élő előnézet – az animáció teljes méretben.

Élő előnézet
HTML · CSS · JS
HTML
<h2 class="we-letter-spacing-text">
    Fedezd fel a világot
</h2>
CSS
.we-letter-spacing-text {
    display: inline-block;
    margin: 0;
    padding: 28px 42px;

    background: #f4f1e9;
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 18px;

    color: #111111;
    font-family: "Bodoni Moda", Georgia, serif;
    font-size: clamp(32px, 5vw, 66px);
    font-weight: 500;
    line-height: 1.1;
    text-align: center;

    letter-spacing: -.035em;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .22);

    cursor: default;

    transition:
        letter-spacing .85s cubic-bezier(.22, 1, .36, 1),
        transform .65s cubic-bezier(.22, 1, .36, 1),
        box-shadow .65s ease;
}

.we-letter-spacing-text:hover {
    letter-spacing: .16em;
    transform: scale(1.025);

    box-shadow:
        0 24px 55px rgba(0, 0, 0, .28);
}
JavaScript
document.querySelectorAll(".we-letter-spacing-text").forEach(element => {

    element.addEventListener("mouseenter", function () {
        element.classList.add("is-spread");
    });

    element.addEventListener("mouseleave", function () {
        element.classList.remove("is-spread");
    });

});