Chân trang động này trượt vào từ cuối trang. Hiệu ứng này được tạo bằng cách sử dụng thuộc tính CSS transform. Kết quả là một ảnh động
hiệu quả không làm thay đổi bố cục.
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";
}