CSS3 transition and transform achieve marquee effect

This article mainly introduces relevant information to you about the example of combining CSS3 transition transform to achieve a simple marquee effect. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

This is a requirement of a previous customer. The demo given was to use gif to implement the marquee, but we cannot use gif because the text on the picture needs to be translated into various languages, so we cannot use pictures to achieve it. Then, write one yourself. html

<p lantern>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</p>

css

* {
  margin: 0;
  padding: 0;
}

[lantern] {
  overflow: hidden;
}

ul {
  white-space: nowrap;
  font-size: 0;
  transform: translateX(0);
  transition: transform 0s linear;
}

li {
  width: 50vw;
  border: 1px solid red;
  display: inline-block;
  height: 30px;
  font-size: 16px;
}

js

function lantern($element,speed = 10) {
    let liWidth = 0;
    let $ul = $element.find("ul");

    function run(init = false) {
      let $li = $ul.find("li").first();
      liWidth = $li.outerWidth();

      if(!init){
        $ul.append($li[0].outerHTML);
        $li.remove();
      }
      
      $ul[0].style.transitionDuration = "0s";
      $ul[0].style.transform = "translateX(0)";

      setTimeout(function() {
        $ul[0].style.transitionDuration = speed + "s";
        $ul[0].style.transform = "translateX(-" + liWidth + "px)";
      }, 20);
    }

    run(true);
    setTimeout(() => {
      setInterval(run, speed * 1000);
    }, 0);
  }
 
lantern($('[lantern]'), 20);

Related recommendations:

Implementation of text marquee effect

WPF implementation of good-looking marquee effects

Achieve effects similar to the Tmall lottery wheel and marquee in the mini program

The above is the detailed content of CSS3 transition and transform achieve marquee effect. For more information, please follow other related articles on the PHP Chinese website!