CODEWITHSUNDEEP
htmlcssanimationscale
aMJay
aMJay

Reputation: 2243

Animate effect for background but not content

I made a full width and height for background which is animated to slowly zoom in. The problem is that whatever I put on this background it will also be zooming in. I tried to make opposite animation to even out the effect but it's not very clean solution. Do you know any good way to only animate background? 

<header class="header">
    <div class="header-text">
        <h1>Welcome to the Milky Way</h1>
    </div>
</header>

*{
padding: 0;
margin: 0;
box-sizing: border-box;

html, body{
height: 100%;
overflow: hidden;

.header{
display: flex;
justify-content: center;
align-items: center;
min-height: 100%;
width: 100%;
background-color: #333;
background:linear-gradient(
  rgba(0, 0, 0, 0.5), 
  rgba(0, 0, 0, 0.5)
),url('bg.jpg');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
animation-name: bg;

.header-text{
color: white;
animation-name: bg-text;

.header, .header-text{
animation-duration: 60s;
animation-timing-function: linear;
animation-fill-mode: forwards;

@keyframes bg{
0%{transform: scale(1)}
100%{transform: scale(1.5)}

@keyframes bg-text{
0%{transform: scale(1)}
100%{transform: scale(0.666)}

Upvotes: 2

Views: 4283

Answers (1)

George
George

Reputation: 2036

so what you'll need to do is use a psuedo element or an immediate child of the header like so:

<header class="header">
  <div class="header-background"></div>
  <div class="header-text">
    <h1>Welcome to the Milky Way</h1>
  </div>
</header>

then move the background and animations to .header-background

you will also need to give .header:

position: relative;

and .header-background:

position: absolute;
height: 100%;
width: 100%;
z-index: 0;

and .header-text:

position: relative;
z-index: 1;

so header-background fills the whole background and is behind the content.

Note: z-index is only taken in to account if a position other than static is specified

Upvotes: 3

Related Questions