Este pie de página animado se desliza desde la parte inferior de la página. El efecto se crea con la propiedad transform de CSS. El resultado es una animación de rendimiento que no causa cambios de diseño.
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";
}