#Lorem #Ipsum #Dolor #Sit #Amet #Consectetur #Adipiscing #Lorem #Ipsum #Dolor #Sit #Amet #Consectetur #Adipiscing
#Lorem #Ipsum #Dolor #Sit #Amet #Consectetur #Adipiscing #Lorem #Ipsum #Dolor #Sit #Amet #Consectetur #Adipiscing
Creating a section with infinitely scrolling text in Elementor is possible by following these simple steps.
Step 1: Creating the widget
- Create a full-width section
- Set the distance between the columns to 0
- Drag and drop a « Title » widget
Step 2: Adding the text
To make the text scroll infinitely from one side of the screen to the other, it is necessary to double it and delimit it with tags.
The text content of the « Title » widget should therefore look like this:
<span>#Lorem #Ipsum #Dolor #Sit #amet #Consectetur #adipiscing</span>
<span>#Lorem #Ipsum #Dolor #Sit #amet #Consectetur #adipiscing</span>
Step 3: Adding the custom CSS
Once the title has been formatted in the right way, we still have to define the CSS rules that will make the scrolling effect work. To do this, by selecting the « Title » widget :
- Select the « Advanced » tab
- Then the « custom » CSS tab
- And add these few lines of CSS
selector {
white-space: nowrap;
overflow: hidden;
}
selector .elementor-heading-title {
display: inline-block;
animation: marquee 30s linear infinite;
}
@keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}
Step 4 (optional): Add a 2nd line that scrolls in the opposite direction
To add another line that scrolls in the opposite direction, simply follow the same method and replace the CSS from step 3 with this one:
selector {
white-space: nowrap;
overflow: hidden;
}
selector .elementor-heading-title {
display: inline-block;
animation: marquee 30s linear infinite;
animation-direction: reverse;
}
@keyframes marquee {
0% {
transform: translate3d(0, 0, 0);
}
100% {
transform: translate3d(-50%, 0, 0);
}
}