I created a sleek little box that smoothly animates up from the bottom of the screen when a button is clicked, and gracefully slides back down when the same button is clicked again.
The design and functionality are spot on, but there's a slight issue. In order to prevent users from scrolling down and accidentally revealing the box, I implemented overflow-y: hidden on the body. However, this also hides other content on the page that I want users to be able to scroll through while keeping the box hidden and maintaining the animation effect.
Key CSS Elements:
body {
padding: 0;
margin: 0;
position: relative;
overflow-y: hidden;
}
.box-wrapper,
.box {
position: absolute;
bottom: 2em;
left: 1em;
z-index: 9;
}
.box-wrapper {
transition-duration: 600ms;
height: 100%;
}
.box-wrapper.hidden {
transform: translate(0, 100%);
}
HTML Structure:
<div class="box-wrapper hidden">
<div class="box">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa, quos?
</div>
</div>
Included is a JavaScript snippet that removes the .hidden class upon clicking the button. For a live demonstration, check out the code in the fiddle.
Any suggestions for improving this setup? Thank you.