In this video I’m going to show you how to easily add scrolling text to your Elementor website.
The good news is this can be done using the free version of Elementor and doesn’t require any additional plugins. I will pull this off just using CSS.
Timestamps:
- 0:00 Introduction
- 0:58 Full Screen Scrolling Text
- 5:40 Masked Scrolling Text
CSS Animation-Direction Link:
https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction
Full Screen Scrolling Text CSS Code:
.marqueeheading h2{animation: cssmarquee 10s linear infinite;}
@keyframes cssmarquee {
0% {
transform: translateX(100vw);
}
100% {
transform: translateX(-100vw);
}
}
Masked Scrolling Text CSS Code:
.marqueeheading h2{animation: cssmarquee 15s ease-in-out infinite alternate;
}
.marqueeheading {overflow: hidden;}
@keyframes cssmarquee {
0% {
transform: translateX(-100%);
}
50% {
transform: translateX(0);
}
100% {
transform: translateX(100%);
}
}
