ऐनिमेशन वाला फ़ुटर

ऐनिमेशन वाला यह फ़ुटर, पेज पर सबसे नीचे स्लाइड करता है. यह इफ़ेक्ट, सीएसएस transform प्रॉपर्टी का इस्तेमाल करके बनाया जाता है. नतीजा एक परफ़ॉर्मेंस वाला ऐनिमेशन होता है. इससे लेआउट शिफ़्ट नहीं होते.

एचटीएमएल

<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>

सीएसएस


        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";
}