Marquee Text In Salesforce Lightning Component
Lightning Component (Sample.cmp):
<!--Sample.cmp--> <aura:component implements="flexipage:availableForAllPageTypes"> <div class="marquee"> <p> <a title="Welcome to Biswajeet Samal's Blog" href="http://biswajeetsamal.com/blog" target="_blank">Welcome to Biswajeet Samal's Blog</a> </p> </div> </aura:component>
Lightning Component Style (Sample.css):
.marquee.THIS { width: 100%; line-height: 50px; color: white; white-space: nowrap; overflow: hidden; box-sizing: border-box; background-color: red; } .marquee.THIS p { display: inline-block; padding-left: 100%; animation: marquee 20s linear infinite; font-size:30px; } @keyframes marquee { 0% { transform: translate(0, 0); } 100% { transform: translate(-100%, 0); } }