CODEWITHSUNDEEP
javascripthtmlcsscss-animationsbackground-attachment
Kaki In
Kaki In

Reputation: 94

How can I add a scale animation to a background-attachment:fixed element?

I am trying to make an element that :

My problem is that both does not seem to be compatible.

  1. When I use the scale or transform: scale(...) properties, the background-attachment property gets broken.
  2. When I use the width and height properties, it does not seem to change the position and size of the image, so there is not any animation, because the image gets only cropped.
  3. I've found for a lot of pages, but I couldn't find any dealing with that on stackoverflow, except some couples of unanswered questions.

There is my css code (exemple with "scale"):

main div.full-banner
{
    position: relative;
    width: 100%;
    padding: var(--main-full-banner-padding);
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0px 0px var(--main-full-banner-shadow-size) var(--main-full-banner-shadow-color);
}

div.full-banner div.banner-background
{
    position: absolute;
    background-position: 50% 50%;
    background-size: cover;
    background-image: url('...');
    top: -1%;
    left: -1%;
    
    width: 102%;
    height: 102%;

    padding: 0px;
    margin: 0px;
    animation: full-banner-zoom 60s ease-out;
}

@keyframes full-banner-zoom {
    from {
        scale: 120%;
    }

    to {
        scale: 100%;
    }
}

main div.full-banner div.banner-content
{
    position: relative;
    z-index: 2;
}

And there is an example of how to use it :

<div class='full-banner'>
    <div class='banner-background'>
    </div>
    <div class='banner-content'>
        <h2>Hello world!</h2>
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
</div>

How can I allow the background to at the same time have background-attachment: fixed and a animation on its scale?

Upvotes: 0

Views: 84

Answers (1)

Jaiyash Godani
Jaiyash Godani

Reputation: 42

One of the way of doing this is seprating image with div using ::before. Make the position:fixed and set top bottom left right to 0,then add background properties and at last use z-index then make your animation.

body {
    margin: 0;
    font-family: Arial, sans-serif;
}

main div.full-banner {
    position: relative;
    width: 100%;
    height: 100vh;         overflow: hidden;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

div.full-banner::before {
    content: '';
    position: fixed; /* Keep the background fixed */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('https://avatars.githubusercontent.com/u/183603772?v=4');
    background-position: center;
    background-attachment:fixed;
    background-size: cover;
    z-index: 1; 
    opacity: 0.8; 
    
    transform: scale(0); 
    transform-origin: center;
    animation: scale-out-image 5s forwards; 
}

div.full-banner div.banner-content {
    position: relative;
    z-index: 2;
    text-align: center;
    transform: scale(0); 
    animation: scale-out 2s forwards; 
  height:1000vh;
}

@keyframes scale-out {
    to {
        transform: scale(1); 
    }
}

@keyframes scale-out-image{
    to {
          transform: scale(1); 
    }
}
<div class='full-banner'>
    <div class='banner-content'>
        <h2>Hello world!</h2>
        <p>Lorem Ipsum Dolor Sit Amet</p>
    </div>
</div>

Hope this helps...

Upvotes: 0

Related Questions