<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <marquee class="li" direction=”right” onmouseover="stop()" onmouseout="start()">★ HTML tag <marquee> ★</marquee> <div class="rightTI li">★ CSS animation and text-indent ★</div> <div class="rightCSS li"><div>★ CSS animation and position relative ★</div></div> <div class="rightJS li"><div>★ pure javascript ★</div></div> <div class="rightJQ li"><div>★ Jquery animate ★</div></div>

marquee { background: #0089fa; } .rightTI { background: #ff002b; white-space: nowrap; overflow: hidden; animation: marquee 18s linear infinite; } .rightTI:hover { animation-play-state: paused; } @-webkit-keyframes marquee { 0% {text-indent: 100%;} 100% {text-indent: -100%;} } .rightCSS { background: #a35dc1; overflow: hidden; } .rightCSS div { position: relative; animation: CSSright linear 18s infinite; } @keyframes CSSright { 0% { right: -100% } 100% { right: 100% } } .rightCSS:hover div { animation-play-state: paused; } .rightJS { background: #ffa900; } .rightJQ { background: #00a753; } .li { float: left; width: 80%; padding: 1%; margin: 1% 10%; height: 20px; border-radius: 0.5em; box-shadow: 0 0.1em 0.5em; }

/* Vanilla JS */ var rightJS = { init: function(){ rightJS.Tags = document.querySelectorAll('.rightJS'); for(var i = 0; i < rightJS.Tags.length; i++){ rightJS.Tags[i].style.overflow = 'hidden'; } rightJS.Tags = document.querySelectorAll('.rightJS div'); for(var i = 0; i < rightJS.Tags.length; i++){ rightJS.Tags[i].style.position = 'relative'; rightJS.Tags[i].style.right = '-'+rightJS.Tags[i].parentElement.offsetWidth+'px'; } rightJS.loop(); }, loop: function(){ for(var i = 0; i < rightJS.Tags.length; i++){ var x = parseFloat(rightJS.Tags[i].style.right); x ++; var W = rightJS.Tags[i].parentElement.offsetWidth; var w = rightJS.Tags[i].offsetWidth; if((x/100) * W > w) x = -W; if (rightJS.Tags[i].parentElement.parentElement.querySelector(':hover') !== rightJS.Tags[i].parentElement) rightJS.Tags[i].style.right = x + 'px'; } requestAnimationFrame(this.loop.bind(this)); } }; window.addEventListener('load',rightJS.init); /* JQUERY */ $(function(){ var rightJQ = { init: function(){ $('.rightJQ').css({ overflow: 'hidden' }); $('.rightJQ').on('mouseover',function(){ $('div', this).stop(); }); $('.rightJQ').on('mouseout',function(){ $('div', this).animate({ right: '100%' }, 16000, 'linear' ); }); rightJQ.loop(); }, loop: function(){ $('.rightJQ div').css({ position: 'relative', right: '-100%' }).animate({ right: '100%' }, 16000, 'linear', rightJQ.loop); } }; rightJQ.init(); });