html - Marquee doesnot scroll smoothly, need 100% smooth scroll for marquee -
i using marquee scroll right side left. below code works fine. not scrolling smoothly. content "hover on me stop" blinking or flashing. need 100% smooth scroll below marquee. please me. whether possible without javascript??
<marquee behavior='scroll' direction='left' scrollamount='3' onmouseover='this.stop()' onmouseout='this.start()'>hover on me stop</marquee>
if wish try using pure css easiest approach. though need check support older browsers , add vendor prefixes.
.marquee-parent { position: relative; width: 100%; overflow: hidden; height: 30px; } .marquee-child { display: block; width: 147px; /* width of text div */ height: 30px; /* height of text div */ position: absolute; animation: marquee 5s linear infinite; /* change 5s value desired speed */ } .marquee-child:hover { animation-play-state: paused; cursor: pointer; } @keyframes marquee { 0% { left: 100%; } 100% { left: -147px /* same text width */ } }
<div class="marquee-parent"> <div class="marquee-child"> hover on me stop </div> </div>
Comments
Post a Comment