How to use CSS to achieve the marquee effect?

Question

I want to make a marquee effect in the project? But I don't know if my javascript program is faulty. Or my browser is faulty, The effect I want to get is that when scrolling up. it will stop in the middle and continue, Scroll, but the current situation is, She will continue to scroll up, will not stay in the middle. and will not stop at the last placard_item, this is not the effect I want.

If you want to achieve scrolling>stop in the middle>rolling again, how to use CSS to change this effect? Because I really don't understand how to implement CSS animation, I need your help!

 function slideLine(box,stf,delay,speed,h){ console.log(box+'/'+stf+'/'+delay+'/'+ speed + '/'+ h) console.log("123") // 一個以上的公告項目才執行跑馬燈 if (document.querySelectorAll('.placard_item').length <= 1) { return } var slideBox = document.getElementById(box); var delay = delay||1000,speed = speed||20,h = h||36; var tid = null; var s = function(){tid=setInterval(slide, speed);} console.log(speed) var slide = function(){ // console.log("這邊有跑嗎?") // if(pause) return; slideBox.scrollTop += 1; if(slideBox.scrollTop%h == 0){ clearInterval(tid); slideBox.appendChild(slideBox.getElementsByTagName(stf)[0]); slideBox.scrollTop = 0; setTimeout(s, delay); } } setTimeout(s, delay); } slideLine('js-placard','div',2000,25,36);

 .placard { background-color: #fff0d8; display: flex; justify-content: center; flex-direction: column; align-items: center; padding: 8px 0px; margin-bottom: 12px; height: 36px; overflow: hidden; }.placard_item { line-height: 1; height: 36px; }.placard.placard_text { font-size: 13px; letter-spacing: 0.43px; }.placard.placard_text.megaphone { display: inline-block; width: 20px; height: 20px; background-color: red; background-size: cover; margin-right: 8px; }

 <section> <div class="placard" id="js-placard"> <div class="placard_item"> <span class="megaphone">HTML</p> </div> <div class="placard_item"> <span class="megaphone"></span> <p class="placard_text">CSS</p> </div> <div class="placard_item"> <span class="megaphone"></span> <p class="placard_text">javascript</p> </div> </div> </section>

Answer 1

We can achieve this with "Slick Carousel" here is an example.

 .marquee-item { padding: .5em 1em; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" integrity="sha512-yHknP1/AwR+yx26cB1y0cjvQUMvEa2PFzt1c9LlS4pRQ5NOTZFWbhBig+X9G9eYW/8m0/4OXNx8pxJ6z57x0dw==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <div class="marquee"> <div class="marquee-item">your content</div> <div class="marquee-item">your content</div> <div class="marquee-item">your content</div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script> $(document).ready(function(){ $('.marquee').slick({ arrows: false, autoplay: true, autoplaySpeed: 0, cssEase: 'linear', centerMode: true, dots: false, infinite: true, speed: 3000, variableWidth: true, }); }); </script>