How to Create Floating Marquee

Hello frnds today post , how to create floating Marquee in Lightning Component
so let us begin.............

Step=>1. goto developer console
                            File=>New=>Lightning Component

                  FloatingMarq.cmp

                 <aura:component>
 
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:attribute name="intervalId" type="Integer" default="0"/>
 
    <div id="parentDIV" style="overflow:hidden">
        <p style="position:relative;" id="tofloat">
            <b><span style="color:red">Important Note : </span>
            I am Floating (Left to Right) Imformation...</b>
        </p>
    </div>
 
</aura:component>

Step=>2.

       FloatingMarqController.js

    ({
    doInit : function(component, event, helper) {
        var lWidth = window.innerWidth ;//Get the window's width
        //The setInterval() method calls a function or
        //evaluates an expression at specified intervals (in milliseconds).
        window.setInterval($A.getCallback(function() {
            helper.shiftDiv(component, event,lWidth);
        } ), 100);
    },
})


Step=>3.

      FloatingMarqHelper.js

      ({
    shiftDiv: function(component, event,lWidth) {
        var changeposition = component.get("v.intervalId");
        var floatElement = document.getElementById('tofloat');
        if(changeposition < lWidth){
            floatElement.style.left = changeposition+'px';
            changeposition = changeposition + 5;
            component.set("v.intervalId",changeposition);
        }
        //reset the left to 0
        else{
            component.set("v.intervalId",0);
            floatElement.style.left = "0px";
            changeposition = component.get("v.intervalId");//resetting so as to hit the if block again
        }
    }
})


                                Output:

Thanks.!

Buy me a coffee