CODEWITHSUNDEEP
cssoverflowcss-position
RienNeVaPlu͢s
RienNeVaPlu͢s

Reputation: 7632

How to unveil a div with fixed contents

I'm animating an element by unveiling it from the bottom of the page. The position of the child elements should not be affected by the size change of the unveiling animation.

That's what I'm looking for:

goal

<div>
    <h1>Hello stranger</h1>
</div>

Both elements are positioned absolute with top, right, bottom & left set to 0. The contents are revealed by lowering the top of the div from 100% to 0%. Have a Fiddle.

My goal is

  1. to keep the heading always at a fixed position (middle)
  2. hide the heading when it is not uncovered yet

But these are my problems (Fiddles included)

What else can be done to archieve the described behavour without JS?

Upvotes: 4

Views: 477

Answers (5)

maioman
maioman

Reputation: 18734

As an alternative you could translate the div:after on top of your text :

fiddle

$$('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>

Upvotes: 1

Matt Derrick
Matt Derrick

Reputation: 5724

The solution is to move the h1 in the opposite direction to the div animation at the same time which gives the illusion that the h1 has remained static. However the h1 is actually also moving relative to the div just in the opposite direction.

I've kept the same markup and also the position: absolute; top: 0; right:0; left:0; bottom: 0; requirement you stated 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 hide class to the div (by clicking the toggle in the fiddle) and you should get the desired affect.

Things that are important to note here is the use of 3dtransforms. These are much smoother than animating top or margins and takes advantage of using a devices GPU for Hardware acceleration to achieve this.

3dtransforms are very well supported but you may need to apply the browser prefixes in some instances depending on the support you want to offer.

Upvotes: 5

vals
vals

Reputation: 64164

Here goes my attempt, using a pseudo element to hide the h1

This pseudo element has an arbitrary high height, and is positioned always at the upper side of the div.

div:after {
    content: "";
    position: absolute;
    height: 9999px;
    width: 100%;
    bottom: 100%;
    background-color: white;
}

fiddle

Upvotes: 1

Stickers
Stickers

Reputation: 78676

I think you could just change the 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>

Upvotes: 3

Paula
Paula

Reputation: 31

This is what you want exemple.

You need to do this. And see the css in the exemple.

<h1>Hello stranger</h1>
<div class="test"></div>

Upvotes: 0

Related Questions