Hello!
I am trying to pause a marquee so I can select a piece of text withi it and use a hyperlink to that URL.
The marquee is infinite and i have tred various things to stop it.
Here is what the CSS looks like.
.ticker-wrap {
width: 100%;
overflow: hidden; /* Hides text outside the box */
background:rgba(10,22,40,0.92);
border-bottom:2px solid var(--gold);
height: 40px;
top: 55px;
white-space: nowrap;
position: fixed
}
.ticker-content {
font-family:'Barlow Condensed',sans-serif;
font-weight:500;
font-size:24px;
display: inline-block;
padding-left: 100%;
color: var(--text-primary);
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
/* Pause the animation on hover */
.ticker-content:hover .marquee-track {
animation-play-state: paused;
}
TIA!
Jim
I am trying to pause a marquee so I can select a piece of text withi it and use a hyperlink to that URL.
The marquee is infinite and i have tred various things to stop it.
Here is what the CSS looks like.
.ticker-wrap {
width: 100%;
overflow: hidden; /* Hides text outside the box */
background:rgba(10,22,40,0.92);
border-bottom:2px solid var(--gold);
height: 40px;
top: 55px;
white-space: nowrap;
position: fixed
}
.ticker-content {
font-family:'Barlow Condensed',sans-serif;
font-weight:500;
font-size:24px;
display: inline-block;
padding-left: 100%;
color: var(--text-primary);
animation: marquee 20s linear infinite;
}
@keyframes marquee {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
}
/* Pause the animation on hover */
.ticker-content:hover .marquee-track {
animation-play-state: paused;
}
TIA!
Jim