How to make a marquee that pauses when you hover it

[Noah_S]

I was reading the websites pet peeves thread, and saw some discussion about marquees. So here's a code for making them pause when you hover over them.

Code

<style>
.scroll-text {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  animation: scroll-left 15s linear infinite;
  &:hover {
  animation-play-state: paused;
}
}

@keyframes scroll-left {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}
</style>

<div class="scroll-text">This scrolls left using CSS</div>

I tested it in the w3schools tryit editor to check, and it works.

Code

  animation: scroll-left 15s linear infinite;

This affects how fast it's moving. Lower numbers make faster movement.

I don't fully understand the code myself, I haven't played with animations and this is a frankencode from different sources that I jigsawed until I found a combination that worked. But one of the sources said that this wouldn't confuse screenreaders, which <marquee> does, and I hope that that's accurate.

[Dan Q]

I don't fully understand the code myself, I haven't played with animations and this is a frankencode from different sources that I jigsawed until I found a combination that worked.

Let me see if I can help with the comprehension! I've added some comments and tweaked the indentation.

Code

<style>
/* Anything with <... class="scroll-text">: */
.scroll-text {
  /* 1. Is as wide as whatever contains it: */
  width: 100%;
  /* 2. Anything that doesn't fit within it gets hidden: */
  overflow: hidden;
  /* 3. And text isn't allowed to wrap within it (therefore anything that "goes off the side" is hidden!): */
  white-space: nowrap;
  /* 4. Also, it gets an animation called "scroll-left", which
   *    takes 15 seconds to run (15s)
   *    at the same speed for the entire process (linear)
   *    repeating forever (infinite)
   */
  animation: scroll-left 15s linear infinite;

  /* When the cursor hovers over that <... class="scroll-text">... */
  &:hover {
    /* ...the animation is paused. */
    animation-play-state: paused;
  }
}

/* This bit defines the animation called "scroll-left": */
@keyframes scroll-left {
  /* 1. The animation STARTS with... */
  from {
    /* ...the position of the contents moved 100% of its width, to the right (X), i.e. entirely "off" the right. */
    transform: translateX(100%);
  }
  /* 2. The animation ENDS with... */
  to {
    /* ...the position of the contents moved 100% of its width, to the left (minus X), i.e. entirely "off" the left. */
    transform: translateX(-100%);
  }
}
</style>

<!--
  here's an element that scrolls, because it has class="scroll-text"
  so everything above applies. It doesn't have to be a <div>; indeed
  a <p>, <h2> or <li> might be more-applicable depending on the
  circumstances!
-->
<div class="scroll-text">This scrolls left using CSS</div>

With all of that new knowledge, we now have everything we need to e.g.

- make the animation faster or slower (by changing "15s" to some other duration)
- make the marquee "bounce" backwards and forwards by adding animation-direction: alternate;
- delay the start of the marquee with animation-delay: 2s; (2 second delay), OR have it start "as if" it had been playing a while already with a negative value like animation-delay: -2s; (normal loop, but when the page loads it's like it started two seconds ago
- swap the "linear" to make it gradually speed up at the start (ease-in), gradually slow down at the end (ease-out), or both (ease-in-out) - these look a little odd for text marquees, but are useful in some other animations
- make it run "backwards" with animation-direction: reverse; (or by swapping the from { ... } and to { ... } section contents

[Noah_S]

Thank you. I think you cracked animations for me. I've been fascinated by that dragonfly in the garden.