I want to create a scrolling text with different messages which occur each time the scrolling text reaches the end of the webpage. For example: "Hello" message goes from right to left end of the website and when it dissapears a new message appears "Welcome" and continues scrolling.

I only know how to do the marquee in html but I don't know how to make it so another message appears after the first one dissapears. Can you help me?

I can't post the code for some reason

CodePudding user response：

It is hard to give you an explanation without the code but for your question what I understand is each time you scroll to page end the message will change and it can easily be done using javascript. In javascription, we can use window.innerHeight() this will help us to give the full container height and then we can pass the if condition ones this height reach change the message. I hope you understand this otherwise share in a bit more detail will help your inquiry.

CodePudding user response：

A simple way of having a rolling banner is to have two copies of the string of messages.

Then start an animation with the string at the left hand side and translate it just half of its length - that ends up with the same message on the left hand side and so you can start again.

* {
  padding: 0;
  margin: 0;
}

.scroller {
  --number: 4;
  animation: scroll calc(var(--number) * 2s) linear infinite;
  overflow-x: hidden;
  width: calc(var(--number) * 200vw);
}

@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

.scroller span {
  width: 100vw;
  display: inline-block;
}

<div class="scroller">
  <span>HELLO</span><span>Welcome</span><span>Bienvenue</span><span>Bonjour</span><span>HELLO</span><span>Welcome</span><span>Bienvenue</span><span>Bonjour</span>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>