HTML CSS
(quick & simple example)
<div class="hwrap"> <div class="hmove"> <div class="hitem">One</div> <div class="hitem">Two</div> <div class="hitem">Three</div> </div> </div>
hwrap
hmove & items
.hwrap Fixed area on the screen. .hitem Forced into a horizontal row. .hmove Use CSS animation to move items from right-to-left.
HIDE THE SCROLL BARS .hwrap { overflow: hidden; }
ALL ITEMS INTO HORIZONTAL ROW .hmove { display: flex; } .slide { width: 100%; flex-shrink: 0; }
MOVE SLIDES WITH CSS ANIMATION @keyframes tickerh { 0% { transform: translate3d(100%, 0, 0); } 100% { transform: translate3d (-400%, 0, 0); } }
.hmove { animation: tickerh linear 15s infinite; } .hmove:hover { animation-play-state: paused; }