HTML CSS

SIMPLE NEWS TICKER WITH PURE HTML CSS

<div class="hwrap"> <div class="hmove">   <div class="hitem">One</div>   <div class="hitem">Two</div>   <div class="hitem">Three</div> </div> </div>

THE HTML

01

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.

THE IDEA & MECHANICS

02

HIDE THE SCROLL BARS .hwrap { overflow: hidden; }

THE CSS PART A

03

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; }

THE CSS PART B

04