Graphisme et webdesign à Versailles Yvelines – création site internet

Continuous texts scrolling

#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);
  }
}