How to open a div with fixed content
I am updating the element by expanding it to the bottom of the page. The resizing of children should not be affected by the resizing of the displayed animation.
What I am looking for:
<div>
<h1>Hello stranger</h1>
</div>
Both elements are positioned absolute
when the top, right, bottom, and left values are set to 0
. The content is displayed by decreasing the value top
div
from 100%
to 0%
. Have a Fiddle .
My goal
- keep the title always in a fixed position (middle)
- hide the title if not already open
But these are my problems (Fiddles included)
- When used,
position:fixed
for ish1
always displayedoverflow
. - When used, the
position:absolute
position does not matchfixed
. - When using,
clip:rect(500px auto auto auto)
I lose the ability to use%
. And so I can't figure out the exact height of the viewport without using JavaScript.
What else can be done to archive the described behavior without JS?
source to share
The solution is to move h1
in the opposite direction to the animation div
at the same time, which gives the illusion that it has h1
remained stationary. However, h1
in fact , it also moves relatively div
only in the opposite direction.
I have kept the same markup as well as the requirement position: absolute; top: 0; right:0; left:0; bottom: 0;
you specified on both elements.
http://jsfiddle.net/eLbcdc9c/6/
Html
<div>
<h1>Hello stranger</h1>
</div>
CSS
div {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #000;
transform: translate3d(0, 0%, 0);
overflow: hidden;
}
h1 {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
transform: translate3d(0, 50%, 0);
}
/* Transition effect and timing must be the same for both elements to give the perfect illusion */
div,
h1 {
transition: transform 500ms ease-in;
}
/* The transform class added to the div to begin the animation on the h1 and div at the same time */
.hide {
transform: translate3d(0, 100%, 0);
}
.hide h1 {
transform: translate3d(0, -50%, 0);
}
Apply the class hide
to div
(by clicking the radio button in the script) and you should get the effect you want.
The use of 3dtransforms is important here. They are much smoother than animations top
or animations margins
, and you can use GPU hardware for hardware acceleration for that .
3dtransforms is very well supported , but you may need to apply browser prefixes in some cases depending on the support you want to offer.
source to share
I think you could just change h1 from position:absolute
to fixed
.
http://jsfiddle.net/o8d79jum/8/
div {
position:absolute;
overflow:hidden;
top:100%;
right:0;
bottom:0;
left:0;
background:black;
color:white;
animation:ani 2s infinite;
}
h1 {
position:fixed;
top:50%;
left:0;
right:0;
text-align:center;
transform:translateY(-50%);
margin:0;
}
@keyframes ani {
0% {
top:100%;
}
100% {
top:0%;
}
}
<div>
<h1>Hi, I'm centerized</h1>
</div>
source to share
Alternatively, you can translate div:after
over text:
$$('button').first().on('click', function(e){ $$('body').first().toggleClassName('animate'); });
body{
margin:0
}
div {
position:absolute;
height: 100%;
width: 100%;
z-index: -1;
overflow:hidden
}
div:after {
content: "";
position: absolute;
height: 100%;
width: 100%;
bottom: 100%;
background-color: black;
top:0;
z-index:999;
}
h1 {
position:absolute;
color:red;
top:50%;
left:0;
right:0;
text-align:center;
transform:translateY(-50%);
}
.animate div:after {
animation-name:ani;
animation-duration:2s;
animation-fill-mode: forwards;
}
@keyframes ani {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100%);
}
}
button{position:absolute;top:5px;left:5px;
z-index:9999}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prototype/1.7.2/prototype.min.js"></script>
<div><h1>Hi, I'm centerized</h1></div>
<button>Start</button>
source to share