Hey there I am trying to implement a seamless marquee effect. Here is the example I am trying to accomplish. https://dentripelantwerpen.cargo.site/
So far I have this:
<div class="inner-content">
<div class="outer-div">
<div class="inner-container">
<h1> DEN TRIPEL<br></h1>
</div>
<div class="inner-container2">
<h1> DEN TRIPEL<br></h1>
</div>
</div>
</div>
and this is my css
.inner-content {
width:100%;
height:100vh;
}
.outer-div {
width:100%;
overflow:hidden;
}
.inner-container {
animation: marquee 10s linear infinite;
}
.inner-container2 {
animation: marquee2 10s linear infinite;
animation-delay: 5s;
}
@keyframes marquee {
from {transform: translateX(100%); }
to {transform: translateX(-100%); }
@keyframes marquee2 {
from {transform: translateX(0%); }
to {transform: translateX(-200%); }
I tried many approaches I found on the web. And came to the conclusion that I have to use to divs which will transform in and out of the viewport. But somehow only one of them is displaying. I would love to have such a smooth animation as in the example linked on top. Does anybody have an idea on how to solve this.
EDIT: I retract my answer. Went back and looked and it's wonky. I'll come back if I get a chance.
You'll be able to get what you want without js. I removed a bunch of what I felt was unnecessary html.
Because you're animating two things that need to respect each other's position what I did was position them absolutely and your stuff worked fine. I added some stuff to show the different two elements and my looping is a bit off (I gotta run because of work stuff). Check out the pen to see what I mean. You'll have to tweak things and do a better job visually but the function is there. You were really close.
h1 {
animation: marquee 10s linear infinite;
position: absolute;
font-size: 100px;
width: 650px;
border: 1px solid red;
}
.first {
color: green
}
.second {
left: 900px;
color: blue
}