Issue
I can't figure out how I can use a Lottie animation in the background and put text over it.
I am using Svelte in case it matters.
<section>
<div class="animation">
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="static\animation.json" background="transparent" speed="1" style="width: 1000px; height: 1000px;" loop autoplay></lottie-player>
<h1>
Title
</h1>
<h2>
Text
</h2>
</div>
</section>
<style>
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
h1 {
width: 100%;
}
h2 {
text-align: center;
}
</style>
I tried using z-index but it didn't change anything.
Solution
I don't know you mean this, but hope it could help you.
section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
position: relative;
}
.title {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
h1 {
text-align: center;
}
h2 {
text-align: center;
}
<section>
<div class="animation">
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="static\animation.json" background="transparent" speed="1" style="width: 1000px; height: 1000px;" loop autoplay></lottie-player>
</div>
<div class="title">
<h1>Title</h1>
<h2>Text</h2>
</div>
</section>
Answered By - Sato Takeru
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.