فوتر متحرک

این فوتر متحرک از پایین صفحه به داخل اسلاید می‌رود. افکت با استفاده از ویژگی transform CSS ایجاد می شود. نتیجه یک انیمیشن پرفورمنس است که باعث تغییر چیدمان نمی شود.

HTML

<div id="banner" class="banner">
  <button id="close-button" class="close-button" aria-label="close" tabindex="0">✕</button>
  <div>
    <h1>Notice</h1>
    Lorem ipsum dolor sit amet.
  </div>
</div>

CSS


        body {
    overscroll-behavior-y: none;
    font-family: system-ui;
    padding: 2em;
    background-color: #f4f4f4;
}
.banner {
    animation: slideIn 1000ms ease-in-out;
    position: fixed;
    left: 0;
    bottom: 0;
    right: 0;
    padding: 1rem;
    background-color: white;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
@keyframes slideIn {
    from {
        transform: translateY(100vh);
    }
    to {
        transform: translateY(0vh);
    }
}
.close-button {
    background: transparent;
    border: none;
    padding: 1em;
    font-size: 1em;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
}

JS


        document.getElementById("close-button").onclick = () => {
    document.getElementById("banner").style.display = "none";
}