loader image

Animated Headline Ticker Effect

Animated Headline Ticker Effect

Animated Headline effect in both solid and outlined text. Adjustable speed, colour and size options included in the CSS

3.5/5 - (2 votes)

Template Example

robedge.com

creative vision technologist

CREDIT Jim Fahad
CSS NEEDED

selector{
--myText : 'creative vision technologist';
--textColor: #FFFFFF;
--textStroke: 0px;
--anDuration: 4s;
}
selector{
-webkit-text-stroke: var(--textStroke) var(--textColor);
display: table;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
text-align: center;
margin: 0 auto
}
selector .elementor-heading-title::before{
content: var(--myText);
color: var(--textColor);
position: absolute;
top: 0;
width: 0%;
height: 120%;
text-align: left;
overflow: hidden;
white-space: nowrap;
border-right: var(--textStroke) solid var(--textColor);
-webkit-animation:animateX var(--anDuration) linear infinite;
animation:animateX var(--anDuration) linear infinite;
}
@-webkit-keyframes animateX{
0%,10%,100%{
width:0%;
}
70%, 90%{
width: 100%;
}
}
@keyframes animateX{
0%,10%,100%{
width:0%;
}
70%, 90%{
width: 100%;
}
}

HTML NEEDED

No Additional HTML Required

robedge.com | mt irvine tobago w.i. | 868.276.2665 | robedge@gmail.com