CODEWITHSUNDEEP
javascripthtmlcssanimationlottie
All In
All In

Reputation: 89

Lotie js animated background

Work with Lotie js and want use lotie animation like background, but animation covers all blocks. Z-index dont work. How to move the animation down so that other blocks are visible?

.page {
    width: 100vw;
    height: 100vh;
    position:absolute;
  z-index:-999;
}
.text {
z-index:10000;
position:absolute;
width:500px;
font-size:30px;
}
<div class='page'><lottie-player src="https://assets7.lottiefiles.com/packages/lf20_nee43fld.json"  background="transparent"  speed="1"  style="width: 100%; height: 100%;"    autoplay></lottie-player>
<div class="text">ddddddddddd</div>
</div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

Upvotes: 0

Views: 1873

Answers (1)

reallynattu
reallynattu

Reputation: 95

Try applying the z-index positioning to the player instead of its parent ".page" which also holds the ".text" element too.

lottie-player {
    width: 100vw;
    height: 100vh;
    position:absolute;
  z-index:-999;
}
.text {
z-index:10000;
position:absolute;
width:500px;
font-size:30px;
}

Upvotes: 2

Related Questions